Give users option to override Claro --font-size-xs with --font-size-s

Created on 5 January 2024, 11 months ago

Problem/Motivation

Claro's --font-size-xs is too small for me to use comfortably on my high-resolution screen. However, if I use the browser feature to zoom text, some other text becomes too large for me to use comfortably and, if I zoom enough times, it changes the layout. It would be good to allow users the option to always override --font-size-xs with --font-size-s. I recognize this can be used in user style sheets, however, Chrome and Edge do not support user style sheets, and I would prefer not to use browser plug-ins to accomplish this for security reasons.

Similarly, while I could zoom in, that affects all pages on the website, so would affect my view of our website pages, not just the administrative user interface, and also makes all content larger - including headings, which become excessively large.

Actually, some users may even find --font-size-s too small, so it would be good to be able to choose whatever the regular font size as the minimum size for all content. I don't understand the rationale for making instructions smaller, since if someone needs them it's important that they be able to understand them without barriers to comprehension such as having to make out tiny type.

Steps to reproduce

1. Go to simplytest.me
2. In the field, type core
3. Choose Drupal core
4. Press the button to create the website
5. Login as admin
6. Go to /admin/structure/types/manage/page/fields/node.page.body

Desired result:
"Instructions to present to the user below this field on the editing form.
Allowed HTML tags: <a> <b> <big> <code> <del> <em> <i> <ins> <pre> <q> <small> <span> <strong> <sub> <sup> <tt> <ol> <ul> <li> <p> <br> <img>
This field supports tokens."
is larger, without making other content larger.

Current result:
"Instructions to present to the user below this field on the editing form.
Allowed HTML tags: <a> <b> <big> <code> <del> <em> <i> <ins> <pre> <q> <small> <span> <strong> <sub> <sup> <tt> <ol> <ul> <li> <p> <br> <img>
This field supports tokens."
is noticeably smaller than other content.

Proposed resolution

Add a preference for minimum size to the user page /user/[userNumber]/edit

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Feature request
Status

Active

Version

11.0 🔥

Component
Claro 

Last updated 1 day ago

Created by

🇺🇸United States charles belov San Francisco, CA, US

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @charles belov
  • 🇺🇸United States charles belov San Francisco, CA, US
  • 🇺🇸United States charles belov San Francisco, CA, US
  • 🇺🇸United States charles belov San Francisco, CA, US
  • First commit to issue fork.
  • Merge request !6056Form field description font size updated → (Open) created by Unnamed author
  • Status changed to Needs review 10 months ago
  • 🇮🇳India gauravvvv Delhi, India
  • Status changed to Active 10 months ago
  • 🇺🇸United States smustgrave

    Not sure what the MR is doing but doesn't match the proposed solution. Putting back to active because of that.

  • 🇮🇳India nayana_mvr

    The proposed solution says

    Add a preference for minimum size to the user page /user/[userNumber]/edit

    But for which all text should that font size be applied? Is it like, if there are texts with font size below the specified font size in the user page, then those text should use the font size given in the user page?
    Another apporoach I would propose is to create a checkbox in user page enabling which will use --font-size-s in places where --font-size-xs and --font-size-xxs are currently used.

  • 🇺🇸United States charles belov San Francisco, CA, US

    Actually it could be a drop-down for minimum font size:

    Extra Extra Small (default)
    Extra Small
    Small
    Unreduced

  • 🇮🇳India nayana_mvr

    I just tried a mock up of how the form field will look like in the user profile.

    This require more work as it will change all the font size of admin ui text based on the value selected in user profile.

  • 🇺🇸United States charles belov San Francisco, CA, US

    @nayana_mvr That mock-up is exactly what I have in mind, thank you. I would be likely to use the Unreduced setting.

  • 🇺🇸United States charles belov San Francisco, CA, US

    I'll note "Suggest the minimum font size for Admin UI." might be too small for some people to read if they haven't set it. Although I realize they can use browser zoom to read it, make the setting, then reset browser zoom to actual size once they've set it.

Production build 0.71.5 2024