Chinese Layout Gap Analysis

W3C Group Draft Note

More details about this document
This version:
https://www.w3.org/TR/2024/DNOTE-clreq-gap-20240919/
Latest published version:
https://www.w3.org/TR/clreq-gap/
Latest editor's draft:
https://www.w3.org/International/clreq/gap-analysis/
History:
https://www.w3.org/standards/history/clreq-gap/
Commit history
Editors:
Fuqiao Xue (W3C)
Richard Ishida (W3C)
Feedback:
GitHub w3c/clreq (pull requests, new issue, open issues)

Abstract

This document describes and prioritises gaps for the support of the Chinese script on the Web and in eBooks. In particular, it is concerned with text layout. It checks that needed features are supported in W3C specifications, such as HTML and CSS and those relating to digital publications. It also checks whether the features have been implemented in browsers and ereaders.

Status of This Document

This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

This document describes and prioritises gaps for the support of the Chinese script on the Web and in eBooks. In particular, it is concerned with text layout. It checks that needed features are supported in W3C specifications, in particular HTML and CSS and those relating to digital publications. It also checks whether the features have been implemented in browsers and ereaders. It is linked to from the language matrix that tracks Web support for many languages.

The editor's draft of this document is being developed in the GitHub repository Chinese Language Enablement (clreq), with contributors from the W3C Internationalization Interest Group. It is published by the Internationalization Working Group. The end target for this document is a Working Group Note.

This document was published by the Internationalization Working Group as a Group Draft Note using the Note track.

Group Draft Notes are not endorsed by W3C nor its Members.

This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

The W3C Patent Policy does not carry any licensing requirements or commitments on this document.

This document is governed by the 03 November 2023 W3C Process Document.

1. Introduction

1.1 Contributors

This document was created by Richard Ishida and Fuqiao Xue.

Other contributors to the repository can be found in the GitHub contributors list.

1.2 About this document

The W3C needs to make sure that the needs of scripts and languages around the world are built in to technologies such as HTML, CSS, SVG, etc. so that Web pages and eBooks can look and behave as people expect around the world.

This page documents difficulties that people encounter when trying to use languages written in the Chinese script on the Web.

Having identified an issue, it investigates the current status with regards to web specifications and implementations by user agents (browsers, e-readers, etc.), and attempts to prioritise the severity of the issue for web users.

A summary of this report and others can be found as part of the Language Matrix.

1.3 Prioritization

This document not only describes gaps, it also attempts to prioritise them in terms of the impact on the local user. The prioritisation is indicated by colour.

Key:

It is important to note that these colours do not indicate to what extent a particular feature is broken. They indicate the impact of a broken or missing feature on the content author or end user.

Basic styling is the level that would be generally accepted as sufficient for most Web pages. Advanced level support would include additional features one might expect to include in ebooks or other advanced typographic formats. There may be features of a script or language that are not supported on the Web, but that are not generally regarded as necessary (usually archaic or obscure features). In this case, the feature can be described here, but the status should be marked as OK.

The decision as to what priority level is assigned to a described gap is down to the experts doing the gap analysis. It may not always be straightforward to decide. If a given section in this document refers to more than one feature that is broken, each with different impacts on Web users, the priority for the section should be the lowest denominator.

A cell can be scored as OK if the feature in question is specified in an appropriate specification, and is supported by user agents. A specification that is in CR or later and has two implementations in 'major' browsers will count. This means that the feature may not be supported in all browsers yet. (At some point in the future we may try to distinguish, visually, whether support is available in a specification but still pending in major browsers or applications.)

2. Text direction

See also General page layout & progression for features such as column layout, page turning direction, etc. that are affected by text direction.

2.1 Writing mode

In what direction does text flow along a line and across a page? (See the Bidirectional text section if the basic direction is right-to-left.) If the script uses vertically oriented text, what are the requirements? What about if you mix vertical text with scripts that are normally only horizontal? Do you need a switch to use different characters in vertical vs. horizontal text? Does the browser support short runs of horizontal text in vertical lines (tate-chu-yoko in Japanese) as expected? Is the orientation of characters and the directional ordering of characters supported as needed?

#367 Unable to make list counters stand upright in vertical text

Languages: zh 1

This issue is applicable to Chinese, Japanese, Korean, and Mongolian.

A common way to orient counters for lists in vertical text is to have an upright number with a dot alongside it.

The expected way to achieve this in HTML would be to use the following CSS: li::marker { text-combine-upright: all; }, however this cannot be used because browsers don't support text-combine-upright.

For more details, see this GitHub issue, which is being used to track this gap.

#250 Table cells don't handle vertical direction properly

Languages: zh 1

This issue is applicable to Chinese, Japanese, Korean, and Mongolian.

If you place the writing-mode property with a value of vertical-rl on an individual table cell, you would expect the text in that cell to be displayed vertically. This doesn't work as expected in all browsers: some don't apply vertical writing mode, or leave the text horizontal but rotate the CJK characters to the left.

For more details, see this GitHub issue, which is being used to track this gap. Please add any discussion there, and not to this issue.

#249 Horizontal-in-vertical (tate-chu-yoko) lacks support, especially for the digits value

Languages: zh 2

This issue is applicable to Chinese, Japanese, Korean, & Mongolian.

In vertically set text, it is normal to display numbers with 2-3 digits and sometimes up 4 (and sometimes other things) horizontally within a one character space. This is particularly common for things such as day and month digits. This is often referred to using the japanese name, tate chu yoko.

Screenshot 2021-11-18 at 14 39 23

The GAP
In writing-modes CSS provides 2 solutions to enable tate chu yoko.

  1. text-combine-upright property with the all value makes everything within the element to which it is attached horizontal. It has to be applied to each location where the presentation needs to be changed.
  2. digits <integer> identifies numbers with a given digit count within the element styled, and presents them horizontally. If the integer is omitted, the default is 2. This is much easier to use, because it can be applied to a paragraph or section, etc. and instances will be found automatically.
The CSS text-combine-upright property works with the all value in Gecko and Blink browsers, but not in Webkit. (Webkit supports the proprietary property -webkit-text-combine:horizontal.)

No major browsers support the digits value, with or without a following digit, which is a shame since it is a better approach to the problem.

(The CSS digits value was supported by Legacy Edge with it's proprietary property name, but single digits were stretched to fit the width of the (vertical) line. The new (Blink-based) Edge no longer supports it.)

Priority:
The unavailability of the digits value is an inconvenience, since more interventions and markup are needed when using the all value. Since the all value can be used with most browsers, this is classed as Advanced, but really it is probably close to Basic.

Tests
Interactive test, text-combine-upright:all will make up to 4 characters run horizontally in vertical text, and not exceed the line width.

Interactive test, text-combine-upright:digits set on a parent element will make up to 2 digits run horizontally in vertical text, without special markup, but not longer numbers

Interactive test, text-combine-upright:digits followed by a number from 2 to 4, set on a parent element, will make up to that number of digits run horizontally in vertical text, without special markup, but not longer ones

Action taken
Browser bug reports: ChromiumWebkitMozilla

Outcomes
Webkit now supports text-combine-upright: all without a prefix. This means that Blink, WebKit, and Gecko browser engines now all support this property-value combination.

Support is still lacking, however, for the more useful digits value.

#248 Upright text orientation not supported

Languages: zh 3

This issue is applicable to Chinese, Japanese, Korean, and Mongolian.

By default, in runs of Latin alphanumeric text the letters are rotated 90º and run down the page. However, in some instances the alphanumerics need to stand upright. For example, this is important for acronyms.

Screenshot 2021-11-19 at 11 04 53

Browsers need to allow content authors to indicate where alphanumerics should be rendered upright.

The GAP
writing-modes The CSS text-orientation property has a value upright which is meant to produce this behaviour, but not all browsers support it.

Priority
Upright-oriented Latin text, especially, is used commonly for acronyms in Chinese, Japanese, Korean, & Mongolian vertical text, so this is a significant gap for general web content.

Tests & results
Interactive test, text-orientation:upright will make Latin characters and digits sit upright in vertical text.

Action taken
Webkit

Outcomes
All major browser engines now support this feature!

#247 Poor level of support for vertical form controls

Languages: zh 1

This issue is applicable to languages that can be vertically set, especially Mongolian, since it has no horizontal setting. (Linked from: ChineseJapaneseMongolian)

In vertically set text, form controls should also be oriented vertically, in order to fit into the flow of the content. The following examples show what you'd expect to see for various types of form in vertically set Chinese.

vertical form controls

For more examples see the following. Note, especially, that the sideways direction differs for Mongolian.

JapaneseChineseMongolian

The same vertical orientation needs to be applied to the display of buttons, progress bars, etc.

The GAP
Unfortunately, this is not supported by all browsers, creating difficulties for use of forms in vertical text (especially traditional Mongolian, where reverting to horizontal is not an option).

css-writing-modes Creates an expectation that forms should be rendered vertically, but doesn't specify details for rendering.

Priority
Handling of vertical text in forms is a major gap.

Tests & results
CJK tests:

Interactive test, When vertically-set CJK text contains a textarea element, the control will also be vertical. A preceding label will appear above the top right corner of the textarea box.

Interactive test, When vertically-set CJK text contains a text input element, the control will be vertical. A preceding label will appear above the box.

Interactive test, When vertically-set CJK text contains a select element, the control will be vertical, and multiple options will extend, vertically-set, towards the left.

Blink, Gecko, and WebKit mostly passes all the above tests except for two small problems:

  1. although the initial select control is vertical, the alternative options box is horizontal, and opens to the right.
  2. the label associated with a textarea control appears above the top left corner of the box, rather than top right.

i18n test suite, Forms: vertical-rl and Forms: vertical-lr
Same results as for the previous tests.

Mongolian tests:

Interactive test, When vertically-set Mongolian text contains a textarea element, the control will also be vertical. A preceding label will appear above the top right corner of the textarea box.

Interactive test, When vertically-set Mongolian text contains a text input element, the control will be vertical. A preceding label will appear above the box.

Interactive test, When vertically-set Mongolian text contains a select element, the control will be vertical, and multiple options will extend, vertically-set, towards the left.

The results of these tests are the same as for the CJK tests, except that the label appears to the correct side of a textarea control (because of the change in text direction).

Button tests:

Interactive test, When vertically-set CJK text contains an HTML button element, the control will also be vertical.

Interactive test, When vertically-set Mongolian text contains an HTML button element, the control will also be vertical.

Blink, Gecko, and WebKit pass the test.

Action taken
BlinkWebkit

Outcomes
Gecko, Blink and WebKit now all support vertical form controls. However, most tests show problems with alignment of the form controls.

Select element controls look suited to the vertical text flow in their default presentation, but when selecting an option the options are displayed horizontally. This is, of course, particularly problematic for Mongolian.

2.2 Bidirectional text

If the general inline direction is right-to-left, are there any issues when handling that? Where the inline direction of text is mixed, is this bidirectional text adequately supported? What about numbers and expressions? Do the Unicode bidi controls and HTML markup provide the support needed? Is isolation of directional runs problematic?

3. Glyph shaping & positioning

3.1 Fonts & font styles

Do the standard fallback fonts used in browsers (eg. serif, sans-serif, cursive, etc.) match expectations? Are special font or OpenType features needed for this script that are not available?

#587 No support for Kai and Fangsong generic font families

Languages: zh 1

This issue is applicable to Chinese.

There are many font styles used in Chinese composition, but Song, Kai, Hei, and Fangsong are the most important ones.

The font-family CSS property should support generic family names for these font styles.

More:

The GAP
generic(kai) and generic(fangsong) are not supported by any major browser engine.

css-fonts-4 describes generic(kai) and generic(fangsong) in CSS.

Priority
The Kai and Fangsong generic font families significantly improves the fallback mechanism of Chinese websites and web applications. If the browsers does not support them, the differences expressed by the font styles won't appear (unless the author use web fonts, which is often too large). This was therefore marked as Basic.

Tests & results
Interactive test, font-family:generic(kai) will apply a Kai font in Chinese
Interactive test, font-family:generic(fangsong) will apply a Fangsong font in Chinese

Action taken
Issue, The Cursive = Chinese Kaiti equivalent Closed.

Browser bug reports: GeckoBlinkWebKit

Outcomes
tbd

#430 [WIP] The glyphs of punctuation marks do not match the requirements for Chinese text layout

Languages: zh 2

This issue applies to Chinese.

The glyphs in some system fonts do not match the requirements for Chinese text layout.

Below are the problematic code points.

  • U+2E3A TWO-EM DASH[⸺]
  • U+2014 EM DASH [—]: it should be vertically centred. It is not vertically centred in Microsoft JhengHei and Microsoft YaHei.
  • U+2026 HORIZONTAL ELLIPSIS: it should be vertically centred. It is not vertically centred in PingFang, Microsoft JhengHei, and Microsoft YaHei.
  • U+2013 EN DASH [–] should be vertically centred. It is not vertically centred in Noto Sans TC/SC, Microsoft JhengHei, and Microsoft YaHei.
  • U+00B7 MIDDLE DOT [·]: it should have the same width or half the width of a Han character. It does not in PingFang, Noto Sans TC/SC, Microsoft JhengHei, and Microsoft YaHei.

The root cause of this problem is that some Chinese and Western punctuations share the same code points. See also requirements in clreq.

Tests & results: Interactive test U+2E3A TWO-EM DASH[⸺] will be vertically centred in Chinese.

It is not vertically centred in PingFang, Microsoft JhengHei, and Microsoft YaHei.

[TODO: To add more tests]

Priority: Given that a workaround is possible (i.e., changing the font), this is prioritised as an advanced issue.

#403 Webfonts are too large

Languages: zh 2

This issue is applicable to Chinese, Japanese, and Korean.

Most simple alphabetic languages are currently well served by existing Web font delivery methods. However, the Chinese, Japanese and Korean (CJK) group of languages is currently unable to use Webfonts due to the very large file sizes. A substantial reduction in file size is needed, without a significant increase in page load times caused by multiple network requests.

Specs:

IFT: this specification defines methods to incrementally transfer fonts from server to client.

Preinstalled Fonts and User-Installed Fonts in css-fonts: issue 5421 Open.

Priority:

Because most operating systems have preinstalled CJK fonts, CJK text can be rendered properly, it's just the fonts cannot be freely selected, so this is prioritised as an advanced issue.

#237 Issues with variation sequence font fallback

Languages: zh 2

Font matching/fallback for variation sequences is not implemented correctly.

3.2 Context-based shaping and positioning

Does the script in question require additional user control features to support alterations to the position or shape of glyphs, for example adjusting the distance between the base text and diacritics, or changing the glyphs used in a systematic way? Do you need to be able to compose/decompose conjuncts, or show characters that are otherwise hidden, etc?

3.3 Cursive text

If this script is cursive (eg. Arabic, N’Ko, Syriac, etc), are there problems or needed features related to the handling of cursive text? Do cursive links break if parts of a word are marked up or styled? Do Unicode joiner and non-joiner characters behave as expected?

3.4 Letterform slopes, weights, & italics

This covers ways of modifying the glyphs, such as for italicisation, bolding, oblique, etc. Do italic fonts lean in the right direction? Is synthesised italicisation problematic? Are there other problems relating to bolding or italicisation - perhaps relating to generalised assumptions of applicability?

3.5 Case & other character transforms

Does your script need special text transforms that are not supported? Does your script convert letters to uppercase, capitalised and lowercase alternatives according to your typographic needs? Do you need to to convert between half-width and full-width presentation forms?

4. Typographic units

4.1 Characters & encoding

Are there any character repertoire issues preventing use of this script on the Web? Do variation selectors need attention? Are there any other encoding-related issues?

4.2 Grapheme/word segmentation & selection

This is about how text is divided into graphemes, words, sentences, etc., and behaviour associated with that. Do Unicode grapheme clusters appropriately segment character units for your script? When you double- or triple-click on the text, is the expected range of characters highlighted? When you move through the text with the cursor, or backspace, etc. do you see the expected behaviour? (Some of the answers to these questions may be picker up in other sections, such as line-breaking, or initial-letter styling.)

5. Punctuation & inline features

5.1 Phrase & section boundaries

Are there specific problems related to punctuation or the interaction of the text with punctuation (for example separation of punctuation from previous text, but allowing no line break between)? Are there issues related to handling of abbreviation, ellipsis, or iteration? Are there problems related to bracketing information or demarcating things such as proper nouns, etc?

5.2 Quotations & citations

Are there any issues when dealing with quotations marks, especially when nested? Should block quotes be indented or handled specially?

#240 q element produces incorrect quotation marks when language changes

Languages: zh 2

This issue is common across all languages that use the q element.

When a Chinese page contains a quotation in another language, the quotation marks used around that quotation (and inside it for embedded quotes) should be the Chinese ones – not those of the language of the quotation.

Currently, if the language of the quotation is declared on the q tag in HTML using the lang attribute, browsers instead set the quotation marks based on the language of the quote.

For example, if English text is quoted in a Chinese sentence surrounded by just <q>, the quotation marks will be correct:

第一 「second 『third』」

However, if lang="en" is added to the q tag, the result becomes:

第一 “second ‘third’”

Here is a test. There are also tests and results in the i18n test suite.

For more details, see this GitHub issue, which is being used to track this gap.

5.3 Emphasis & highlighting

How are emphasis and highlighting achieved? If lines or marks are drawn alongside, over or through the text, do they need to be a special distance from the text itself? Is it important to skip characters when underlining, etc? How do things change for vertically set text?

#550 Emphasis dots should be centre-aligned with the text after the letter spacing is increased

Languages: zh 2

This issue applies to Chinese and Japanese.

Emphasis dots should be centre-aligned with the text after the letter spacing is increased.

Example in Chinese:

emphasis

The GAP
The dots are centre-aligned with the characters in Gecko and WebKit, but not in Blink.

CSS Text Decoration Module Level 4 doesn't refer to this.

Priority
Given that increased inter-character spacing and emphasis dots appearing at the same time is not common, this was prioritised as an advanced issue.

Tests
Interactive test Emphasis dots should be centre-aligned with the text after the letter spacing is increased

Action taken
Blink

Outcomes
tbd

#239 Emphasis mark support not interoperable

Languages: zh 3

This issue is applicable to Japanese & Chinese, in particular.

Chinese and Japanese have a native way of indicating emphasis for short ranges of inline text which involves placing a small mark above or below the characters being emphasised in horizontal text, and to the right/left in vertical text.

The actual marks used vary, depending on author preference, although some marks are more common in vertical text and others in horizontal. Typically, dots, circles, or 'sesame seed' shapes are used.

The following illustrates this:

boten_marks

For more details, see this GitHub issue, which is being used to track this gap.

#238 Punctuation not skipped by default for emphasis marks

Languages: zh 2

Punctuations are not skipped by default for emphasis marks.

5.4 Abbreviation, ellipsis, & repetition

What characters or other methods are used to indicate abbreviation, ellipsis & repetition?

5.5 Inline notes & annotations

The ruby spec currently specifies an initial subset of requirements for fine-tuning the typography of phonetic and semantic annotations of East Asian text, including furigana, pinyin and zhuyin fuhao systems. Is is adequate for what it sets out to do? What other controls will be needed in the future? What about other types of inline annotation, such as warichu? (For referent-type notes such as footnotes, see below.)

#357 In-page search fails on ruby-annotated text

Languages: zh 1

This issue is applicable to all languages that use ruby markup (Chinese, Japanese, Mongolian, Korean).

If text is marked up for ruby, using the interleaved markup approach currently required by the HTML spec, a browser's in-page search no longer recognises the text. For example, if you search for 東京 on a page that has this markup:

<ruby><rb>東<rt>とう<rb>京<rt>きょう</ruby>

the search will fail to locate the word.

Note that a tabular arrangement of markup, such as

<ruby><rb>東<rb>京<rt>とう<rt>きょう</ruby>

would work fine but, although it is parsed correctly, this tabular markup is not displayed correctly by Blink or Webkit currently, and therefore the HTML specification has obsoleted the rb and rtc elements.

For more details, see this GitHub issue, which is being used to track this gap.

#243 Cutting Note not supported

Languages: zh 2

Inline cutting note (warichu in Japanese) is a type of inline notation, where two lines of small characters are inserted into the text, dividing a line into two sub lines. Inline cutting note is usually used in vertical writing mode. It is very infrequently used in horizontal writing mode. (see Inline Cutting Note (Warichu))

The following illustrates a cutting note in Japanese text.

img2_4_1

For more details, see this GitHub issue, which is being used to track this gap. Please add any discussion there, and not to this issue.

The frequency of use of the inline cutting note is not so high in Chinese, so this gap is labelled with an advanced priority.

#242 Difficulties selecting ruby

Languages: zh 2

There are difficulties in selecting ruby text in some browsers.

#241 No bopomofo ruby support

Languages: zh 1

This issue is applicable to Chinese.

Bopomofo, also named Zhuyin, is a transliteration and writing system for Chinese. For example:

「心」字的國語注音符號拼式

More:

The Gap:
Bopomofo ruby is not supported by any browser. This is because it needs additional and bopomofo-specific positioning rules to place the bopomofo letters vertically alongside the base character, and to position the tone marks relative to them, either above or in a second column with particular alignments.

The CSS spec provides an inter-character value for the ruby-position property which is supposed to indicate to the browser that this arrangement should be applied.

There are two font-based ways to implement Bopomofo:

  1. Make special fonts, and combine the Chinese character and the Bopomofo characters into the glyph. Use spans, CSS, and web fonts to toggle fonts. This approach works in all browsers, but it is not very accessible and it is not easy to handle polyphones.
  1. Use HTML ruby/rt, ruby-position: inter-character, and OpenType fonts for all characters in rt (see https://github.com/cmex-30/Bopomofo_on_Web/blob/master/BOPOMOFO%20TYPOGRAPHY.pdf).
No browser supports ruby-position: inter-character at the moment (see test results), so people use ruby { writing-mode: vertical-lr; } to achieve this (see an example), however, that doesn't produce the needed positioning.

Spec status:

Action taken:
BlinkGecko

Outcomes:
tbd

Priority
Since this is important for education, it is prioritised as a basic issue.

5.6 Text decoration & other inline features

This is about ways of marking text (see also specific sections dedicated to quotations and inline notes/annotations). Is it possible to express emphasis or highlight content as expected? Bold, italic and under-/over-lines are not always appropriate, and some scripts have their own unique ways of doing things, that are not in the Western tradition at all. Text delimiters mark certain items or sections off from the main text, such as book names in Chinese, quotations, head markers in Tibetan, etc, and often involve the use of punctuation. Is there any behaviour that isn't well supported, such as overlines for numeric digits in Syriac? Are there issues about the positioning or use of underlines? Some aspects related to the drawing of lines alongside or through text involve local typographic considerations. Do underlines need to be broken in special ways for this script? Do you need support for additional line shapes or widths? Does the distance or position of the lines relative to the text need to vary in ways that are not achievable? Are lines correctly drawn relative to vertical text?

#599 Adjacent items with text decoration should be separated by a small gap

Languages: zh 1

This issue is applicable to Chinese and Japanese.

When two underlined items appear side-by-side, the underline should be broken between the two. For example, although there are no gaps between characters in the code stream, there should be small visible gaps in the underlining of this example, which contains 2 proper nouns ('sòng', and 'ōuyángxiū') and a poem title ('míng fēi qū').

fig_underline_gap

More:

The GAP
None of the major browsers show this gap between text decorations.

css-text-decor-4 The CSS Text specification currently proposes the use of a text-decoration-skip-inset property, although it is not yet finalised and is not supported by any browser. The auto value should automatically produce the slightly shorter line lengths below the characters.

Gecko, Blink, and Webkit

Priority
These text decorations are used commonly in Chinese text, and decorations that run into each other creates readability problems. This gap is therefore being labelled as basic.

Tests & results
Interactive test, text-decoration-skip-inset: auto; will create a gap between words that are side by side and underlined using the u tag.
Interactive test, text-decoration-skip-inset: auto; will create a gap between spans that are side by side and underlined using text-decoration-line:underline.

Action taken
Awaiting finalisation of CSS syntax.

Outcomes
tbd

5.7 Data formats & numbers

If the script has its own set of number digits, are there any issues in how they are used? Does the script or language use special format patterns that are problematic (eg. 12,34,000 in India)? What about date/time formats and selection - and are non-Gregorian calendars needed? Do percent signs and other symbols associated with number work correctly, and do numbers need special decorations, (like in Ethiopic or Syriac)? How about the management of personal names, addresses, etc. in web pages: are there issues?

6. Line and paragraph layout

6.1 Line breaking & hyphenation

Does the browser capture the rules about the way text in your script wraps when it hits the end of a line? Does line-breaking wrap whole 'words' at a time, or characters, or something else (such as syllables in Tibetan and Javanese)? What characters should not appear at the end or start of a line, and what should be done to prevent that?

#245 UAX #14 for line-breaking with quotation marks

Languages: zh 3

In Chinese, is an opening quotation mark, but in some languages (like German) it can be a closing quotation mark. In UAX #14:

LB19 Do not break before or after quotation marks, such as ‘ ” ’.
This is too strict for Chinese, because breaks before should be allowed (it can appear at the line start).

Specs: In the description for QU in UAX #14:

Some quotation characters can be opening or closing, or even both, depending on usage. The default is to treat them as both opening and closing.
[...]
Note: If language information is available, it can be used to determine which character is used as the opening quote and which as the closing quote. See the information in Section 6.2, General Punctuation, in [Unicode]. In such a case, the quotation marks could be tailored to either OP or CL depending on their actual usage.
And css-text also allows the UA to determine the set of line-breaking restrictions to use, so it allows for this kind of tailoring.

Tests & results: Interactive test, In Chinese, breaks before “ are allowed.

  • Gecko:
  • Blink:
  • Webkit:
Bug report: ICU

#244 Browsers handle ideographic space differently during line-breaking

Languages: zh 2

Browsers differ in how they handle line breaks for IDEOGRAPHIC SPACE (U+3000).

6.2 Text alignment & justification

When text in a paragraph needs to have flush lines down both sides, does it follow the rules for your script? Does the script need assistance to conform to a grid pattern? Does your script allow punctuation to hang outside the text box at the start or end of a line? Where adjustments are need to make a line flush, how is that done? Do you shrink/stretch space between words and/or letters? Are word baselines stretched, as in Arabic? What about paragraph indents, or the need for logical alignment keywords, such as start/end, rather than left/right?

6.3 Text spacing

Some scripts create emphasis or other effects by spacing out the words, letters or syllables in a word. Are there requirements for this script/language that are unsupported? (For justification related spacing, see below.)

#401 Lack of support for applying extra spacing between Chinese/Japanese and Western text

Languages: zh 2

This issue applies to Chinese and Japanese.

In Chinese and Japanese composition, it is usually recommended to apply extra spacing between Chinese/Japanese and Western text to increase the recognition of Western text.

Currently, browsers do not support this feature, so content authors have to work around the problem by adding spaces manually.

See also requirements in Chinese and Japanese.

Specs: ‘text-autospace: ideograph-alpha ideograph-numeric’ in the css-text specification can be used to create 1/4em extra spacing between runs of ideographs and non-ideographic letters/numerals.

Tests & results: Interactive test ‘text-autospace: ideograph-alpha ideograph-numeric’ should create 1/4em extra spacing between runs of ideographs and non-ideographic letters/numerals

Gecko, Blink, and Webkit browsers all fail to add the 1/4em extra spacing between runs of ideographs and non-ideographic letters.

Browser bug reports: GeckoBlink 1Blink 2Webkit 1Webkit 2

Priority: Given that a workaround is possible, though not ideal, this is prioritised as an advanced issue.

#319 Browsers apply extraneous spaces when letter-spacing

Languages: zh 2

This issue applies to all languages that use letter-spacing.

Currently browsers that apply letter-spacing do so by adding a space after every letter in the text that is tracked. This results in a superfluous space at the end of the range, which creates an inappropriate gap before the following text. Letter spacing at the end of a line makes the line look misaligned in justified or right-justified text. It also has implications for text that has other styling, such as an outline or a coloured background, at the same time as being stretched.

For more details, see this GitHub issue, which is being used to track this gap. Please add any discussion there, and not to this issue.

6.4 Baselines, line-height, etc

Does the browser support requirements for baseline alignment between mixed scripts and in general?

6.5 Lists, counters, etc.

The CSS Counter Styles specification describes a limited set of simple and complex styles for counters to be used in list numbering, chapter heading numbering, etc.The rules plus more counter styles (totalling around 120 for over 30 scripts) are listed in the document Ready-made Counter Styles. Do these cover your needs? Are the details correct? Are there other aspects related to counters and lists that need to be addressed?

#367 Unable to make list counters stand upright in vertical text

Languages: zh 1

This issue is applicable to Chinese, Japanese, Korean, and Mongolian.

A common way to orient counters for lists in vertical text is to have an upright number with a dot alongside it.

The expected way to achieve this in HTML would be to use the following CSS: li::marker { text-combine-upright: all; }, however this cannot be used because browsers don't support text-combine-upright.

For more details, see this GitHub issue, which is being used to track this gap.

#246 Lack of support for @counter-style — FIXED !

Languages: zh 3

Customisable counters are needed for many languages.

There is no way for users to create local counter styles that are not built in to the browser, and users also often want to tweak the counter style in some way (esp. the prefix/suffix).

FIXED !
This gap is now fixed. For more details, see this GitHub issue, which is being used to track this gap. Please add any discussion there, and not to this issue.

The following are Chinese-specific details.

Tests:

Related browser bugs: ChromiumWebKit

6.6 Styling initials

Does the browser or ereader correctly handle special styling of the initial letter of a line or paragraph, such as for drop caps or similar? How about the size relationship between the large letter and the lines alongide? where does the large letter anchor relative to the lines alongside? is it normal to include initial quote marks in the large letter? is the large letter really a syllable? etc. Are all of these things working as expected?

7. Page & book layout

7.1 General page layout & progression

How are the main text area and ancilliary areas positioned and defined? Are there any special requirements here, such as dimensions in characters for the Japanese kihon hanmen? The book cover for scripts that are read right-to-left scripts is on the right of the spine, rather than the left. Is that provided for? When content can flow vertically and to the left or right, how do you specify the location of objects, text, etc. relative to the flow? For example, keywords 'left' and 'right' are likely to need to be reversed for pages written in English and page written in Arabic. Do tables and grid layouts work as expected? How do columns work in vertical text? Can you mix block of vertical and horizontal text correctly? Does text scroll in the expected direction? Other topics that belong here include any local requirements for things such as printer marks, tables of contents and indexes.

7.2 Grids & tables

Does the script have special requirements for character grids or tables?

7.3 Footnotes, endnotes, etc.

Does your script have special requirements for footnotes, endnotes or other necessary annotations of this kind in the way needed for your culture? (There is a section above for purely inline annotations, such as ruby or warichu. This section is more about annotation systems that separate the reference marks and the content of the notes.)

7.4 Page headers, footers, etc.

Are there special conventions for page numbering, or the way that running headers and the like are handled?

7.5 Forms & user interaction

Are vertical form controls well supported? In right-to-left scripts, is it possible to set the base direction for a form field? Is the scroll bar on the correct side? etc.

#247 Poor level of support for vertical form controls

Languages: zh 1

This issue is applicable to languages that can be vertically set, especially Mongolian, since it has no horizontal setting. (Linked from: ChineseJapaneseMongolian)

In vertically set text, form controls should also be oriented vertically, in order to fit into the flow of the content. The following examples show what you'd expect to see for various types of form in vertically set Chinese.

vertical form controls

For more examples see the following. Note, especially, that the sideways direction differs for Mongolian.

JapaneseChineseMongolian

The same vertical orientation needs to be applied to the display of buttons, progress bars, etc.

The GAP
Unfortunately, this is not supported by all browsers, creating difficulties for use of forms in vertical text (especially traditional Mongolian, where reverting to horizontal is not an option).

css-writing-modes Creates an expectation that forms should be rendered vertically, but doesn't specify details for rendering.

Priority
Handling of vertical text in forms is a major gap.

Tests & results
CJK tests:

Interactive test, When vertically-set CJK text contains a textarea element, the control will also be vertical. A preceding label will appear above the top right corner of the textarea box.

Interactive test, When vertically-set CJK text contains a text input element, the control will be vertical. A preceding label will appear above the box.

Interactive test, When vertically-set CJK text contains a select element, the control will be vertical, and multiple options will extend, vertically-set, towards the left.

Blink, Gecko, and WebKit mostly passes all the above tests except for two small problems:

  1. although the initial select control is vertical, the alternative options box is horizontal, and opens to the right.
  2. the label associated with a textarea control appears above the top left corner of the box, rather than top right.

i18n test suite, Forms: vertical-rl and Forms: vertical-lr
Same results as for the previous tests.

Mongolian tests:

Interactive test, When vertically-set Mongolian text contains a textarea element, the control will also be vertical. A preceding label will appear above the top right corner of the textarea box.

Interactive test, When vertically-set Mongolian text contains a text input element, the control will be vertical. A preceding label will appear above the box.

Interactive test, When vertically-set Mongolian text contains a select element, the control will be vertical, and multiple options will extend, vertically-set, towards the left.

The results of these tests are the same as for the CJK tests, except that the label appears to the correct side of a textarea control (because of the change in text direction).

Button tests:

Interactive test, When vertically-set CJK text contains an HTML button element, the control will also be vertical.

Interactive test, When vertically-set Mongolian text contains an HTML button element, the control will also be vertical.

Blink, Gecko, and WebKit pass the test.

Action taken
BlinkWebkit

Outcomes
Gecko, Blink and WebKit now all support vertical form controls. However, most tests show problems with alignment of the form controls.

Select element controls look suited to the vertical text flow in their default presentation, but when selecting an option the options are displayed horizontally. This is, of course, particularly problematic for Mongolian.

8. Other

8.1 Culture-specific features

Sometimes a script or language does things that are not common outside of its sphere of influence. This is a loose bag of additional items that weren't previously mentioned. This section may also be relevant for observations related to locale formats (such as number, date, currency, format support).

8.2 What else?

There are many other CSS modules which may need review for script-specific requirements, not to mention the SVG, HTML, Speech, MathML and other specifications. What else is likely to cause problems for worldwide deployment of the Web, and what requirements need to be addressed to make the Web function well locally?

Show summary