Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<title>Requirements for fonts for testing text-combine-upright</title>
<meta charset='utf-8'>
<script class='remove'>
var respecConfig = {
specStatus: "unofficial",
shortName: "req-tcu-font",
publishDate: "2015-01-28",
};
</script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
/*****************************************************************
* ReSpec 3 CSS
*****************************************************************/
/* --- INLINES --- */
em.rfc2119 { text-transform: lowercase; font-variant: small-caps; font-style: normal; color: #900; }
h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr { border: none; }
dfn { font-weight: bold; }
a.internalDFN { color: inherit; border-bottom: 1px solid #99c; text-decoration: none; }
a.externalDFN { color: inherit; border-bottom: 1px dotted #ccc; text-decoration: none; }
a.bibref { text-decoration: none; }
cite .bibref { font-style: normal; }
code { color: #C83500; }
/* --- TOC --- */
.toc a, .tof a { text-decoration: none; }
a .secno, a .figno { color: #000; }
ul.tof, ol.tof { list-style: none outside none; }
.caption { margin-top: 0.5em; font-style: italic; }
/* --- TABLE --- */
table.simple { border-spacing: 0; border-collapse: collapse; border-bottom: 3px solid #005a9c; }
.simple th { background: #005a9c; color: #fff; padding: 3px 5px; text-align: left; }
.simple th[scope="row"] { background: inherit; color: inherit; border-top: 1px solid #ddd; }
.simple td { padding: 3px 10px; border-top: 1px solid #ddd; }
.simple tr:nth-child(even) { background: #f0f6ff; }
/* --- DL --- */
.section dd > p:first-child { margin-top: 0; }
.section dd > p:last-child { margin-bottom: 0; }
.section dd { margin-bottom: 1em; }
.section dl.attrs dd, .section dl.eldef dd { margin-bottom: 0; }
@media print { .removeOnSave { display: none; } }
</style>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>/* --- ISSUES/NOTES --- */
div.issue-title, div.note-title { padding-right: 1em; min-width: 7.5em; color: #b9ab2d; }
div.issue-title { color: #e05252; }
div.note-title { color: #2b2; }
div.issue-title span, div.note-title span { text-transform: uppercase; }
div.note, div.issue { margin-top: 1em; margin-bottom: 1em; }
.note > p:first-child, .issue > p:first-child { margin-top: 0 }
.issue, .note { padding: .5em; border-left-width: .5em; border-left-style: solid; }
div.issue, div.note { padding: 1em 1.2em 0.5em; margin: 1em 0; position: relative; clear: both; }
span.note, span.issue { padding: .1em .5em .15em; }
.issue { border-color: #e05252; background: #fbe9e9; }
.note { border-color: #52e052; background: #e9fbe9; }
</style>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>/* HIGHLIGHTS */
code.prettyprint { color: inherit; }
/* this from google-code-prettify */
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
</style>
</head>
<body>
<section id="abstract">
<p>The <a href="https://drafts.csswg.org/css-writing-modes/">CSS Writing Modes</a> specification defines a property <code>text-combine-upright</code> which enables a <i>tate-chu-yoko</i> (<span lang="ja">縦中横</span>) effect; applying the property to a span of text will combine the text inside it horizontally so that it looks a single character in vertical writing modes.
<p>While invesitigating the specification for developing test suite, test authors found the need for a new font specifically designed to test the property. This document gives a fairly basic guide to CSS testing and testing <code>text-combine-upright</code> specifically, and lists the requiremnts of the font needed to test the property.
</section>
<section>
<h2>CSS testing terminology</h2>
<p>Before getting into the requirements of fonts, let me explain some terms specific to CSS testing.
<section>
<h3>Reftests (reference tests)</h3>
<p>A <a href="http://testthewebforward.org/docs/reftests.html">reftest</a> are one of the testing format used in W3C and browser vendors for testing features that add visual effects to a page such as CSS and SVG. A reftest are madte of two (or more) files: a test case made using features to test, and reference file(s) made using widely-implemented-and-deployed features (e.g. CSS2). On conforming implementation the reference and the test case will visually match.
<p>For ease of testing, references often use simple geometric shapes such as <a href="http://test.csswg.org/source/css-flexbox-1/reference/flexbox-flex-wrap-nowrap-ref.htm">green square</a>.
<figure>
<iframe src="../../css-flexbox-1/reference/flexbox-flex-wrap-nowrap-ref.htm" frameborder="0" width="400" height="200"></iframe>
<figcaption>A reference of green rectangle, used for a flexbox test</figcaption>
</figure>
</section>
<section>
<h3>The Ahem font</h3>
<p>In order to test CSS features, it is required to install the <a href="http://www.w3.org/Style/CSS/Test/Fonts/Ahem/">Ahem font</a> in a testing system. The Ahem font only contains simple geometric glyphs such as a square and rectangles. With those simple glyphs it is easy to craft references and test cases. Here's a design specification of Ahem quoting from the README file:
<pre>The font's em square is exactly square.
Its ascent and descent is exactly the size of the em square. This
means that the font's extent is exactly the same as its line-height,
meaning that it can be exactly aligned with padding, borders, margins,
and so forth.
The font's alphabetic baseline is 0.2em above its bottom, and 0.8em
below its top. The font has an x-height of 0.8em.
The font has four glyphs:
'X' U+0058 A square exactly 1em in height and width.
'p' U+0070 A rectangle exactly 0.2em high, 1em wide, and aligned so
that its top is flush with the baseline.
'É' U+00C9 A rectangle exactly 0.8em high, 1em wide, and aligned so
that its bottom is flush with the baseline.
' ' U+0020 A transparent space exactly 1em high and wide.
Most other US-ASCII characters in the font have the same glyph as X.</pre>
</blockquote>
</section>
</section>
<section>
<h2>Testing <code>text-combine-upright</code></h2>
<p>The <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-upright"><code>text-combine-upright</code></a> property combines a short run of text horizontally in vertical writing modes. The resulting effect is called <i>tate-chu-yoko</i> (<span lang="ja">縦中横</span>, sometimes abbreviated as <abbr>TCY</abbr> in CSSWG mailing lists) and used for short digits in vertical Japanese layout.
<figure class="example">
<figcaption>Example of tate-chu-yoko (borrowed from the Writing Modes spec). The digits "20" and "16" are aligned horizontally. Also the digit "4" is rotated upright even it looks an ASCII digit; this is because "4" is also composed thus rotated.</figcaption>
</figure>
<p>In order to make reftests, it needs a font which contains geometric glyphs designed so that horizontally-combined glyphs and the reference would look the same (e.g. a 1em × 1em square glyph). With such font, a test can be written as follows:
<pre class="highlight"><code><style>
.test {
writing-mode: vertical-rl;
font-family: Ahem;
}
.tcy {
text-combine-upright: all;
}
</style>
<p>Test passes if the following is identical:</p>
<div class="test">
<p><span class="tcy">123</span></p>
<p>x</p>
</div></code></pre>
<p>In conforming user agent with the font installed on the system, the span "123" will be combined horizontally thus rendered as a single square, resulting to match the reference. In non-conforming user agents the span will neither be combined nor be compressed as a single square, it will thus not match the reference rendering.
<figure class="example">
<img src="img/figure-rendering-tcu.svg" width="480">
<figcaption>An illustration of output from ① no-tcu-support UA, ② conforming UA, ③ reference file</figcaption>
</figure>
<p>The above example uses Ahem; some tests can be written using Ahem. However, many features of <code>text-combine-upright</code> cannot be tested with only a black square glyph. Also the spec requires UAs with OpenType support to use OpenType features on rendering particular properties; to test this, the font must be an OpenType font with required fetures.
</section>
</section>
<section>
<h2>Glyphs</h2>
<p>This section describes requirements for glyphs that the font needs and gives some ideas of glyphs.
<section>
<h3>Glyphs that can be used as an alternative to Ahem glyphs</h3>
<p>In the prior section we demonstrate how we can test <code>text-combine-upright</code> using Ahem. In some cases tests can be written only using Ahem, but there are cases where we need additional glyphs.
<ul>
<li>A black square is a 1em × 1em square glyph; it is pretty much the same as Ahem's glyph for <code>x</code>
<li>A blank of 1em × 1em
</ul>
<figure>
<img src="img/square_black.svg" width="300">
<img src="img/square_blank.svg" width="300">
</figure>
<p class="note">It might be okay with just using Ahem if tests needing black square only contain codepoints in ASCII-range.
</section>
<section>
<h3>Glyphs to check whether a character is rotated or not</h3>
<p><code>text-combine-upright</code> combines a span of text horizontally and make the resulting compression rendered upright, even when the element has just one character.
<p>If the element contains two or more characters, Ahem can be used to check if user agents support composition effect. However, if it is just a single character, Ahem cannot be used since most character in Ahem is a 1em square and thus cannot figure out whether the resulting coposition is rendered upright or not.
<p>Therefore, we need two glyphs where:
<ul>
<li>their widths and heights are 1em
<li>one matches another visually when another rotated 90° counterclockwise
</ul>
<figure>
<img src="img/pointing_right.svg" width="300">
<img src="img/pointing_up.svg" width="300">
<figcaption>example glyphs that satisfy the requirements above: "pointing-right" on left and "pointing-up" on right</figcaption>
</figure>
<p class="note">Yes, I stole the glyph idea from <a href="http://blogs.adobe.com/CCJKType/2013/05/css-orientation-test-opentype-fonts.html">CSS Orientation Test</a> font.
<figure>
<pre class="highlight"><code><style>
body {
writing-mode: vertical-rl;
font-family: SomeFont;
}
.test {
text-combine-upright: all;
}
.reference {
text-orientaiton: upright;
}
</style>
<p class="test">A</p>
<p class="reference">B</p></code></pre>
<figcaption>Test code might look like this</figcaption>
</figure>
<p class="note">These glyphs are not directly related to TCY so perhaps it should go to CSS Orientation Test font.
</section>
<section>
<h3>Glyph to check whether the composition has no text decoration inside it</h3>
<p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-layout">Section 9.1.2 Layout Rules</a> it says:
<blockquote>
When combining text as for text-combine-upright: all, the glyphs of the combined text are composed horizontally (<mark>ignoring letter-spacing and any forced line breaks, but using the specified font settings</mark>), similar to the contents of an inline-box with a horizontal writing mode and a line-height of 1em.
</blockquote>
<p>Later in the section it says:
<blockquote>
For other text layout purposes, e.g. emphasis marks, text-decoration, spacing, etc. the resulting composition is treated as a single glyph representing the Object Replacement Character U+FFFC.
</blockquote>
<p>So we need to test if user agents ignore spacing, emphasis marks, decorations applied to <em>each</em> character inside the composition but rather apply those effects to the resulting composition, treating as if it were a single characeter.
<p>The test should be written to check if there is no emphasis mark or ruby character inside the composition. To make this easy to observe, we need a glyph where:
<ul>
<li>it does not overlap ruby text, emphasis mark, or any decoration
</ul>
<p>The following is an idea for such glyph: it draws overline and underline but does not do so in between them.
<figure>
<img src="img/over_and_under.svg" width="300">
</figure>
<p>With such glyph, the test would be written as:
<figure>
<pre class="highlight"><code><style>
.test {
writing-mode: vertical-rl;
font-family: TCU-test;
}
.tcy {
text-combine-upright: all;
text-emphasis: sesame;
}
</style>
<p><span class="tcy">AB</span></p></code></pre>
</figure>
<p>This will make the test reftestable.
<figure>
<img src="img/figure-over_and_under-pass.svg" width="300">
<img src="img/figure-over_and_under-fail.svg" width="300">
<figcaption>Conforming user agents apply text-emphasis as if the content inside <code><span class="tcy"></code> were a single character (left). Non-conforming user agents might apply text-emphasis to each character inside <code><span class="tcy"></code> (right)</figcaption>
</figure>
<p class="issue">This glyph cannot cover the assertion <q>the resulting composition is treated as a single glyph representing the Object Replacement Character U+FFFC</q>. Test authors are not sure if that will cause a visual effect that can be tested.
</section>
<section>
<h3>Glyphs that is larger than 1em square</h3>
<p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-layout">9.1.2 Layout Rules</a> the spec says:
<blockquote>
The effective size of the composition is assumed to be 1em square; anything outside the square is not measured for layout purposes.
</blockquote>
<p>Hence, we need a glyph where:
<ul>
<li>its size is greater than 1em square
</ul>
<figure>
<img src="img/heavy_h.svg" width="200">
<!-- <img src="img/heavy_h_rotated.svg" width="200"> -->
<figcaption>The "Heavy H". The dashed region in the center of the glyph indicates the 1em square and the lines besides the square has the length of 3em and the thickness of 1em.</figcaption>
</figure>
<p>By using this glyph with two square glyphs we can make a 3em square.
<figure>
<pre class="highlight"><code><style>
body {
writing-mode: vertical-rl;
font-family: SomeFont;
}
.tcy {
text-combine-upright: all;
}
.reference {
font-size: 3em;
margin: 2em 0;
}
</style>
<div class="test">
<p>x<span class="tcy">H</span>x</p>
<p class="reference">x</p>
</div></code></pre>
<figcaption>The test code might look like this: it assumes that a black square glyph maps to <code>x</code> and the "Heavy H" glyph maps to <code>H</code></figcaption>
</figure>
</section>
<section>
<h3>TBD</h3>
<p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-layout">9.1.2 Layout Rules</a> the spec says:
<blockquote>
The UA should center the glyphs horizontally and vertically within the measured 1em square.
</blockquote>
<p class="issue">work in progress. test authors are struggling with the look of shape(s) to use to create a reftest
<!--
<p>
<ul>
<li>
</ul>
<figure>
<img src="">
<figcaption></figcaption>
</figure>
<p>
-->
</section>
<section>
<h3>Glyphs to check whether <code><var>n</var>wid</code> OpenType features are used</h3>
<p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-compression">9.1.3 Compression Rules</a> the spec says:
<blockquote>
OpenType implementations must use width-specific variants (OpenType features hwid/twid/qwid; other glyph-width features such as fwid or pwid are not included) to compress text in cases where those variants are available for all characters in the composition.
</blockquote>
<p>In order to test this, we need glyphs for hwid, twid, and qwid; they need to be distinguishable from each other and also distinguishable from fwid/pwid glyphs. For the use in reference, we also need "extended" versions of hwid/twid/qwid glyphs; the widths of the extended version are all 1em.
</ul>
<section>
<h4>A double stripe</h4>
<p>Used for the <i>hwid</i> feature.
<figure>
<img src="img/stripe_double.svg" width="300">
<figcaption>double stripe. reference glyph on left, hwid glyph on right.</figure>
</figure>
</section>
<section>
<h4>A triple stripe</h4>
<p>Used for the <i>twid</i> feature.
<figure>
<img src="img/stripe_triple.svg" width="300">
<figcaption>triple stripe. reference glyph on left, twid glyph on right.</figure>
</figure>
</section>
<section>
<h4>A quadruple stripe</h4>
<p>Used for the <i>qwid</i> feature.
<figure>
<img src="img/stripe_quad.svg" width="300">
<figcaption>quadruple stripe. reference glyph on left, qwid glyph on right.</figure>
</figure>
</section>
<p class="note">There might be cases where a character inside TCY does not have all features, the font need to have characters that only have (or miss) hwid/twid/qwid feature. Tests need to check combination of characters with different feature sets.
<p class="issue">Since the processing details of compression rules are up to User Agents, when the resulting glyphs from composition differs from each other, the test can only be verified using negative references.
</section>
<section>
<h3>Glyphs to check the optional processing regarding U+6C34</h3>
<p>The last paragraph in <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-compression">9.1.3 Compression Rules</a> says:
<blockquote>
In some fonts, the ideographic glyphs are given a compressed design such that they are 1em wide but shorter than 1em tall. To accommodate such fonts, the UA may vertically scale the the composition to match the advance height of 水 U+6C34.
</blockquote>
<p>We need two glyphs:
<ul>
<li>a glyph of horizontal rectangle (e.g. 1em × .8em), mapping to 0x6C34
<li>a glyph of thinner horizontal rectangle (e.g. 1em × .3em), mapping to a certain codepoint
</ul>
<p class="note">There is <a href="http://lists.w3.org/Archives/Public/www-style/2014Jul/0310.html">a spec issue</a>.
</section>
</section>
<section>
<h2>Glyph mappings</h2>
<p>This section describes which glyph should map to which code points.
<p class="note">This section is work-in-progress.</p>
<section>
<h3>Font A <span class="issue">TODO: Name</span></h3>
<p>Font A contains all glyphs except ones for checking <a href="#glyphs-to-check-whether-nwid-opentype-features-are-used">width-related features</a>.</p>
<p class="note">Unless otherwise specified, glyphs are mapped to both in horizontal and in vetical (using the <code>vert</code> feature) modes.</p>
<table class="simple" border>
<tr>
<th>Code Point
<th>Glyph
<th>Note
<tr>
<td>x (U+0078)
<td>Black
<td>
<tr>
<td>SPACE (U+0020)
<td>Blank
<td>
<tr>
<td>R (U+0052)
<td>Pointing Right
<td>
<tr>
<td>U (U+0055)
<td>Pointing Up
<td>
<tr>
<td>O (U+004F)
<td>Overline+Underline
<td>
<tr>
<td>h (U+0048)
<td>Heavy H
<td>
<tr>
<td>r (U+072)
<td>Pointing Right and Pointing Up
<td>
default: Pointing Right<br>
vert: Pointing Up
</table>
</section>
<section>
<h3>Fonts to test width-variant features</h3>
<p>These fonts test the <a href="#glyphs-to-check-whether-nwid-opentype-features-are-used">width-related features</a>. One font contains only <code>hwid</code> feature, and another contains all the five features (<code>hwid</code>, <code>twid</code>, <code>qwid</code>, <code>fwid</code>, and <code>pwid</code>).</p>
<p>Below is a table for the latter font; the former (only contains <code>hwid</code> feature) lacks other four features.</p>
<table class="simple" border>
<tr>
<th>Code Point
<th>Glyph
<th>Note
<tr>
<td>a (U+0078)
<td>Double Stripe<br>Triple Stripe<br>Quadruple Stripe<br>Black
<td>
hwid: Double Stripe<br>
twid: Triple Stripe<br>
qwid: Quadruple Stripe<br>
fwid: Black<br>
pwid: Black<br>
<tr>
<td>H (U+0078)
<td>Double Stripe
<td>
Used in reference
<tr>
<td>T (U+0078)
<td>Triple Stripe
<td>
Used in reference
<tr>
<td>Q (U+0078)
<td>Quadruple Stripe
<td>
Used in reference
</table>
</section>
</section>
<section>
<h2>Acknowledgements</h2>
<p>Special thnks goes to the current and former editors of the Writing Modes specification: fantasai, Koji Ishii, and Shinyu Murakami
<p>In addition to the editors, this work wouldn't have been possible without help from: Taichi Kawabata
</section>