Infra: Mute table zebra stripes to de-emphasise different rows by hugovk · Pull Request #2740 · python/peps

hugovk · 2022-07-28T09:57:24Z

Alternative to and closes#2734.

Mute the table "zebra stripes", so some rows don't look more important than others.

Re: #2734 (comment) - let's use a different CSS colour for this, so we don't affect the colour already tuned for admonitions.

Before

After

PS @CAM-Gerlach: you suggested #111111 in #2734 (comment), I went with #222222 in this PR because I think #111111 looks a bit too muted:

What do you think?

CAM-Gerlach · 2022-07-29T00:56:38Z

PS @CAM-Gerlach: you suggested #111111 in #2734 (comment), I went with #222222 in this PR because I think #111111 looks a bit too muted:

I don't disagree, though I don't think it looks that much more muted than #eeeeee, which at least on my various monitors (at least the TN panels I have at work) varies between somewhat perceptible to almost completely invisible depending on the monitor settings and viewing angle. IMO, #dddddd would be preferable, if others don't think its too dark.

CAM-Gerlach

Implementation details look good, but personally I find #111111 almost invisible on non-IPS monitors at non-optimal viewing angles, which also raises a11y concerns, whereas #222222 is much easier to spot while not being as dark.

hugovk · 2022-07-29T10:09:12Z

Updated to #dddddd:

#cccccc (original)	#dddddd	#eeeeee

CAM-Gerlach · 2022-07-29T19:20:25Z

Now that I'm at home on my personal IPS monitors #eeeeee indeed looks just fine there, but given how many people are still stuck on TN panels or otherwise subpar monitors, even not accounting for a11y, #dddddd is the safer bet IMO.

CAM-Gerlach

LGTM, thanks @hugovk

CAM-Gerlach · 2022-08-03T03:49:19Z

@gvanrossum n co, any objections here?

gvanrossum · 2022-08-03T04:06:35Z

To me, any zebra striping, no matter how muted, looks wrong. This may be a US/Europe thing? I remember looong ago coming across zebra stripes in some US document and being utterly confused by it. But I seem to be in a minority of one, so I'll stop resisting. Just don't ask me to decide between #dddddd and #eeeeee. :-)

Rosuav · 2022-08-03T04:18:46Z

Not a minority of one, but I don't have much of an argument to give, other than that zebra striping can be extremely confusing when there's any possibility that the table will have three rows in it.

CAM-Gerlach · 2022-08-03T04:40:13Z

Hmm, I dunno then. In general maybe tables are not the appropriate construct when you only have three rows? But we certainly don't want to be ambiguous or confusing, especially to our international audience.

Maybe add back the horizontal rules for contrast and just use the lightest colors such that they don't look content-meaningful? @gvanrossum does even #eeeeee looks confusing to you? If so, we might just have to decide whether the readability difficulty in terms of row alignment outweighs the potential confusion over zebra-striping in smaller tables...though we could add a snippet of JS to change the style depending on whether the table has >=4 rows or so...but that might just look inconsistent.

encukou · 2022-08-03T08:00:17Z

I prefer zebra stripes, and I'm European.
3-row zebra tables aren't that confusing if they're on a page with a bunch of bigger tables, like a possible future PEP-11.
Making the visual aid almost invisible for certain monitors/people might be OK. It's just there to guide the eye, it doesn't need contrast against the main background.
Also: consider highlighting the hovered row – the screen equivalent of using a bookmark/ruler.

CAM-Gerlach

Based on what people have said, what about this?

Add back the horizontal rules separating the rows
Mute both the light and dark colors (color-background-accent-light) all the way to #dddddd and #111111 respectively
Add a :hover on the rows of color-background-accent-strong
Also, add color-background-accent-strong to more clearly delineate the heading (as my eye has a hard time picking out the bold now)

This gives just enough static zebra contrast to guide the eye while barely being consciously visible, adds the higher-contrast horizontal rules to clearly delineate the rows themselves, and highlights the currently hovered row with a higher-contrast color, plus makes the headers easier to see.

Here's how that looks:

CAM-Gerlach · 2022-08-03T19:19:53Z

 --colour-background: var(--light, white) var(--dark, #011);
- --colour-background-accent: var(--light, #ccc) var(--dark, #333);
+ --colour-background-accent-strong: var(--light, #ccc) var(--dark, #333);
+ --colour-background-accent-light: var(--light, #ddd) var(--dark, #222);


Suggested change
--colour-background-accent-light:var(--light,#ddd) var(--dark,#222);
--colour-background-accent-light:var(--light,#eee) var(--dark,#111);
Mute the colors as much as practical (since we're adding back the lines to clearly delineate the rows)

CAM-Gerlach · 2022-08-03T19:22:08Z

+ border-top: 1px solid var(--colour-background-accent-light);
+ border-bottom: 1px solid var(--colour-background-accent-light);


Suggested change
border-top:1px solid var(--colour-background-accent-light);
border-bottom:1px solid var(--colour-background-accent-light);
border-top:1px solid var(--colour-background-accent-strong);
border-bottom:1px solid var(--colour-background-accent-strong);
To be consistent with the current and the lines

CAM-Gerlach · 2022-08-03T19:25:15Z

 }
 table caption {
 margin: 1rem 0 .75rem;
 }


Suggested change
}
}
tabletr {
border-bottom:1px solid var(--colour-rule-strong);
}
tabletheadtr {
background-color:var(--colour-background-accent-strong);
}
Add horizontal rules and clearly delineate header row

CAM-Gerlach · 2022-08-03T19:29:41Z

 table tbody tr:nth-of-type(odd) {
- background-color: var(--colour-background-accent);
+ background-color: var(--colour-background-accent-light);
 }


Suggested change
}
}
tabletbodytr:hover {
background-color:var(--colour-background-accent-strong);
}
Add "highlight" on hover

CAM-Gerlach · 2022-08-03T19:35:14Z

 table caption {
 margin: 1rem 0 .75rem;
 }
 table tbody tr:nth-of-type(odd) {


Suggested change
tabletbodytr:nth-of-type(odd) {
tabletbodytr:nth-of-type(even) {
Switch this to even, since it looks better with the revised colors

gvanrossum · 2022-08-03T21:08:00Z

Since I keep getting CC'ed on zebra stripe issues, let me reiterate once more that I think they are distracting and confusing, and moreover unnecessary. IIRC the research quoted that "proved" that zebra stripes have a usability benefit was using tables that were much wider, with much less (no) vertical spacing. The text design we are using for PEPs doesn't have those problems -- in the example given above (Tier 3 status) there is absolutely no concern about misreading the table even when you're pressed for time. And the hover feature is just obnoxious. Let's reserve background highlighting for table headings and subheadings. Look at this table in the Library Reference and tell me whether it needs zebra strips for usability: https://docs.python.org/3/library/stdtypes.html#numeric-types-int-float-complex

pradyunsg · 2022-08-26T14:27:10Z

While I agree that zebras are a suboptimal choice, I don't think anyone has stated that this change is not an improvement over status quo as-is. Let's land this, instead of blocking this on concensus over zebra, adding additional borders etc. We iterate on the other sylistic stuff in a follow up.

merwok · 2022-08-26T15:21:33Z

To merge this, the latest review needs to be addressed by the PR author (suggestions accepted or rejected).

CAM-Gerlach · 2022-08-27T02:51:03Z

Yeah, AFAIK I don't think anyone disagrees the status quo is not good and this is at least less bad than that. Muted zebra stripes are the status quo (#2691 introduced a regression with darker zebra stripe colors, which this essentially just reverts) and the status quo wins in a statement, so IMO we should at least merge this now and then iterate from there.

CAM-Gerlach · 2022-08-27T03:15:20Z

To merge this, the latest review needs to be addressed by the PR author (suggestions accepted or rejected).

I already approved the PR; my review comments are just stylistic suggestions to go in different directions based on people's feedback, which is what @pradyunsg is saying we should defer for now (and I agree).

merwok · 2022-08-28T15:47:05Z

I already approved the PR; my review comments are just stylistic suggestions to go in different directions

The last review is not marked as an approval, and review with many comments makes the status confused.

Anyway, this is just a minor aesthetic issue, merge the change as there seems to be a consensus that it’s a little improvement.

hugovk · 2022-08-28T19:55:40Z

Merged, thanks all!

gvanrossum · 2022-08-30T15:53:29Z

What effect is this supposed to have? On e.g. https://peps.python.org/#index-by-category the zebra stripes are still far from muted.

CAM-Gerlach · 2022-09-01T19:58:39Z

I checked, and can confirm they are now #dddddd in light mode instead of #cccccc before. #eeeeee would be a lot more muted, but there wouldn't be enough contrast for a11y (in fact, they hardly show up at all on many older TN LCD panels). I proposed muting all the way to #eeeeee plus the horizontal rules from #2734 to retain contrast as a compromise between the two approaches, but you said you didn't like that either as it still wasn't muted enough :P

FWIW, I would still favor that approach (minus the hover that you didn't like) as a workable compromise that mutes the zebras much further (as you want), still retains contrast (for a11y) and refines the overall appearance over the status quo.

gvanrossum · 2022-09-01T22:11:08Z

You seem to contradict yourself. Is eeeeee enough for a11y or isn’t it?

CAM-Gerlach · 2022-09-14T02:52:10Z

I thought I replied here, but not seeing it, so replying again. #eeeeee on its own wouldn't be enough contrast for a11y (in fact, I can barely see it myself, specially on cheaper TN LCD panels), which is why we'd add the horizontal rules from #2734 as well.

gvanrossum · 2022-09-14T02:55:37Z

I don't know what #eeeeee looks like, but on peps.python.org, PEP 0 still has way too much contrast in its zebra stripes -- it looks more like the "Before" example than the "After" example from earlier in this issue.

CAM-Gerlach · 2022-09-14T03:38:52Z

See Hugo's comment above for screenshots of how #cccccc, #dddddd and #eeeeee look

Infra: Mute table zebra stripes to de-emphasise different rows
55e2873

hugovk requested a review from AA-Turner as a code owner July 28, 2022 09:57

hugovk mentioned this pull request Jul 28, 2022
Infra: Table lines instead of zebra stripes #2734
Closed

hugovk added the infra Core infrastructure for building and rendering PEPs label Jul 28, 2022

CAM-Gerlach reviewed Jul 29, 2022
View reviewed changes

Infra: change #eee to #ddd
8309772

CAM-Gerlach approved these changes Jul 29, 2022
View reviewed changes

CAM-Gerlach reviewed Aug 3, 2022
View reviewed changes

hugovk mentioned this pull request Aug 5, 2022
Reduce the contrast in the banding of tables #2749
Closed

hugovk merged commit 97e3dbd into python:mainAug 28, 2022

hugovk deleted the infra-muted-zebra-stripes branch August 28, 2022 19:55

CAM-Gerlach mentioned this pull request Sep 28, 2022
Style: Fix zebra stripes and improve table & code presentation #2805
Merged

	--colour-background-accent-light:var(--light,#ddd) var(--dark,#222);
	--colour-background-accent-light:var(--light,#eee) var(--dark,#111);

		border-top: 1px solid var(--colour-background-accent-light);
		border-bottom: 1px solid var(--colour-background-accent-light);

-border-top:1px solid var(--colour-background-accent-light);
-border-bottom:1px solid var(--colour-background-accent-light);
+border-top:1px solid var(--colour-background-accent-strong);
+border-bottom:1px solid var(--colour-background-accent-strong);

-}
+}
+tabletr {
+border-bottom:1px solid var(--colour-rule-strong);
+}
+tabletheadtr {
+background-color:var(--colour-background-accent-strong);
+}

	tabletbodytr:nth-of-type(odd) {
	tabletbodytr:nth-of-type(even) {

Uh oh!

Uh oh!

Conversation

hugovk commented Jul 28, 2022

Before

After

Uh oh!

CAM-Gerlach commented Jul 29, 2022

Uh oh!

CAM-Gerlach left a comment

Choose a reason for hiding this comment

Uh oh!

hugovk commented Jul 29, 2022• edited by CAM-Gerlach Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CAM-Gerlach commented Jul 29, 2022

Uh oh!

CAM-Gerlach left a comment

Choose a reason for hiding this comment

Uh oh!

CAM-Gerlach commented Aug 3, 2022

Uh oh!

gvanrossum commented Aug 3, 2022

Uh oh!

Rosuav commented Aug 3, 2022

Uh oh!

CAM-Gerlach commented Aug 3, 2022

Uh oh!

encukou commented Aug 3, 2022

Uh oh!

CAM-Gerlach left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CAM-GerlachAug 3, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CAM-GerlachAug 3, 2022

Choose a reason for hiding this comment

Uh oh!

CAM-GerlachAug 3, 2022

Choose a reason for hiding this comment

Uh oh!

CAM-GerlachAug 3, 2022

Choose a reason for hiding this comment

Uh oh!

CAM-GerlachAug 3, 2022

Choose a reason for hiding this comment

Uh oh!

gvanrossum commented Aug 3, 2022

Uh oh!

pradyunsg commented Aug 26, 2022

Uh oh!

merwok commented Aug 26, 2022

Uh oh!

CAM-Gerlach commented Aug 27, 2022

Uh oh!

CAM-Gerlach commented Aug 27, 2022

Uh oh!

merwok commented Aug 28, 2022

Uh oh!

hugovk commented Aug 28, 2022

Uh oh!

gvanrossum commented Aug 30, 2022

Uh oh!

CAM-Gerlach commented Sep 1, 2022

Uh oh!

gvanrossum commented Sep 1, 2022

Uh oh!

CAM-Gerlach commented Sep 14, 2022

Uh oh!

gvanrossum commented Sep 14, 2022

Uh oh!

CAM-Gerlach commented Sep 14, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

hugovk commented Jul 29, 2022•
edited by CAM-Gerlach
Loading

CAM-Gerlach left a comment •
edited
Loading

CAM-GerlachAug 3, 2022•
edited
Loading