-
-
Notifications
You must be signed in to change notification settings - Fork 3.8k
[4.0] Allow the users to select the backend and frontend base font size #29411
Description
What needs to be fixed
Joomla 4's frontend and backend templates use inconsistent font sizes. The frontend template (Cassiopeia) forces a base font size of 14px. The backend template (Atum) doesn't force one and uses the browser default which is 16px. Both templates use Bootstrap 4 which uses relative font sizes, making the two templates inconsistent.
Furthermore, Atum looks too big on most monitors compared to the system font size unless you change your browser settings. However, this breaks other sites which are also using relative font sizes BUT apply a different text scaling (e.g. they use a body font size of 0.9 rem instead of Bootstrap's 1 rem).
On top of that, Atum has an accessibility setting that makes the fonts bigger by enforcing an 18px base font size.
Why this should be fixed
This inconsistency in how Joomla sizes text in the two built-in templates makes it impossible for a user who's not content with the defaults to scale just their Joomla site correctly without screwing up everything else on their system.
Moreover, it makes it really hard for site integrators and 3PDs come up with a design that works reasonably well across different users.
How would you fix it
Modify com_users accessibility settings, adding a "Base font size" option with the options Browser Default, 8px, 9px, ..., 72px. IMHO the default should be 14px but I'm open to having it set to "Browser Default". This would replace the a11y_font setting. If set to anything other than Browser Default we would add a class a11-font-WHATEVER (e.g. a11-font-14) which would set the html font-size to the specified pixel size in the same way the current a11_text setting works.
This change would apply in both the front- and the backend.
Here is why I think this is a better idea than modifying core Bootstrap to set a different body size.
First of all, it's not just a quick search and replace. Bootstrap has a plethora of font sizes, padding and margin settings spread out into several files. Trying to "scale down" the interface would take an extraordinary amount of time. Then we have the problem that we actually modified Bootstrap yet again which we have already established was a bad thing to do in J3.
Even if we magically changed Bootstrap's default font size from 1 rem to, say, 0.87 rem it would still be the wrong approach for some people since we are forcing a default other than their browser preference. Not doing anything is equally wrong because for most users the base font size of 16px is ridiculously big and leads to comical side effects (try viewing the Update Sites page on a 13" MacBook Pro – this is NOT what anyone would call a decent UI).
Allowing the users to set their preferred base font size per user profile is a universally acceptable solution. If you want to follow your browser settings, like J4 beta 1 does, you can. If you want a smaller or bigger size to accommodate your preferences and / or disabilities, you can. Better yet, if you do that you will get a consistent experience no matter which browser and which computer you are using.
Side Effects expected
Joomla is currently using relative font sizes to size bitmaps, such as the Joomla logo. This is wrong. We either need to use an absolute pixel size (since it's a bitmap) or use an SVG vector file with a bitmap fallback. Otherwise the logo will look blurry.
Furthermore, some aspects of Atum such as the toolbar title text and the top icons seem to have been "eyeballed" to use an approximately similar size to their Joomla 3 counterparts on the assumption that the base font size is 16px even though the rest of the template uses substantially bigger text. Moving the base font size to 14 px makes them illegible. As a second step to this proposed change these items' sizes need to be reassessed to match the scale of the rest of the template.
Why I am opening a separate issue
The previous issue 29,401 I opened has two problems. First, it became apparent that the original scope of the problem is different than what I thought and the proposed solution is no longer valid. Second, that issue is currently being spammed by someone who won't stop going on forever about off-topic issues, making it impossible to have a rational technical discussion. In my experience this is a sure-fire way to bury an issue and never get it fixed.
I am closing that issue and opening this one, in the expectation that should that person start spamming this one the moderators will just delete his posts so the rest of us can keep working productively.
Tagging previous participants @brianteeman @C-Lodder and asking for the feedback of @marcodings @wilsonge and @HLeithner Thank you and sorry for the double issue.