[csswg-drafts] [css-ruby] visibility:collapse on ruby annotations (#5927)

frivoal has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-ruby] visibility:collapse on ruby annotations ==
TL;DR: `visibility:collapse` could serve a very useful role in ruby.

Ruby, in its standard use as a pronounciation aid, is at its core an accessibilty tool: it enables readers with different levels of proficiency to read the same text. But while ruby on characters that someone doesn't know how to read is very helpful, more ruby isn't always better, otherwise, all Japanese texts would be full of ruby, and they're not. To readers who already know the reading of the annotated character, ruby can be distracting. In learning situations, it can also be desirable to hide the annotations over the characters that you're supposed to know to make sure you actually practice reading them. For some people with dislexia, ruby can even make text harder to read.

In printed materials, you get what the author prepared for you, and that's that. But in digital formats, being able to customize how much ruby you see is highly desirable. Marking up a piece of text with full ruby annotations, and then providing controls to hide away some of it depending on the wants and abilities of the reader is a very friendly thing to do.

But what is the best way to achieve that?

Let's say we have this markup, where all kanji are annotated, and the middle one which is taught in first grade, is annotated as "easy":
```html
<ruby><rb>昆<rb>虫<rb>記<rt>こん<rt class=easy>ちゅう<rt>き</ruby>
```

Default styling shows the fully annotated text (colors added in to help non readers of Japanese to track the various parts):

<img width="123" alt="Screen Shot 2021-02-05 at 14 29 14" src="https://user-images.githubusercontent.com/113268/106993875-04b02800-67bf-11eb-8e59-cd15d39a2ea6.png">

But how should you go about hiding the annotation on the easy one?

* `rt.easy { display: none; }`  doesn't work, as it messes up the pairing
    <img width="108" alt="Screen Shot 2021-02-05 at 14 29 23" src="https://user-images.githubusercontent.com/113268/106993909-1bef1580-67bf-11eb-898b-56976173c588.png">

* `rt.easy { visibility: hidden; }` will sort of work, but unecessary spacing is added around the second character to make room for it's (invisible) annotation. That's not only ugly, it can also impair readability, as adding spaces in the middle of words for no app arent reason can conf use people into thin king they're looking at separ ate words. (See what I did there?)
   <img width="123" alt="Screen Shot 2021-02-05 at 14 29 36" src="https://user-images.githubusercontent.com/113268/106993939-290c0480-67bf-11eb-8c1d-2c70f1e9593b.png">

* `rt.easy { visibility: hidden; font-size: 1px; border:none; margin:0; padding:0;}` or something like that would likely work, but it's clearly a cumbersome hack.
    <img width="110" alt="Screen Shot 2021-02-05 at 14 29 53" src="https://user-images.githubusercontent.com/113268/106993993-42ad4c00-67bf-11eb-87b3-82d729f9909a.png">


There's currently no reliable and clean way to do it, but we could very easily add one through existing syntax that's pretty much made for this: `rt.easy { visibility: collapse; }`

A rather simple way to specify it would be that an annotation with `visibility: collapse` does generate a ruby annotation box (so unlike `display:none` it won't mess up the pairing`), but for layout and painting purposes, that box is rendered the same as [auto-hidden annotations](https://drafts.csswg.org/css-ruby-1/#autohide) (thus providing an explicit way to get the same effect).



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5927 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 5 February 2021 05:36:03 UTC