Bug: UI font size customization after switching from the default language

One of the features I extremely like about this project is the possibility of customizing one’s look and feel as one pleases. However, I encountered a big bug, when playing around with it.

Bug Explained

When switching from the default language (English) to another language, German for example, and you try to change the default font size in the ThemesMenu, the entire page bugs out, and one is unable to use the entire website, until he manually removes the userPreferences cookie in their browser.

Besides the above, when switching from language, you can notice a small change in the entire website font size, without changing the values yet. All the text seems to become a little bit bigger than before.

Screenshot

I’ve tried to find the cause of this problem for a bit, but I’m completely lost in where to actually start digging. I hope you are able to find out what causes this issue and hope you are able to fix it!

Kind regards, Bram

[KindlMichal]

The problem arises when switching to a different language environment that uses a different decimal format due to cultural conventions. The objective is to ensure that the font size is consistently stored with a decimal point, even if the application’s language setting changes.

1) ThemesMenu.razor.cs In method ChangedFontSize(ChangeEventArgs args) Make this change: UserPreferences.DefaultFontSize = double.Parse(args?.Value?.ToString() ?? "0", NumberStyles.Float, CultureInfo.InvariantCulture); 2) LayoutService.cs In methods ApplyUserPreferences(bool isDarkModeDefaultTheme) and UpdateUserPreferences(UserPreferences.UserPreferences preferences) Make this change: CurrentTheme.Typography.Default.FontSize = DefaultFontSize.ToString("0.0000", CultureInfo.InvariantCulture) + "rem";

[Bram1903]

Hi @Bram1903,

did you apply both the changes? The first one (method ChangedFontSize) solves the problem with very huge fonts. The second one (in LayoutService.cs) solves the problem you mentioned.

1. ChangedFontSize Method The method ChangedFontSize solves an issue related to fonts appearing very large. The problem arises from parsing a double (decimal number) without using the invariant culture. When parsing, if a number is represented with a comma (e.g., 0,875), it’s misinterpreted, and only the numeric part after the comma is considered. So, “0,875” becomes just “875”, leading to large font sizes.

2. LayoutService.cs In LayoutService.cs file, there are the second changes (apply on both methods I have mentioned). This change addresses a problem you write about. The issue happens when sliding the font slider, and it involves the ToString() method without using the invariant culture. This results in a string like “0,875” instead of “0.875”. Then, when combined with the unit “rem,” it becomes “0,875rem” instead of the correct “0.875rem.” This incorrect value seems to be treated as “1” by certain components when they become invalid.

Regards Michal

Yeah, I changed my previous reply, because I indeed did not apply your suggestion properly in the first case, but it now works as intended! Thank you so much for your help!

You can find the final result here: #470