#33434: Browser font resizing doesn’t work in Django admin due to pixel values -------------------------------------+------------------------------------- Reporter: Thibaud Colas | Owner: nobody Type: Bug | Status: new Component: contrib.admin | Version: 4.0 Severity: Normal | Resolution: Keywords: accessibility, ux, | Triage Stage: wcag, admin, css | Unreviewed Has patch: 0 | Needs documentation: 0 Needs tests: 0 | Patch needs improvement: 0 Easy pickings: 0 | UI/UX: 1 -------------------------------------+------------------------------------- Description changed by Thibaud Colas:
Old description: > In the Django admin, there are a lot of > [https://github.com/django/django/search?l=CSS&q=font-size font size > definitions in pixels]. This is problematic for users relying on browser > text resizing, as [https://developer.mozilla.org/en- > US/docs/Web/CSS/length#absolute_length_units px and other absolute units > don’t support this]. We should use relative units throughout the project > instead. For WCAG conformance, not supporting this is a failure of > [https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html SC 1.4.4 > Resize Text]. > > Here is an example, using Chrome’s settings on macOS to do a text-only > zoom: > > [[Image(https://code.djangoproject.com/raw-attachment/ticket/33434/font- > size-resizing-django.gif, alt="Resizing the font size of the Django admin > via Chrome browser settings. There are no visible changes, apart from the > LOGOUT link which has been customized to use rem units.")]] > > At the very end, I show what we’d expect to see when using `rem` units by > adding inline styles to the LOGOUT link. > > ---- > > == Proposed fix > > We should change all font sizes using absolute units to relative ones. > For Django, the only absolute unit in use is `px`. I’d recommend > switching those definitions to `rem`, which is the relative unit that’s > the simplest to reason about. 1 rem is equal to the font size set on the > `html` element, which is 16px by default. > > So I believe fixing this should just be a matter of dividing all `px` > definitions by 16 and setting in rem. All font-size definitions in the > admin are in the `.css` files, so it’s straightforward to look for `font- > size` in those files. > > == Proposed additional changes > > In addition to the above, I would recommend: > > 1. Creating an official CSS code style documentation for Django, under > [https://docs.djangoproject.com/en/4.0/internals/contributing/writing- > code/ Writing code]. This would cover considerations like appropriate > units to use. > 2. Refactoring all font-size definitions to `rem`, even the ones already > relative using keywords (`small`), `em`, and % units. This is just > because `rem` definitions are much simpler to reason about, since the > sizes are only relative to the `html` root. There are a few cases where > `em` still have a place but they should be the (very rare) exception. > 3. Enforcing `px` are never used for `font-size` with > [https://stylelint.io/ stylelint] running in continuous integration, and > its [https://stylelint.io/user-guide/rules/list/declaration-property- > unit-disallowed-list/ declaration-property-unit-disallowed-list rule]. > > All of the above would warrant their own separate ticket, so I’m just > proposing this here for others’ consideration. If there is some > consensus, please go ahead with opening the corresponding ticket, or I’m > happy to. New description: In the Django admin, there are a lot of [https://github.com/django/django/search?l=CSS&q=font-size font size definitions in pixels]. This is problematic for users relying on browser text resizing, as [https://developer.mozilla.org/en- US/docs/Web/CSS/length#absolute_length_units px and other absolute units don’t support this]. We should use relative units throughout the project instead. For WCAG conformance, not supporting this is a failure of [https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html SC 1.4.4 Resize Text]. Here is an example, using Chrome’s settings on macOS to do a text-only zoom: [[Image(https://code.djangoproject.com/raw-attachment/ticket/33434/font- size-resizing-django.gif, alt="Resizing the font size of the Django admin via Chrome browser settings. There are no visible changes, apart from the LOGOUT link which has been customized to use rem units.")]] At the very end, I show what we’d expect to see when using `rem` units by adding inline styles to the LOGOUT link. ---- == Proposed fix We should change all font sizes using absolute units to relative ones. For Django, the only absolute unit in use is `px`. I’d recommend switching those definitions to `rem`, which is the relative unit that’s the simplest to reason about. 1 rem is equal to the font size set on the `html` element, which is 16px by default. So I believe fixing this should just be a matter of dividing all `px` definitions by 16 and setting in rem. All font-size definitions in the admin are in the `.css` files, so it’s straightforward to look for `font- size` in those files. == Proposed additional changes In addition to the above, I would recommend: 1. Creating an official CSS code style documentation for Django, under [https://docs.djangoproject.com/en/4.0/internals/contributing/writing- code/ Writing code]. This would cover considerations like appropriate units to use. 2. Refactoring all font-size definitions to `rem`, even the ones already relative using keywords (`small`), `em`, and % units. This is just because `rem` definitions are much simpler to reason about, since the sizes are only relative to the `html` root. There are a few cases where `em` still have a place but they should be the (very rare) exception. 3. Enforcing `px` are never used for `font-size` with [https://stylelint.io/ stylelint] running in continuous integration, and its [https://stylelint.io/user-guide/rules/list/declaration-property-unit- disallowed-list/ declaration-property-unit-disallowed-list] rule. All of the above would warrant their own separate ticket, so I’m just proposing this here for others’ consideration. If there is some consensus, please go ahead with opening the corresponding ticket, or I’m happy to. -- -- Ticket URL: <https://code.djangoproject.com/ticket/33434#comment:2> Django <https://code.djangoproject.com/> The Web framework for perfectionists with deadlines. -- You received this message because you are subscribed to the Google Groups "Django updates" group. To unsubscribe from this group and stop receiving emails from it, send an email to django-updates+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/django-updates/070.0a51469e0b481c280cec53e9c6d1a73e%40djangoproject.com.