#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/32338/radio-
> select-first-input-label.png)]]
>
> ----
>
> == 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:1>
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.7324c9b801f48e3e091c45da04e30d42%40djangoproject.com.
