text-transform: full-size-kana & text-transform: full-width

[jensimmons]

Description

text-transform: full-width transforms all the characters in the text to be “full-width” — to match the width of characters defined in an East Asian script like Chinese, Japanese, or Korean (CJK). It’s especially useful when typesetting vertical text or wanting to provide consistency in sizing when mixing CJK with Latin or other scripts.

text-transform: full-size-kana transforms the size of small Kana characters in Japanese to look like their full-size counterparts — a technique sometimes used to make ruby text more legible at small sizes.

Also having support for declaring more than one text-transform value is important, so that these values can be combined. For example text-transform: uppercase full-width will transform characters in a Latin script to be both all capital letters and the same width as the CJK characters in the font.

Specification

https://www.w3.org/TR/css-text-3/#text-transform-property

Open Issues

This is the only open issue. Should not affect this proposal:
w3c/csswg-drafts#8442

Tests

https://wpt.fyi/results/css/css-text/text-transform?label=master&label=experimental&aligned&q=full-size-kana

https://wpt.fyi/results/css/css-text/text-transform?label=master&label=experimental&aligned&q=fullwidth

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No response

Browser bug reports

No response

Developer discussions

No response

Polls & Surveys

Most polls and surveys we conduct are in English, or are promoted within a North American & European audience. These two values affect CJK typesetting. Let's not continue biasing Latin scripts over others.

Existing Usage

No response

Workarounds

No response

Accessibility Impact

Poorly spaced text can be harder to read and understand.

Privacy Impact

There is no privacy impact.

Other

No response

[foolip]

Can the effect of text-transform: full-size-kana also be achieved using font-variant-east-asian: ruby?

Does anyone have feedback from CJK language users that text-transform: full-width is important?

cc @kojiishi

[stubbornella]

I don't have strong developer signals for this API. @jensimmons do you have anything you can share?

[jensimmons]

From our article about Safari 17.0:

Safari 17.0 adds support for text-transform: full-width and text-transform: full-size-kana.

The full-width value transforms all the characters in your text to be “full-width” — to match the width of characters defined in an East Asian script like Chinese, Japanese, or Korean (CJK). It’s especially useful when typesetting vertical text or wanting to provide consistency in sizing when mixing CJK with Latin or other scripts.

The full-size-kana value transforms the size of small Kana characters in Japanese to look like their full-size counterparts — a technique sometimes used to make ruby text more legible at small sizes.

Safari 17.0 also adds support for declaring more than one text-transform value, so that these values can be combined. For example text-transform: uppercase full-width will transform characters in a Latin script to be both all capital letters and the same width as the CJK characters in the font.

font-variant-east-asian: ruby is quite different. From MDN:

This keyword forces the use of special glyphs for ruby characters. As these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. This keyword corresponds to the OpenType values ruby.

[kojiishi]

Thank you @jensimmons, right, full-width and full-size-kana are for different purposes. Let me clarify our question a bit more.

For full-size-kana, as the Safari article says, they're for the same purposes, they are both "to make ruby text more legible at small sizes." Some font experts we talked to say font-variant-east-asian: ruby is more correct, so it's interoperable. We're interested in what cases text-transform: full-size-kana is more useful than font-variant-east-asian: ruby and how it's used.

For full-width, the use case in the Safari article looks clear, thanks. Do you have any any data or feedback from authors you can share about in what cases they want "consistency in sizing"? The Unicode Standard Chapter 18 says:

These characters are included in the Unicode Standard for compatibility with older standards.

If it's used for making Latin characters in vertical flow upright, we have text-orientation: upright and it's interoperable. Do you have any data or feedback indicating full-size-kana is still important?

[nairnandu]

Thank you for proposing text-transform: full-size-kana & text-transform: full-width for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop 2024. This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year, if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.