Japanese Gap Analysis

W3C Group Draft Note

More details about this document
This version:
https://www.w3.org/TR/2024/DNOTE-jpan-gap-20241129/
Latest published version:
https://www.w3.org/TR/jpan-gap/
Latest editor's draft:
https://w3c.github.io/jlreq/gap-analysis/
History:
https://www.w3.org/standards/history/jpan-gap/
Commit history
Editor:
(W3C)
Feedback:
GitHub w3c/jlreq (pull requests, new issue, open issues)

Abstract

This document describes and prioritises gaps for the support of Japanese 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 Japanese 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 Japanese Language Enablement (jlreq), 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.

See also the GitHub contributors list for the Japanese Language Enablement project, and the discussions related to the Japanese script.

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 Japanese 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.

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? (If the basic direction is right-to-left see 2.2 Bidirectional text.) 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?

#180 Exceptional positioning of ideographic comma and katakana middle dot in vertical text

Languages: ja 2

It should be possible to decrease the size around the ideographic comma (1/2em) and katakana middle dot (1/4em) in numerical values in vertical text. See Exceptional Positioning of Ideographic Comma and Katakana Middle Dot.

img2_11

There is a related discussion about how to achieve this.

Tests & results: interactive test

#171 Table cells don't handle vertical direction properly

Languages: ja 2

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

If you place the writing-mode property with a value of vertical-rl/lr on an individual table cell in a table that overall has a horizontal direction, you would expect the text in that cell to be displayed vertically, but in some browsers it isn't, unless the height of the td element is specified.

This appears to be because the text is wrapped character-by-character (cf. Mongolian, where words are wrapped rather than characters).

Tests & results:

Interactive test, Adding writing-mode:vertical-rl to a td element produces vertical text, with lines stacking RTL. Interactive test, Adding writing-mode:vertical-lr to a td element produces vertical text, with lines stacking LTR.

This works as expected in Gecko and Blink browsers, as well as in legacy Edge and Internet Explorer. However, Webkit browsers, leave the text horizontal but rotate the Japanese characters to the left.

Interactive test, Adding writing-mode to a span inside a td produces the expected directionality
Wrapping the text to be made vertical in a span inside the cell, and applying writing-mode:vertical-rl to that gives the expected result in Blink, but in Safari it's necessary to also apply a height setting for the text to display properly.

Browser bug reports: BlinkWebkit

Priority: Correct behaviour here is a pretty basic expectation for handling directionality in tables, but since it only occurs when the direction of the td element is different from that of the overall table, this can probably be marked as advanced.

Updates: June 2021: This gap was fixed for Blink.

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

Languages: ja 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. The number may be within parentheses, be circled, have a dot alongside it, etc.

vertical-lists

This is very common in printed material, but is not well supported in web pages.

The GAP
css-pseudo The ::marker pseudo-element represents the automatically generated marker box of a list item, and can be styled.

The expected way to achieve this in HTML would be to use the following CSS:

li::marker { text-combine-upright: all; }

However not all browsers support text-combine-upright.

A workaround might be to use fullwidth characters for counters, such as ①, ②, ③ or ⒈, ⒉, ⒊ etc., but use of such a workaround requires the availability of custom built counter styles, and not all browsers support the CSS Counter Styles specification. So that doesn't work either.

Priority
It is a significant nuisance for content authoring to not be able to produce upright counters for lists. This is a very common approach to numbering lists in vertical text, and should be possible on the Web.

Tests
Interactive test, It is possible to make list counters upright in vertical text using li::marker { text-combine-upright: all; }.

Interactive test, It is possible to set list markers as upright circled numbers / dotted numbers in vertical text using an @counter-style definition

Action taken
Browser bug reports: ChromiumWebkitWebkitMozilla

Specifically about centring: Chromium

Outcomes
Gecko, Blink, and WebKit based browsers now all support custom-defined counter styles, making it possible to use always-upright characters such as circled digits.

Blink and Gecko engines now support the CSS needed to correctly orient the counters at the top of vertical lines. WebKit is still holding out. This can be coupled with other styling to produce the expected result for standard digit or alpha counters.

A common counter style is a digit with a parenthesis above and below. Although text-combine-upright can be used with ::marker to make digits upright, only the 'all' value works at the moment. To support this type of counter it is necessary to support the 'digits' value, which none of the browsers currently do.

#169 Tate-chu-yoko lacks support for digits value

Languages: ja 2

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

The CSS text-combine-upright property works with the all value in all major browsers. However, the CSS digits value is not supported by recent version of major browser engines.

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

#168 Upright text orientation not supported

Languages: ja 3

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

The CSS text-orientation property is only supported as standard by Gecko and Blink browsers.

Fixed !
This gap is now fixed. For details, see this GitHub issue.

#167 Poor level of support for vertical form controls

Languages: ja 1

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

Handling of vertical text in forms is a major gap. Only the Firefox desktop browser does a good job of this. Other browsers fail resoundingly in terms of orienting form controls vertically and displaying text vertically inside them.

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

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

How are fonts grouped into recognisable writing styles? How is each writing style used? Do the standard fallback fonts used in browsers (eg. serif, sans-serif, cursive, etc.) match expectations? Or are additional generic font styles needed? Are special font or OpenType features needed for this script that are not available? What other general, font-related issues arise? The font styles described here refer to alternative types of writing style, such as naskh vs nastaliq; for oblique, italic, and weights see instead 3.3 Letterform slopes, weights, & italics.

3.2 Context-based shaping and positioning

If context-sensitive rendering support is needed to shape combinations of letters or position certain glyphs relative to others, is this adequately provided for? 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 ligatures, or show characters that are otherwise hidden, etc? If text is cursive, see the separate section 3.4 Cursive text.

#182 Positioning of opening brackets at line head

Languages: ja 1

When starting a new line with opening brackets after forced line break, several options exist for amount of spacing before the opening brackets, as in JLReq section 3.1.5:

image

This is proposed in css-text-4 as text-spacing, not implemented yet in browsers.

(tests are proposed in i18n-tests as PR).

#181 Positioning of consecutive opening brackets, closing brackets, commas, full stops and middle dots

Languages: ja 1

In Japanese text, spacing between consecutive punctuation are partly omitted as described in JLReq section 3.1.4, as follows: image

This is implemented in css-text Level 4 text-spacing, not yet implemented in browsers.

(tests are proposed to i18n-tests, not yet reviewed by i18n WG nor merged)

3.3 Letterform slopes, weights, & italics

This covers ways of modifying the glyphs for a range of text, such as for italicisation, bolding, oblique, etc. Are italicisation, bolding, oblique, etc relevant? Do italic fonts lean in the right direction? Is synthesised italicisation or oblique problematic? Are there other problems relating to bolding or italicisation - perhaps relating to generalised assumptions of applicability? For alternative writing/font styles, see 3.1 Fonts & font styles.

3.4 Cursive text

If this script is cursive (ie. letters are generally joined up, like in 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.5 Case & other character transforms

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

#172 Japanese full-width transforms don't work

Languages: ja 1

Latin text and numbers embedded in Japanese text are typically proportionally-spaced, but in some cases it is best to display them as full-width characters, especially for acronyms in vertically set text. For example, if the text "国际化活动W3C万维网联盟" is displayed vertically, the 'W3C' should be full-width, upright characters rather than proportionally-spaced text running down the line.

Screenshot 2021-08-11 at 15 40 39

It's useful to be able to achieve this via styling, similar to the case conversion transforms used for Latin text.

Specs: CSS Text provides text-transform: full-width to transform text in this way.

Tests & results: Simple test, standard syntaxproprietary syntax

More tests: a-z, A-Z, punctuation, katakana, punctuation, symbols

Gecko supports this. Blink and Webkit do not.

Browser bug reports: ChromiumWebkit

Priority: The priority was set to basic by the initial reporter. This is certainly a very useful thing to have to hand when working with vertical text, in particular.

4. Typographic units

4.1 Characters & encoding

Most languages are now supported by Unicode, but there are still occasional issues. In particular, there may be issues related to ordering of characters, or competing encodings (as in Myanmar), or standardisation of variation selectors or the encoding model (as in Mongolian). 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. Are there special requirements for the following operations: forwards/backwards deletion, cursor movement & selection, character counts, searching & matching, text insertion, line-breaking, justification, case conversions, sorting? Are words separated by spaces, or other characters? Are there special requirements when double-clicking or triple-clicking on the text? Are words hyphenated? (Some of the answers to these questions may be picked up in other sections, such as 6.1 Line breaking & hyphenation, or 6.6 Styling initials.)

5. Punctuation & inline features

5.1 Phrase & section boundaries

What characters are used to indicate the boundaries of phrases, sentences, and sections? What about other punctuation, such as dashes, connectors, separators, etc? Are there specific problems related to punctuation or the interaction of the text with punctuation (for example, punctuation that is separated from preceding text but must not be wrapped alone to the next line)? Are there problems related to bracketing information or demarcating things such as proper nouns, etc? Some of these topics have their own sections; see also 5.2 Quotations & citations, and 5.4 Abbreviation, ellipsis & repetition.

5.2 Quotations & citations

This is a subtopic of phrase & section boundaries that is worth handling separately. What characters are used to indicate quotations? Do quotations within quotations use different characters? What characters are used to indicate dialogue? Are the same mechanisms used to cite words, or for scare quotes, etc? What about citing book or article names? Are there any issues when dealing with quotations marks, especially when nested? Should block quotes be indented or handled specially? Do quotation marks take text direction into account appropriately?

#174 q element produces incorrect quotation marks when language changes

Languages: ja 2

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

When a Japanese page contains a quotation in another language, the quotation marks used around that quotation (and inside it for embedded quotes) should be the Japanese 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 Japanese sentence surrounded by just <q>, the quotation marks will be correct:

いち 「two 『three』」

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

いち “two ‘three’”

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?

#338 Additional aspects of handling boten marks

Languages: ja 2

This issue is applicable to Japanese & Chinese in particular.

Issue jlreq/173 looks at basic support for boten (emphasis) marks and their positioning. This gap report describes some additional aspects of boten handling that need further investigation.

Additional requirements arose while the text was being written for CSS. They relate to text that is annotated with ruby at the same time as annotation marks. The conclusions were:

  1. Emphasis marks go outside ruby, as shown by the emphasis dot above the ruby annotations in this example:
    Screenshot 2023-05-30 at 13 10 57
  2. If ruby only spans part of the emphasised word, emphasis marks stay as close as possible to the base, as shown in the emphasis dots on either side of the ruby text.
  3. Where a ruby annotation is hidden or empty, the emphasis marks should continue at the same height, as in the following example where the ruby element spans the whole word but no annotation is provided for the second character.
    Screenshot 2023-05-31 at 13 28 30

There are currently no requirements in jlreq for positioning boten marks with ruby.

[For further research] JLReq also requires that emphasis marks not appear over commas, full stops and brackets.

JLReq calls out the usual practise of using sesame shaped boten for vertical text, and bullets for horizontal. Controls for this exist in CSS, and tests show that it is supported by the browsers that support boten.

The default side for boten is to the right of vertical lines and above horizontal lines, according to JLReq. CSS controls allow this positioning to be set by the author, and in fact it is the default in both browsers that support boten for text where a lang tag identifies it as Japanese.

The Gap:
Gecko moves the boten marks alongside the ruby annotation, keeping the latter closest to the base. In Blink, and Webkit, the boten marks disappear when they occur over the same base as ruby annotations.

All browser engines keep the boten marks close to the base text where ruby annotations don't appear.

Tests & results:
Interactive test, Emphasis marks go outside ruby

Spec status:
3.4. Emphasis Mark Position: the text-emphasis-position property Indicates that the default expectation is for boten marks to appear outside the ruby, but also mentions how to hide the marks if that is your preference, or hide the ruby.

Action taken:
TBD: GeckoBlinkWebkit

Outcomes
TBC

Priority:
If the emphasis marks don't spill over to the text alongside the ruby annotations there is no indication that the text is emphasized, which is clearly a problem.

5.4 Abbreviation, ellipsis & repetition

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

5.5 Inline notes & annotations

What mechanisms, if any, are used to create *inline* notes and annotations? Are the appropriate methods for inline annotations supported for this script? 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? This section deals with inline annotation approaches. For annotation methods where a marker in the text points out to another part of the document see 7.3 Footnotes, endnotes, etc..

#318 Warichu cutting note not supported

Languages: ja 2

This issue is applicable to Japanese and Chinese.

Warichu (inline cutting note) is a type of inline notation, where two lines of small characters are inserted into the text. Warichu divides 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))

img2_4_1

More:

The GAP
CSS doesn't yet propose a way of achieving warichu. Nor is it supported by browsers.

Priority
The frequency of use of the inline cutting note is not so high. However, the inline cutting note is very important for study guides, travel guides, reference books, encyclopedias and manuals, because it is very effective for inserting notes at the point in the text where they are needed. For these reasons, the priority assigned here is advanced.

Tests
tbd

Action taken
tbd

Outcomes
tbd

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

Languages: ja 1

This issue is applicable to all languages that use ruby markup.

Inline annotations (often referred to as ruby) are commonly used for Japanese, Chinese, Korean, and Mongolian texts to provide information about pronunciation and sometimes meaning. (See What is Ruby?) Users searching for a phrase within a web page should be able to find phrases that correspond to both base text and annotations.

The GAP
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 東京 (Tokyo) 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 currently not displayed correctly by Blink or Webkit, and therefore the HTML specification has obsoleted the rb and rtc elements.

The HTML specification currently blocks the workaround (which is to use tabular markup), but a solution needs to also be found for the interleaved markup.

Blink and Webkit browsers all fail to recognise strings when they have ruby text. Gecko appears to recognise the search string in the ruby element, but doesn't display the highlight correctly (see https://github.com/w3c/jlreq/issues/255#issuecomment-1278066359). (If you copy the text, you also get the ruby text, but not the one at the end of the ruby element.)

Gecko, Blink, and Webkit browsers all recognise strings when they have ruby text arranged in tabular format, however support for that arrangement was removed from the HTML spec because currently only Gecko and Amazon have browsers that display the markup correctly.

Priority
This is an obstacle to basic interaction with web pages, especially while the HTML spec blocks the use of tabular markup.

Tests
Interactive test, In page search will find text that has ruby annotations in interleaved markup

Interactive test, In page search will find text that has ruby annotations in tabular markup

Action taken
Browser bug reports: GeckoBlinkWebkit

Work is in preparation in the W3C HTML Working Group to spec out the full ruby model in a way that can be incorporated into the WhatWG spec in future.

Outcomes
tbd

#177 Ruby alignment and other styling unavailable

Languages: ja 2

For background information read Aligning annotations and bases.

Fine control in HTML over the placement of ruby annotations relative to the base require the availability of the CSS property ruby-align. This only works in Firefox, and sometimes in Edge with proprietary syntax. It doesn't work for Chrome or Safari. See results for major browsers.

The impact of this is probably more important for advanced typographic layout.

#176 Double-sided ruby not displayed correctly

Languages: ja 2

In order to get double-sided ruby to appear on either side of the base text in HTML, you need the CSS ruby-position property to work with the value under. It currently works per the standard with Gecko and Blink, but doesn't work with Webkit (or EdgeHTML). It does work in Webkit with the proprietary -webkit prefix and value after in Webkit (but doesn't work with EdgeHTML).

See test results for standard syntax and proprietary syntax.

Try interactive tests.

Double-sided ruby doesn't appear often in Japanese text, but it is used, and should be available to content authors.

Related browser bugs: Chromium Webkit Webkit

#175 Tabular markup not supported for ruby

Languages: ja 1

This issue is applicable to all languages using ruby annotations. (See: jlreq)

The basic pattern of 'tabular' markup is ruby-base ruby-base ... ruby-text ruby-text .... An advantage to this approach is that it enables you to style the ruby text to appear inline in such a way that all the ruby text for a word follows that word together. Inline styling can be useful in space-constrained situations, where it would be too difficult to read small ruby characters. Read more.

This also makes certain applications of double-sided ruby impossible when the ruby on each side of the base spans a different set of base characters.

When text is marked up in mono-ruby way, searching will not work well. If you have the following markup

<p><ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby></p>

and search for the base text "漢字" in a browser, you will not get a result. Tabular markup could solve this problem. (See https://github.com/w3c/i18n-issues/issues/2 for a similar report raised by Japanese & Chinese users.)

Specs: issue 1771 rb and rtc element should be removed from the list of obsolete features Open.
html has actually removed markup for rb and rtc elements, which would be needed to make this work. The parser, however, supports the use of the markup still.
css-ruby-1 Describes how the tabular approach will work for CSS.

Tests & results: i18n test suite, HTML5, the ruby element and its children
Gecko supports display of ruby using the tabular model. Blink, and Webkit do not correctly support display. However, all browsers recognise the rb and rtc elements, and allow them to be styled or manipulated using scripting.

Kindle's ePub implementation also implements the tabular model, although not rtc.

Browser bug reports: GeckoBlinkWebkit

Priority: The limitations created by the lack of the tabular model are all basic in nature. None more so that the impairment for searching, since browsers have not been incentivised to fix that in any other way. The obsoletion of the rb and rtc elements by the HTML spec runs the risk that browser engines are not implementing the tabular model.

5.6 Text decoration & other inline features

This section is a catch-all for inline features that don't fit under the previous sections. It can also be used to describe in one place a set of general requirements related to inline features when those features appear in more than one of the sections above. It covers characters or methods (eg. text decoration) that are used to convey information about a range of text. Are all needed forms of highlighting or marking of text available, such as wavy underlining, numeric overbars, etc. If lines 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? Are there other punctuation marks that were not covered in preceding sections? Are lines correctly drawn relative to vertical text?

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

Languages: ja 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 Chinese example, which contains 2 proper nouns ('sòng', and 'ōuyángxiū') and a poem title ('míng fēi qū').

fig_underline_gap

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

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

Languages: ja 2

This issue is applicable to Chinese and Japanese.

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

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

#338 Additional aspects of handling boten marks

Languages: ja 2

This issue is applicable to Japanese & Chinese in particular.

Issue jlreq/173 looks at basic support for boten (emphasis) marks and their positioning. This gap report describes some additional aspects of boten handling that need further investigation.

Additional requirements arose while the text was being written for CSS. They relate to text that is annotated with ruby at the same time as annotation marks. The conclusions were:

  1. Emphasis marks go outside ruby, as shown by the emphasis dot above the ruby annotations in this example:
    Screenshot 2023-05-30 at 13 10 57
  2. If ruby only spans part of the emphasised word, emphasis marks stay as close as possible to the base, as shown in the emphasis dots on either side of the ruby text.
  3. Where a ruby annotation is hidden or empty, the emphasis marks should continue at the same height, as in the following example where the ruby element spans the whole word but no annotation is provided for the second character.
    Screenshot 2023-05-31 at 13 28 30

There are currently no requirements in jlreq for positioning boten marks with ruby.

[For further research] JLReq also requires that emphasis marks not appear over commas, full stops and brackets.

JLReq calls out the usual practise of using sesame shaped boten for vertical text, and bullets for horizontal. Controls for this exist in CSS, and tests show that it is supported by the browsers that support boten.

The default side for boten is to the right of vertical lines and above horizontal lines, according to JLReq. CSS controls allow this positioning to be set by the author, and in fact it is the default in both browsers that support boten for text where a lang tag identifies it as Japanese.

The Gap:
Gecko moves the boten marks alongside the ruby annotation, keeping the latter closest to the base. In Blink, and Webkit, the boten marks disappear when they occur over the same base as ruby annotations.

All browser engines keep the boten marks close to the base text where ruby annotations don't appear.

Tests & results:
Interactive test, Emphasis marks go outside ruby

Spec status:
3.4. Emphasis Mark Position: the text-emphasis-position property Indicates that the default expectation is for boten marks to appear outside the ruby, but also mentions how to hide the marks if that is your preference, or hide the ruby.

Action taken:
TBD: GeckoBlinkWebkit

Outcomes
TBC

Priority:
If the emphasis marks don't spill over to the text alongside the ruby annotations there is no indication that the text is emphasized, which is clearly a problem.

#173 Boten marks lack wide support

Languages: ja 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: Slide0210-3107917968

More:

css-text-decor CSS has several properties for displaying emphasis marks, and colouring them, positioning them, etc.

The GAP
The tests below check for support of the most common shapes, and that the positioning can be managed. When this gap was initially raised, Chrome (and legacy Edge) did not support display of emphasis marks, but now all major browsers support them.

Tests & results:
i18n test suite, CSS3 Text decoration, emphasis marks

Action taken
Document the layout requirements for Chinese and Japanese.

Outcomes
Boten marks are now supported in all 3 major engines: Gecko, Blink, and Webkit.

5.7 Data formats & numbers

Relevant here are formats related to number, currency, dates, personal names, addresses, and so forth. 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? Is hyphenation used for your script, or something else? If hyphenation is used, does it work as expected? (Note, this is about line-end hyphenation when text is wrapped, rather than use of the hyphen and related characters as punctuation marks.)

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? Does the script indent the first line of a paragraph?

6.3 Text spacing

This section is concerned with spacing that is adjusted around and between characters on a line in ways other than attempts to fit text to a given width (ie. justification). 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? If spacing needs to be applied between letters and numbers, is that possible? What about space associated with punctuation, such as the gap before a colon in French? (For justification related spacing, see 6.2 Text alignment & justification.)

#312 Lack of support for applying extra spacing between Japanese and Western text

Languages: ja 2

This issue is applicable to Chinese and Japanese.

In Japanese composition, it is usually recommended to apply extra spacing between 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.

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

#265 Browsers apply extraneous spaces when letter-spacing

Languages: ja 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? Are there issues related to line height or inter-line spacing, etc.? Are the requirements for baseline or line height in vertical text covered?

6.5 Lists, counters, etc.

Are there list or other counter styles in use? If so, what is the format used and can that be achieved? Are the correct separators available for use after list counters? Are there other aspects related to counters and lists that need to be addressed? Are list counters handled correctly in vertical text?

#178 Local counter styles not supported

Languages: ja 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).

For Japanese, this means that a number of predefined counter styles in the CSS Counter Styles spec are not widely supported by browsers, or use a different separator from that specified. Because the custom mechanism of the Counter Styles spec is not supported by browsers other than Firefox, users are unable to fix this for themselves.

The following are additional items of Japanese-specific information.

Tests & results: i18n test suite, Basic tests for support of @counter-styles i18n test suite, Tests for hiragana/katakana styles i18n test suite, Tests for kanji character styles

Browser bug reports:

Chromium WebKit

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.

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

Languages: ja 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. The number may be within parentheses, be circled, have a dot alongside it, etc.

vertical-lists

This is very common in printed material, but is not well supported in web pages.

The GAP
css-pseudo The ::marker pseudo-element represents the automatically generated marker box of a list item, and can be styled.

The expected way to achieve this in HTML would be to use the following CSS:

li::marker { text-combine-upright: all; }

However not all browsers support text-combine-upright.

A workaround might be to use fullwidth characters for counters, such as ①, ②, ③ or ⒈, ⒉, ⒊ etc., but use of such a workaround requires the availability of custom built counter styles, and not all browsers support the CSS Counter Styles specification. So that doesn't work either.

Priority
It is a significant nuisance for content authoring to not be able to produce upright counters for lists. This is a very common approach to numbering lists in vertical text, and should be possible on the Web.

Tests
Interactive test, It is possible to make list counters upright in vertical text using li::marker { text-combine-upright: all; }.

Interactive test, It is possible to set list markers as upright circled numbers / dotted numbers in vertical text using an @counter-style definition

Action taken
Browser bug reports: ChromiumWebkitWebkitMozilla

Specifically about centring: Chromium

Outcomes
Gecko, Blink, and WebKit based browsers now all support custom-defined counter styles, making it possible to use always-upright characters such as circled digits.

Blink and Gecko engines now support the CSS needed to correctly orient the counters at the top of vertical lines. WebKit is still holding out. This can be coupled with other styling to produce the expected result for standard digit or alpha counters.

A common counter style is a digit with a parenthesis above and below. Although text-combine-upright can be used with ::marker to make digits upright, only the 'all' value works at the moment. To support this type of counter it is necessary to support the 'digits' value, which none of the browsers currently do.

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. See also 7.2 Grids & tables.

7.2 Grids & tables

As a subtopic of page layout, does the script have special requirements for character grids or for 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? (See 5.5 Inline notes & annotations 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. Are there other aspects related to user interaction that need to be addressed?

#167 Poor level of support for vertical form controls

Languages: ja 1

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

Handling of vertical text in forms is a major gap. Only the Firefox desktop browser does a good job of this. Other browsers fail resoundingly in terms of orienting form controls vertically and displaying text vertically inside them.

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

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