(re)Introduce the CSS-WG to Warichu

[frivoal]

This is an issue to remind myself to write a lightning talk for the next CSSWG F2F to give an intro to Warichu layout.

[xfq]

Although I don't have the time to write a lightning talk myself, I can provide some relevant information.

For Chinese:

It is common in commentaries on classical books, books about Chinese herbology, scripts (screenplays), reference books, etc.

clreq does not currently have information about warichu, but we plan to add some text, especially regarding modern usage. (Ancient usage is different.)

AFAIK there are two forms, the single-line form (see horizontal example 1 2 and vertical example) and the double-line form. In modern usage, the single-line form is more popular than the double-line form.

The font size of warichu must be smaller than the font size of the body text. Punctuation marks in warichu should treated the same as in the main text, including the line breaking rules.

Warichu can be set solid with the body text or extra spacing can be added, depending on the house rule. Sometimes parentheses can be added at the range start and range end. The parentheses are also subjected to inline punctuation width adjustment. The height of the parentheses for the double-line form is usually equal to the height of the two lines of text, and is usually half-width.

Single-line warichu should be aligned with the bottom of the text when arranged horizontally, and aligned with the right side of the text when arranged vertically. Regardless of whether they are arranged horizontally or vertically, the two lines of double-line warichu should be center-aligned with the main text. That is to say, although the total height of the two-line warichu will be greater than the main text, the protruding parts should be evenly distributed to the two sides. Regardless of whether there is warichu or not, the line gap of the body text should remain consistent (except that the line gap will become smaller where there are double-line warichu).

The line gap between the two lines inside the double-line warichu is usually 0. The two lines in a double-lined warichu should be as close to the same length as possible. When the warichu does not need to span the line break position of the main text, the annotation should be broken into two lines as evenly as possible at a place where it can be broken, and the line breaking rules should be consistent with the line breaking rules of the main text. When two lines are of different lengths, the second line should be shorter than the first.

Depending on where the warichu is inserted and the length of the warichu itself, the annotation may need to span a line break in the main text. The processing at this time is still under discussion in the clreq group. I'll let you know the results of the discussions.

Also, warichu characters are often taller and thinner than the body text (I have no examples at the moment).

---

For Japanese, see JLReq for more information.

[kojiishi]

Very interesting information @xfq, thank you.

From what you wrote, I can find a couple of differences between Chinese and Japanese:

• Japanese also has a pattern to set notes in smaller size with parentheses, but we don't call them "Wari-Chu". The "Wari" means "divide/split", the "Chu" means "note". One line case for Japanese is just "Chu" (note,) without being split.
• The smaller inline note is aligned center in Japanese, both in horizontal and in vertical.

There may be more, but these are my first findings. /cc @Kaleidea @himorin

[xfq]

Japanese also has a pattern to set notes in smaller size with parentheses, but we don't call them "Wari-Chu". The "Wari" means "divide/split", the "Chu" means "note". One line case for Japanese is just "Chu" (note,) without being split.

Indeed. In the clreq group we're discussing a new English term that covers both meanings.

The term "Chu" is so broad that it could theoretically encompass things like 後注, 頭注, 脚注, 傍注, and 行間注, and we would like to avoid that term if possible.

[frivoal]

https://florian.rivoal.net/talks/warichu/
(archived at https://lists.w3.org/Archives/Public/www-archive/2024Feb/0001.html)

[xfq]

https://florian.rivoal.net/talks/warichu/

Thank you, Florian!

---

In the slides:

Also used (more rarely) in Chinese

Any specific data or sources for this? I don't have any data, but I doubt that's true (about the "more rarely" part).

Are the parentheses content or style?

I think the parentheses are style rather than content, and in Chinese they are often omitted.

[frivoal]

Also used (more rarely) in Chinese
Any specific data or sources for this? I don't have any data, but I doubt that's true (about the "more rarely" part).

Wikipedia claims it's more rare (https://en.wikipedia.org/wiki/Warich%C5%AB#Modern_use) but has no source about that. I'll drop that claim.

[css-meeting-bot]

The CSS Working Group just discussed Re-introducing Warichu.

The full IRC log of that discussion

<fantasai> Topic: Re-introducing Warichu
<fantasai> github: https://github.com//issues/9520
<fantasai> slides: https://lists.w3.org/Archives/Public/www-archive/2024Feb/att-0001/Warichu.pdf
<fantasai> florian: These are documented in JLREQ etc, but hasn't been discussed in CSSWG for awhile, so this is a refresher
<fantasai> florian: warichu are similar to what you might do with footnotes/marginalia/parentheticals
<fantasai> florian: typically in Japanese, Chinese
<fantasai> florian: It's an East Asian typography feature
<fantasai> florian: that is not possible to do in CSS today
<fantasai> florian: Is it a new layout mode? is it an addition to existing modes? Either way it's something that can't be done today
<fantasai> [slide 3]
<fantasai> florian: It's this parenthesized-double-line thing. It's an inline wrapped annotation
<fantasai> [slide 4]
<fantasai> florian: SOme regular text, then large opening parentheses, then two rows of text; the line length balances; and finally closing parens
<fantasai> florian: but how does it work? How do you say that you want 2 lines?
<fantasai> bramus: is it always 2?
<fantasai> florian: huge majority is 2
<fantasai> florian: all known implementations can do only 2, but Adobe Illustrator can do more; InDesign only 2
<fantasai> florian: so maybe it can be generalized
<fantasai> florian: How do you get the right length of lines?
<fantasai> florian: max-content/2 is not necessarily right, depends on line-breaking
<fantasai> florian: so max-content/2 + extra until the next line-break
<fantasai> florian: Are the parentheses part of the content or part of the style?
<fantasai> florian: a fallback for this would be a regular parenthetical, so maybe they're part of the content
<fantasai> florian: but an alternative layout would be footnotes, which don't have parentheses
<fantasai> florian: in Adobe you put the parenthesis. In MSWord parens are part of the style layer
<fantasai> florian: How are they placed? Are they part of the regular line but bigger, or part of the warichu itself.
<fantasai> florian: how do you get them to be the right size? It's different from MathML stretchy brackets, because they're regular parens just bigger
<fantasai> florian: What happens if the warichu contains something taller than small text?
<fantasai> florian: Maybe this is all one combined feature
<emeyer> Also seems similar to columns: 2 in RTL direction
<fantasai> florian: maybe we have some basic parts
<fantasai> florian: that could be used ofr something else
<fantasai> florian: Things you need to fuss with include line-height for solid setting, adjustments to vertical-align, trim the parens so they don't take up extra space, etc.
<fantasai> [slide 6]
<fantasai> florian: The first 6 characters fit in the first line (as 2 lines of 3 chars), and then you continue on the subsequent lines like that
<fantasai> (so that you don't read out of order)
<fantasai> florian: so now some fragmentation questions as well
<fantasai> florian: This isn't new, been in use for centuries, works in InDesign, Illustrator, MS Word, LibreOffice/OpenOffice, TeX/LaTeX, more
<fantasai> florian: This is not the most frequent feature of East Asian typography, but it exists and isn't disappearing
<fantasai> florian: i18nWG says the frequency isn't often, but some types of content it's used heavily
<fantasai> florian: it's a high-density annotation feature, that isn't possible on the Web
<fantasai> florian: If we think of it as an inline block, ability to fragment inline blocks across boundaries is kind useful
<fantasai> florian: ability to fit exactly N lines and no more seems useful
<fantasai> florian: but some hard questions also
<fantasai> florian: doesn't seem we're super far off
<fantasai> florian: I wanted to bring it up so that as we solve other problems, we can see if we get close enough to solve it with a bit more
<astearns> ack dbaron
<chrishtr> q+
<fantasai> dbaron: Examples, it looks like inline multi-col: what it does seems similar to page-breaking a multi-col, but in an inline setting, and you're doing the columns in the other direction
<fantasai> florian: It's adjacent to a lot of the fragmentation things we've been doing
<fantasai> florian: how exactly you slice it is novel, but what you do inside the pieces is fairly ordinary
<fantasai> florian: so it's the sizing and slicing of the container that's weird
<fantasai> fantasai: and the parenthesis
<astearns> q+
<oriol> q+
<fantasai> florian: manually adding the parens and size it large could work, but kinda fiddly, so would be better to automatically size them properly
<fantasai> florian: what kind of markup would you have for the content and for the parenthesis
<fantasai> bramus: maybe a dedicated HTML feature?
<fantasai> bramus: like ruby
<fantasai> fantasai: ruby is describable in CSS
<astearns> ack chrishtr
<fantasai> chrishtr: How is this related to ruby?
<fantasai> florian: other than same countries, not
<fantasai> chrishtr: How common?
<fantasai> florian: Every single Japanese person uses ruby extensively for ~ 10 years of their life (in school) and occasionally afterwards
<fantasai> florian: this is not that common, it's used in e.g. dictionaries and encyclopedias
<fantasai> florian: product specification catalog
<fantasai> florian: other things that need to be dense
<dholbert> q+
<fantasai> florian: in ordinary text it's not so common
<fantasai> florian: There was a theory that maybe the desire for it would go away, but i18nWG says people continue to ask for it
<fantasai> chrishtr: what do people do on the Web?
<fantasai> florian: I suspect they do regular parentheticals and are disappointed it takes lots of room? or maybe you could use JS...
<fantasai> florian: I don't really know
<fantasai> iank_: It's a much easier problem if you know you're working in CJK text, rather than all of inline layout
<fantasai> florian: if you're asking "what happens if in the middle of the second line there's a float", we'd need an answer, but there's no use case for it os it doesn't really matter what you do in that case
<fantasai> astearns: Are the sizes of the content and parentheses ever encoded in the font, are they warichu glyphs?
<astearns> ack astearns
<fantasai> florian: I don't think it's embedded in any font. Software today has a yes/no checkbox to do it
<fantasai> florian: then you pick the font size to make that parenthetical smaller or bigger
<astearns> ack oriol
<fantasai> florian: and then a drop-down for what kind of parentheses
<fantasai> oriol: You said one idea was inline-blocks, but they are atomic and start an independent formatting context
<fantasai> oriol: I would probably not use inline block
<fantasai> oriol: seems closer to ruby
<fantasai> oriol: participates in the parent inline context, needs to line break etc.
<astearns> https://usercontent.irccloud-cdn.com/file/k8Zc3Fck/image.png
<fantasai> +1
<astearns> (Illustrator settings)
<fantasai> florian: fact that it's atomic, yeah, would need to fragment, but whether it participates in the parent formatting context less sure
<fantasai> iank_: could also have an element that only allows text children
<fantasai> florian: wrt number of lines and sizing, I suspect only allowing 2 is much easier than N
<astearns> Illustrator allows 2-5 lines, no idea why just those
<astearns> ack dholbert
<fantasai> dholbert: any scenarios where this might apply recursively?
<fantasai> florian: Short answer: I don't think so
<fantasai> florian: Long answer: This tends to be used in bible annotations, and religious text tends to have annotations on annotations on annotations, so maybe?
<fantasai> dholbert: seems confusing for the reader, but straightforward to define
<fantasai> florian: I've never seen it before
<fantasai> astearns: You're not asking to work on it now, right? Just to keep in mind if we work on something adjacent.
<fantasai> florian: yes

[xfq]

dholbert: any scenarios where this might apply recursively?

FYI, there are real examples of warichū embedded inside a warichū, like this image (the four characters below the red box on the left).

[tabatkins]

@xfq that image isn't publicly available

[xfq]

@xfq that image isn't publicly available

Sorry, I've updated the URL.