Skip to content

Infra: Table lines instead of zebra stripes #2734

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from

Conversation

hugovk
Copy link
Member

@hugovk hugovk commented Jul 26, 2022

For consideration, styling can be adjusted.

@gvanrossum said:

In PEP 11 I see a table that has very heavy shading of alternate rows. This makes it seem that those rows are more important than the others. Can we please not use this style? Certainly there's a way to get thin lines between rows instead of the alternate shading.

The results of three user studies recommends using "zebra stripes", but if not, then a lined table:

The results of the three studies conducted to date suggest that the safest option is to shade the alternating, individual rows of your table with a single color. Taking this approach is likely to ensure that:

  • task performance is better, or at least no worse, than with other table styles, and
  • the aesthetic sensibilities and subjective preferences of the majority of your users are catered for.

If zebra striping of this type cannot be done easily, then ruling a line between each row may be the next best option.

And:

Firstly, if, in your particular circumstance, the cost associated with implementing single-color, single-row zebra striping is acceptable—and I have been told of several cases where this is not the case—then this should be done. Otherwise, stick with a plain or lined design.

Before

image image

https://peps.python.org/pep-0011/#tier-1

After

image image

https://pep-previews--2734.org.readthedocs.build/pep-0011/#tier-1

@hugovk hugovk added the infra Core infrastructure for building and rendering PEPs label Jul 26, 2022
@hugovk hugovk requested a review from CAM-Gerlach July 26, 2022 11:59
@hugovk hugovk requested a review from AA-Turner as a code owner July 26, 2022 11:59
Copy link
Member

@gvanrossum gvanrossum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apparently I'm in the 4% who dislike zebra stripes. :-)

@CAM-Gerlach
Copy link
Member

Personally, I prefer the striping for the in-body tables, as I find it both substantially more aesthetically pleasing, and significantly easier to read and follow—with just lines, I often lose sync of which row corresponds to which, particularly in wider tables. That being said, I can understand the concern about zebra-striping inadvertently giving some rows more undue emphasis. Maybe the shading could be less heavy to reduce this concern, while also introducing lines if needed to preserve baseline contrast for a11y?

@hugovk
Copy link
Member Author

hugovk commented Jul 27, 2022

Maybe the shading could be less heavy to reduce this concern, while also introducing lines if needed to preserve baseline contrast for a11y?

Here's how it looks with:

---colour-background-accent: var(--light, #ccc) var(--dark, #333);
+--colour-background-accent: var(--light, #eee) var(--dark, #222);

Before

image image

After

image image

@CAM-Gerlach
Copy link
Member

CAM-Gerlach commented Jul 28, 2022

Actually, I think the original issue was my fault—#2691 changed --colour-background-accent from #eeeeee to #cccccc in light mode, to match the contrast under dark mode, which resulted in the change to the tables; @hugovk 's above proposal essentially reverts that change (though it in turn makes several admonitions much less visible, as well as link decorations which are particularly important for a11y).

What I would suggest is to meet in the middle with #dddddd for the light theme color, which matches the nominal contrast of the #222222 dark theme color; alternatively, we could split it out to --colour-background-accent-light at #111111/#eeeeee for tables and --colour-background-accent-strong at #333333/#cccccc for the others.

@hugovk
Copy link
Member Author

hugovk commented Jul 28, 2022

alternatively, we could split it out to --colour-background-accent-light at #111111/#eeeeee for tables and --colour-background-accent-strong at #333333/#cccccc for the others.

Yeah, good idea, please see PR #2740.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
infra Core infrastructure for building and rendering PEPs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants