Rustdoc accessibility: use an icon for the [-]/[+] controls #87663

GuillaumeGomez · 2021-07-31T14:25:55Z

This is a reopening of #87207 with improvement for the way of generating the background-image CSS property.

I quote from the original PR:

This way, we can show the plus and minus buttons on screens, while voice
control will read off actual words "Collapse" and "Expand" instead of reading
"open brace minus close brace" and "open brace plus close brace".

Part of #87059

r? @notriddle

notriddle

Wait, actually, there's one thing that I'd like to try, but I'd like a few other people to check this out on their configuration, to see if they also prefer it this way.

The thing that I don't like about the current version of this is that it makes the icons look blurrier on hidpi screens. I'm not quite sure how to fix that, but I think adding these CSS rules might help:

image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges; /* Firefox before version 65 */
image-rendering: -webkit-optimize-contrast; /* Safari */
-ms-interpolation-mode: nearest-neighbor; /* EdgeHTML Edge and Trident */
image-rendering: pixelated; /* Chrome */

notriddle · 2021-07-31T17:02:18Z

The one on the left is with the image-rendering CSS things, while the one on the right doesn't have them:

Here's a web upload showing it, so that we can test this on as many browsers as we can get. Because the caniuse site has quite a few caveats with getting good pixel art scaling in browsers.

https://notriddle.com/notriddle-rustdoc-test/pixelated-plus-minus/std/index.html

I seem to have a version that works in Chromium and Firefox on Linux, and Mobile Safari on an iPad, but I'm not terribly confident in it. We really want this icon to snap to the pixel grid. Hard. And it's not as easy to get that as I would like.

Urgau · 2021-07-31T17:51:08Z

@notriddle Maybe with them in SVG it will help.

Toggle minus:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" stroke="#000" fill="none"><path d="M4.5 2H2v12h2.5m7-12H14v12h-2.5"/><path d="M4.5 8h7"/></svg>

Toggle plus:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" stroke="#000" fill="none"><path d="M4.5 2H2v12h2.5m7-12H14v12h-2.5"/><path d="M4.5 8h7"/><path d="M8 11.5V8.125h0V4.5"/></svg>

GuillaumeGomez · 2021-08-02T08:55:59Z

@Urgau: Let's try svg! Thanks for the conversion. ;)

GuillaumeGomez · 2021-08-02T21:24:18Z

The SVG you provided is all blurry on my computer, it gets better when I zoom in, but it's not great... I've read around that using number without decimal makes it better, maybe it's worth a try? I tried to "fix" the SVG but it was a complete failure. ^^'

Urgau · 2021-08-02T22:49:58Z

The SVG you provided is all blurry on my computer, it gets better when I zoom in, but it's not great... I've read around that using number without decimal makes it better, maybe it's worth a try? I tried to "fix" the SVG but it was a complete failure. ^^'

My SVGs have a size of 16x16 like the original PNG files, this size is very small and when a software tries to display an image with such a tiny size, it renders it in this original size and then adapts it to the target size (which is much bigger) but some software "forget" that an SVG can be rendered at any size (which avoids any scaling and is the reason for SVGs) and so they render it and adapt it instead of rendering it at the target size, that maybe be why it can appear blurry on your computer.

You can see on this jsfiddle my SVGs in their original sizes but also in 350x350, I don't see any blur, do you ?

Do you want me to increase their default size ? and by curiosity, what software are you using to render the SVGs ?

I never heard that number without decimal makes svg better, but I'm not an expert either.

notriddle · 2021-08-02T23:11:55Z

The SVG you provided is all blurry on my computer, it gets better when I zoom in, but it's not great...

If it gets better when you zoom in, then it's not being caused by the browser rendering it at the original size and scaling. It's caused by the lines not being placed exactly on pixel boundaries.

This is why the original PNG files are not 16x16. They're 17x17. By using an odd number of pixels, you can draw a 1px line in the exact center of the image without aliasing.

GuillaumeGomez · 2021-08-03T08:13:26Z

@Urgau I meant what @notriddle said: the pixel boundaries are not integers but decimals, which is what I think is the issue.

Urgau · 2021-08-03T11:01:33Z

This is why the original PNG files are not 16x16. They're 17x17. By using an odd number of pixels, you can draw a 1px line in the exact center of the image without aliasing.

Heu... I don't know what happen, I'm pretty sure I have enter 17x17 for the size; I don't know what to say, I should have checked, sorry.

@Urgau I meant what @notriddle said: the pixel boundaries are not integers but decimals, which is what I think is the issue.

If that the case I don't know how to resolve that because Inkscape is generating this decimal values.

In any case I have redone and attached the SVGs with their correct size 17x17 (I checked this time). Let me know if it's still not good, maybe I can try something else.

Toggle minus (17x17)

<svg width="17" height="17" stroke="#000" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>

Toggle plus (17x17)

<svg width="17" height="17" stroke="#000" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></svg>

PS: By redoing them I even manage to shrink them down a little more

GuillaumeGomez · 2021-08-03T12:33:30Z

Ah nice, thanks! Let's try with these new images then.

This way, we can show the plus and minus buttons on screens, while voice control will read off actual words "Collapse" and "Expand" instead of reading "open brace minus close brace" and "open brace plus close brace". Part of rust-lang#87059

…f start

GuillaumeGomez · 2021-08-03T12:47:03Z

@Urgau Not blurry anymore, thanks a lot!

@notriddle I think the PR is ready. :)

notriddle · 2021-08-03T13:29:35Z

Can you please publish a built copy of the standard library docs, like I’ve been doing? That way, we can all easily test the results.

GuillaumeGomez · 2021-08-03T13:36:26Z

Sure, here you go: https://guillaume-gomez.fr/rustdoc-test/foo/struct.Foo.html (not std, simply a small crate).

notriddle

Add the attribute shape-rendering="crispEdges" to each of the <svg> elements, and then I'll approve it.

Here's a side-by-side comparison of the SVG, on the left is without crispEdges, and the right is with crispEdges. Both are zoomed in at 133%, so that the line would need to be aliased, and magnified with no interpolation after taking a screenshot.

notriddle · 2021-08-03T16:48:55Z

src/librustdoc/html/static/images/toggle-minus.svg

@@ -0,0 +1 @@
+<svg width="17" height="17" stroke="#000" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>


Suggested change

<svg width="17" height="17" stroke="#000" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>

<svg width="17" height="17" stroke="#000" fill="none" shape-rendering="crispEdges" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>

notriddle · 2021-08-03T16:49:07Z

src/librustdoc/html/static/images/toggle-plus.svg

@@ -0,0 +1 @@
+<svg width="17" height="17" stroke="#000" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></svg>


Suggested change

<svg width="17" height="17" stroke="#000" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></svg>

<svg width="17" height="17" stroke="#000" fill="none" shape-rendering="crispEdges" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7M8.5 12V8.625v0V5"/></svg>

GuillaumeGomez · 2021-08-03T18:03:39Z

That looks better, indeed! Thanks to both of you for the help!

@bors: r=notriddle

bors · 2021-08-03T18:03:40Z

📌 Commit 6fe0972 has been approved by notriddle

…brace, r=notriddle Rustdoc accessibility: use an icon for the [-]/[+] controls This is a reopening of rust-lang#87207 with improvement for the way of generating the `background-image` CSS property. I quote from the original PR: > This way, we can show the plus and minus buttons on screens, while voice > control will read off actual words "Collapse" and "Expand" instead of reading > "open brace minus close brace" and "open brace plus close brace". Part of rust-lang#87059 r? `@notriddle`

Rollup of 8 pull requests Successful merges: - rust-lang#81797 (Add `core::stream::from_iter`) - rust-lang#87267 (Remove space after negative sign in Literal to_string) - rust-lang#87663 (Rustdoc accessibility: use an icon for the [-]/[+] controls) - rust-lang#87720 (don't use .into() to convert types to identical types (clippy::useless_conversion)) - rust-lang#87723 (Use .contains instead of manual reimplementation.) - rust-lang#87729 (Remove the aarch64 `crypto` target_feature) - rust-lang#87731 (Update cargo) - rust-lang#87734 (Test dropping union fields more) Failed merges: r? `@ghost` `@rustbot` modify labels: rollup

GuillaumeGomez added T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue. A-rustdoc-ui Area: Rustdoc UI (generated HTML) labels Jul 31, 2021

notriddle approved these changes Jul 31, 2021

View reviewed changes

notriddle requested changes Jul 31, 2021

View reviewed changes

notriddle added 3 commits August 3, 2021 14:35

Pull the "Expand" / "Collapse" text to the end of the line, instead o…

59460a6

…f start

Use empty string instead of single space

64c9903

GuillaumeGomez force-pushed the rustdoc-brace-minus-brace branch from 948d280 to 5e86d7c Compare August 3, 2021 12:46

GuillaumeGomez force-pushed the rustdoc-brace-minus-brace branch from 5e86d7c to e5ec9c1 Compare August 3, 2021 12:47

notriddle requested changes Aug 3, 2021

View reviewed changes

Simplify usage of CSS background-image

6fe0972

GuillaumeGomez force-pushed the rustdoc-brace-minus-brace branch from e5ec9c1 to 6fe0972 Compare August 3, 2021 18:03

bors added the S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. label Aug 3, 2021

notriddle approved these changes Aug 3, 2021

View reviewed changes

JohnTitor mentioned this pull request Aug 3, 2021

Rollup of 9 pull requests #87741

Closed

JohnTitor mentioned this pull request Aug 3, 2021

Rollup of 8 pull requests #87746

Merged

bors merged commit 75e1487 into rust-lang:master Aug 4, 2021

rustbot added this to the 1.56.0 milestone Aug 4, 2021

GuillaumeGomez deleted the rustdoc-brace-minus-brace branch August 4, 2021 07:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rustdoc accessibility: use an icon for the [-]/[+] controls #87663

Rustdoc accessibility: use an icon for the [-]/[+] controls #87663

GuillaumeGomez commented Jul 31, 2021

notriddle left a comment •

edited

Loading

notriddle commented Jul 31, 2021 •

edited

Loading

Urgau commented Jul 31, 2021

GuillaumeGomez commented Aug 2, 2021

GuillaumeGomez commented Aug 2, 2021

Urgau commented Aug 2, 2021 •

edited

Loading

notriddle commented Aug 2, 2021

GuillaumeGomez commented Aug 3, 2021

Urgau commented Aug 3, 2021

GuillaumeGomez commented Aug 3, 2021

GuillaumeGomez commented Aug 3, 2021

notriddle commented Aug 3, 2021

GuillaumeGomez commented Aug 3, 2021

notriddle left a comment

notriddle Aug 3, 2021

notriddle Aug 3, 2021

GuillaumeGomez commented Aug 3, 2021

bors commented Aug 3, 2021

		@@ -0,0 +1 @@
		<svg width="17" height="17" stroke="#000" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5H2.5v12H5m7-12h2.5v12H12M5 8.5h7"/></svg>

Rustdoc accessibility: use an icon for the [-]/[+] controls #87663

Rustdoc accessibility: use an icon for the [-]/[+] controls #87663

Conversation

GuillaumeGomez commented Jul 31, 2021

notriddle left a comment • edited Loading

Choose a reason for hiding this comment

notriddle commented Jul 31, 2021 • edited Loading

Urgau commented Jul 31, 2021

GuillaumeGomez commented Aug 2, 2021

GuillaumeGomez commented Aug 2, 2021

Urgau commented Aug 2, 2021 • edited Loading

notriddle commented Aug 2, 2021

GuillaumeGomez commented Aug 3, 2021

Urgau commented Aug 3, 2021

GuillaumeGomez commented Aug 3, 2021

GuillaumeGomez commented Aug 3, 2021

notriddle commented Aug 3, 2021

GuillaumeGomez commented Aug 3, 2021

notriddle left a comment

Choose a reason for hiding this comment

notriddle Aug 3, 2021

Choose a reason for hiding this comment

notriddle Aug 3, 2021

Choose a reason for hiding this comment

GuillaumeGomez commented Aug 3, 2021

bors commented Aug 3, 2021

notriddle left a comment •

edited

Loading

notriddle commented Jul 31, 2021 •

edited

Loading

Urgau commented Aug 2, 2021 •

edited

Loading