?
avatar nikosdion
nikosdion
3 Jun 2020

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.

avatar nikosdion nikosdion - open - 3 Jun 2020
avatar joomla-cms-bot joomla-cms-bot - change - 3 Jun 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 3 Jun 2020
avatar nikosdion nikosdion - change - 3 Jun 2020
The description was changed
avatar nikosdion nikosdion - edited - 3 Jun 2020
avatar brianteeman
brianteeman - comment - 3 Jun 2020

Sorry, not participating in these discussions.

avatar HLeithner
HLeithner - comment - 3 Jun 2020

Sorry for answering today, the reason is that I spent the whole day hunting 1 to 3 Joomla! 3.9.19 bugs based on some reports so I hadn't the time to participate on the template topic.

I hope I comeback tomorrow and give feedback.

avatar brianteeman
brianteeman - comment - 3 Jun 2020

The aim of the accessibility tab on the user profile was to offer some per user settings for the template unlike styles which do not offer the same fine level of assignment.

Clearly the code isnt good enough (no surprise I write it) and its clear now that it is morphing into a generic user setting not just for a11y so it needs renaming.

I still believe that offering per user settings is the right way to go and that they should apply at the application level not at the template level.

avatar nikosdion
nikosdion - comment - 3 Jun 2020

Thank you @brianteeman for the feedback! I think that we are on the same page. No need to reply to that – you have too much going on offline and I respect that.

I agree that accessibility options are meant to be set at the application level and persist per user, not globally. However, their implementation is still the responsibility of the template since they require some CSS to be applied and that depends on how the actual template is implemented. We can't anticipate everything and being a com_users feature it cannot be overridden.

The practical solution I see is that the default Joomla front- and backend templates would have a "reference implementation" of these accessibility options. Third party templates and third party extensions which override Joomla's CSS – like mine – would also need to take these options into account. It will take a bit of work with 3PDs but I'm willing to put my own time where my mouth is to demonstrate it's possible and not all that hard. I do believe in an accessible web and our role as facilitators.

avatar b2z
b2z - comment - 15 Jun 2020

Good solution to solve the problem. Give it a go please.

avatar nikosdion
nikosdion - comment - 24 Jun 2020

Just a quick update. I haven't disappeared and I haven't given up on this issue. I just haven't had the time to do this yet because of higher priority issues that popped up with WebAuthn and my regular work – still gotta pay the bills :) I hope that I will find some time over the next weekend to submit a PR for this issue.

avatar hans2103
hans2103 - comment - 21 Aug 2020

@nikosdion wrote:

The practical solution I see is that the default Joomla front- and backend templates would have a "reference implementation" of these accessibility options.

By "reference implementation" you mean:

:root {
 font-size: 1em;
}

and all other font-sizes, margins and paddings use em and rem too?

If so... I like it a lot!

avatar nikosdion
nikosdion - comment - 21 Aug 2020

I finally had the time to make the PR.

Folks, I am not a frontend developer. I am setting the base font size for the html element. If there's a reason to use :root let me know in the comments of the PR. Thank you!

avatar nikosdion nikosdion - change - 22 Aug 2020
Status New Closed
Closed_Date 0000-00-00 00:00:00 2020-08-22 14:09:25
Closed_By nikosdion
avatar nikosdion nikosdion - close - 22 Aug 2020
avatar hans2103
hans2103 - comment - 22 Aug 2020

@nikosdion why did you close your PR?

The :root pseudo-class represents an element that is the root of the document.

source: https://www.w3.org/TR/selectors/#the-root-pseudo

:root is the highest level of elements in the document

avatar nikosdion
nikosdion - comment - 22 Aug 2020

Hans, I don't have the time for bikeshedding. This is a very simple issue to fix for anyone interested. If you feel like it send a PR. I can test it if you'd like.

Add a Comment

Login with GitHub to post a comment