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. This is a preliminary analysis.

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. This document complements the document Text Layout Requirements for the Japanese Script, which describes the requirements for areas where gaps appear. It is linked to from the language matrix that tracks Web support for many languages.

This document is currently an individual contribution.

Sending comments on this document

If you wish to make comments regarding this document, please raise them as github issues. Only send comments by email if you are unable to raise issues on github (see links below). All comments are welcome.

To make it easier to track comments, please raise separate issues or emails for each comment, and point to the section you are commenting on  using a URL.

Introduction

The W3C needs to make sure that the text layout and typographic 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 issues for a given script or language in terms of support by specifications or user agents (browsers, e-readers, etc.).

A summary of this report and others can be found as part of the language matrix.

Work flow

This version of the document is a preliminary analysis

Gap analysis work usually starts with a preliminary analysis, conducted quickly by one or a small group of experts. Then a more detailed analysis is carried out, involving a wider range of experts. The detailed analysis may involve the development of tests, in order to illustrate issues and track results for browsers. The next phase is ongoing maintenance. It is expected that the resulting document will not be frozen: as gaps are fixed, this should be noted in the document. It is also possible that new gaps are noticed or arise, and they can be added to this document when that happens.

As the gap analysis develops, the requirements for features that are problematic should be described in the companion document, Requirements for Japanese Text Layout. Links to the appropriate part of that document should be added to this document as the material is created. Note that the requirements document should not contain any technology-specific information: all of that belongs here.

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 features 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.)

Characters and phrases

Encoding considerations

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

Fonts

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? See available information or check for currently needed data.

Font styles

Do italic fonts lean in the right direction? Is synthesised italicisation problematic? See available information or check for currently needed data.

Glyph control

Does the script in question require additional 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? See available information or check for currently needed data.

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? See available information or check for currently needed data.

Quotations

Are there any issues when dealing with quotations marks, especially when nested? Should block quotes be indented or handled specially? See available information or check for currently needed data.

Default quotation marks for q element

If the html tag sets the language of a page, the HTML specification says that the q element should by default produce quotation marks according to the information in CLDR for that language.

For Japanese, according to CLDR the default quote marks should be 「...」, and embedded quote marks 『...』. Firefox doesn't change default quote marks based on language setting. (Chrome & Safari are ok.) See a test and results.

Default quotation marks in a new language section

In addition, the default quotation marks for the q element are not set to the appropriate characters by the browser when the element appears inside a Japanese section of a page that has a different overall language. This is currently per the HTML specification (both W3C and WhatWG). There is an issue raised against the WhatWG version for this to be changed.

Embedded quotations in a different language

Japanese quotes embedded in text in another language can also be problematic if the outer language uses different quotation marks. This is due to the browsers choosing default quotation marks based on the language of the quotation, rather than that of the surrounding text. See a test. This behaviour is specified in the WhatWG version of the HTML spec, but no longer in the W3C version. There is an issue raised against the WhatWG version for this to be changed.

Marking all the above as advanced, because use of the q element is optional (quote characters can be used instead), and it can be styled using CSS for the general case.

Numbers, dates, etc.

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)? See available information or check for currently needed data.

Text boundaries & selection

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? Are there issues when applying punctuation than could be fixed by the application? (Some of the answers to these questions may be addressed in other sections, such as line-breaking, or initial-letter styling.) See available information or check for currently needed data.

Transforming characters

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? See available information or check for currently needed data.

text-transform: full-width currently only works in Gecko. Tests: standard syntaxproprietary syntax

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

Inter-character spacing

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

Ruby annotation

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? See available information or check for currently needed data.

Tabular markup

The basic pattern here is ruby-base ruby-base ... ruby-text ruby-text ..., which we'll refer to as tabular. 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.

Only Firefox supports tabular ruby markup. More Tests: standard syntaxproprietary syntax

For creation of HTML with jukugo ruby this is advanced in impact, however there are other implications when tabular markup is not supported that have a more important impact.

When text is marked up in mono-ruby way. searching may 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.

Double-sided ruby

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 only with Firefox. It works with the proprietary -webkit prefix in Chrome and Safari, but doesn't work with Edge. See test results.

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

Ruby aligment and other styling

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. See results for major browsers.

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

Text decoration

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? See available information or check for currently needed data.

Emphasis & highlights

Bold and italic are not always appropriate for expressing emphasis, and some scripts have their own unique ways of doing it, that are not in the Western tradition at all. Does this script require support for emphasising or highlighting text that cannot be achieved currently? See available information or check for currently needed data.

For requirements, see JLReq Composition of Emphasis Dots.

JLReq lists the following ways of showing emphasis in Japanese.

  1. Select a different typeface.
  2. Use LEFT CORNER BRACKET "「" and RIGHT CORNER BRACKET "」" or LEFT ANGLE BRACKET "〈" and RIGHT ANGLE BRACKET "〉
  3. Change the colour.
  4. Underline
  5. Boten marks (aka emphasis marks).

(1) and (2) are popular approaches. (5) is not as common, but is a traditional approach with some value attached.

(1), (2) and (3) present no difficulties. For (4) see Text decoration.

Boten marks

There are tests for boten mark support that show that they are not supported by Chrome 63.0.3239.132 or Edge, but they are supported by Firefox 58.0 and Safari 11.0.3.

The expected behaviour for basic support of boten marks is specified in CSS.

Given that there are alternative ways of showing emphasis, and although there are already two implementations, I mark this as an advanced need.

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.
  2. If ruby only spans part of the emphasised word, emphasis marks stay as close as possible to the base.
  3. Where a ruby annotation is hidden or empty, the emphasis marks should continue at the same height.

JLReq also requires that emphasis marks not appear over commas, full stops and brackets.

There are currently no tests for these behaviours, and no requirements in jlreq for the former (with ruby). Need to take a closer look.

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.

Bidirectional text

If this script runs right-to-left, are there any issues when handling that? Is 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? See available information or check for currently needed data.

Other inline features

Does the script have special ways of representing inline notes (such as wakiten or kumimoji in Japanese) or other inline features that need to be supported? See available information or check for currently needed data.

Lines and Paragraphs

Line breaking

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? See available information or check for currently needed data.

Hyphenation

Is hyphenation used for your script, or something else? If hyphenation is used, does it work as expected? See available information or check for currently needed data.

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? See available information or check for currently needed data.

Counters, lists, 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? See available information or check for currently needed data.

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.

There is an additional problem for list counters in vertical text. 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. . Tests: standard syntaxproprietary syntax

A workaround might be to use fullwidth characters for counters, such as ①, ②, ③ etc., but use of such a workaround requires the availability of custom built counter styles, and only Firefox currently supports the CSS Counter Styles specification. So that doesn't work either. Tests: standard syntaxproprietary syntax

It is a significant nuisance for content authoring to not be able to produce upright counters for lists.

Initial letter styling

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? .See available information or check for currently needed data.

Baselines & inline alignment

Does the browser support requirements for baseline alignment between mixed scripts and in general? See available information or check for currently needed data.

Other paragraph features

In your script, is the first line of text typically indented at the start of a paragraph? Are there other features of paragraph design that are peculiar to your script? See available information or check for currently needed data.

Layout & pages

Bidirectional layout

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. See available information or check for currently needed data.

Vertical text

Are the script requirements for vertically oriented text met? 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? See available information or check for currently needed data.

While there is now basic support for vertical text in most major browsers, there are still some essential features that are not supported. Support for even basic vertical text doesn't seem to be available, however, for Android and the UC Browser. (Need to check this.) See tests.

Vertical form controls

One major gap is handling of vertical text in forms. Only the Firefox desktop browser does a good job of this. See test results. Other browsers fail resoundingly in terms of orienting form controls vertically and displaying text vertically inside them. More Tests: standard syntaxproprietary syntax

This has a significant impact for creation of general web sites.

Upright text orientation

Another gap is the CSS text-orientation property. It is only supported as standard by Firefox. Safari has buggy support if you use the -webkit proprietary extension: it has a problem centering the letter in the vertical line. Tests: standard syntaxproprietary syntax

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

Tate-chu-yoko

The CSS text-combine-upright property works with the all value in all major browsers, although for Edge you need to use the proprietary property -ms-text-combine-horizontal. Tests: standard syntaxproprietary syntax

With the digits value, it is only supported by Edge (with it's proprietary property name), but Edge stretches single digits to fit the width of the (vertical) line. Tests: standard syntaxproprietary syntax

The unavailability of the digits value is an inconvenience, since more interventions and markup are needed when using the all value.

Lists

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. . Tests: standard syntaxproprietary syntax

A workaround might be to use fullwidth characters for counters, such as ①, ②, ③ etc., but use of such a workaround requires the availability of custom built counter styles, and only Firefox currently supports the CSS Counter Styles specification. So that doesn't work either. Tests: standard syntaxproprietary syntax

It is a significant nuisance for content authoring to not be able to produce upright counters for lists.

Table cells

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 works as expected in Edge, Internet Explorer and Gecko browsers. Blink and Webkit browsers, on the other hand, leave the text horizontal but rotate the characters to the left. Note, also, by the way that you have to set the height of the cell in these browsers for a span to be displayed vertically.

See test results for major browsers: vertical-rl, vertical-lr.

Logical properties

A great deal of time and confusion can be saved by using 'logical' properties, rather than right, left, top and bottom, for things such as alignment.

CSS is developing the necessary keywords in the Logical Properties specification, which at the time of writing is still an editor's draft. Some of the properties described there, however, are already supported by browsers.

Unfortunately, Microsoft Edge still doesn't support the start and end values for text-align

Tests: standard syntaxproprietary syntax

 

Notes, footnotes, etc.

Does your script have special requirements for notes, footnotes, endnotes or other necessary annotations of this kind in the way needed for your culture? See available information or check for currently needed data.

Page numbering, running headers, etc.

Are there special conventions for page numbering, or the way that running headers and the like are handled? See available information or check for currently needed data.

Other page layout & pagination features

Some cultures define page areas and page progression direction very differently from those in the West (eg. kihon hanmen in Japanese). Is this an issue for you? Are widows and orphans relevant? In what order do pages progress, RTL or LTR? See available information or check for currently needed data.

Other

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

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

Acknowledgements

Special thanks to the following people who contributed to this document (contributors' names listed in in alphabetic order).

This Person, That Person, etc

Please find the latest info of the contributors at the GitHub contributors list.