req-tcu-font.html (21291B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Requirements for fonts for testing text-combine-upright</title> 5 <meta charset='utf-8'> 6 <script class='remove'> 7 var respecConfig = { 8 specStatus: "unofficial", 9 shortName: "req-tcu-font", 10 editors: [ { name: "Masataka Yakura", url: "https://google.com/+MasatakaYakura" } ], 11 publishDate: "2015-01-28", 12 }; 13 </script> 14 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 15 <style> 16 /***************************************************************** 17 * ReSpec 3 CSS 18 * Robin Berjon - http://berjon.com/ 19 *****************************************************************/ 20 21 /* --- INLINES --- */ 22 em.rfc2119 { text-transform: lowercase; font-variant: small-caps; font-style: normal; color: #900; } 23 h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr { border: none; } 24 dfn { font-weight: bold; } 25 a.internalDFN { color: inherit; border-bottom: 1px solid #99c; text-decoration: none; } 26 a.externalDFN { color: inherit; border-bottom: 1px dotted #ccc; text-decoration: none; } 27 a.bibref { text-decoration: none; } 28 cite .bibref { font-style: normal; } 29 code { color: #C83500; } 30 31 /* --- TOC --- */ 32 .toc a, .tof a { text-decoration: none; } 33 a .secno, a .figno { color: #000; } 34 ul.tof, ol.tof { list-style: none outside none; } 35 .caption { margin-top: 0.5em; font-style: italic; } 36 37 /* --- TABLE --- */ 38 table.simple { border-spacing: 0; border-collapse: collapse; border-bottom: 3px solid #005a9c; } 39 .simple th { background: #005a9c; color: #fff; padding: 3px 5px; text-align: left; } 40 .simple th[scope="row"] { background: inherit; color: inherit; border-top: 1px solid #ddd; } 41 .simple td { padding: 3px 10px; border-top: 1px solid #ddd; } 42 .simple tr:nth-child(even) { background: #f0f6ff; } 43 44 /* --- DL --- */ 45 .section dd > p:first-child { margin-top: 0; } 46 .section dd > p:last-child { margin-bottom: 0; } 47 .section dd { margin-bottom: 1em; } 48 .section dl.attrs dd, .section dl.eldef dd { margin-bottom: 0; } 49 50 @media print { .removeOnSave { display: none; } } 51 </style> 52 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 53 <style>/* --- ISSUES/NOTES --- */ 54 div.issue-title, div.note-title { padding-right: 1em; min-width: 7.5em; color: #b9ab2d; } 55 div.issue-title { color: #e05252; } 56 div.note-title { color: #2b2; } 57 div.issue-title span, div.note-title span { text-transform: uppercase; } 58 div.note, div.issue { margin-top: 1em; margin-bottom: 1em; } 59 .note > p:first-child, .issue > p:first-child { margin-top: 0 } 60 .issue, .note { padding: .5em; border-left-width: .5em; border-left-style: solid; } 61 div.issue, div.note { padding: 1em 1.2em 0.5em; margin: 1em 0; position: relative; clear: both; } 62 span.note, span.issue { padding: .1em .5em .15em; } 63 .issue { border-color: #e05252; background: #fbe9e9; } 64 .note { border-color: #52e052; background: #e9fbe9; } 65 </style> 66 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 67 <style>/* HIGHLIGHTS */ 68 code.prettyprint { color: inherit; } 69 70 /* this from google-code-prettify */ 71 .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} 72 </style> 73 <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/w3c-unofficial"> 74 </head> 75 <body> 76 77 <section id="abstract"> 78 <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. 79 80 <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. 81 </section> 82 83 <section> 84 <h2>CSS testing terminology</h2> 85 <p>Before getting into the requirements of fonts, let me explain some terms specific to CSS testing. 86 87 <section> 88 <h3>Reftests (reference tests)</h3> 89 <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. 90 <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>. 91 <figure> 92 <iframe src="../../css-flexbox-1/reference/flexbox-flex-wrap-nowrap-ref.htm" frameborder="0" width="400" height="200"></iframe> 93 <figcaption>A reference of green rectangle, used for a flexbox test</figcaption> 94 </figure> 95 </section> 96 97 <section> 98 <h3>The Ahem font</h3> 99 <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: 100 <blockquote cite="http://www.w3.org/Style/CSS/Test/Fonts/Ahem/"> 101 <pre>The font's em square is exactly square. 102 Its ascent and descent is exactly the size of the em square. This 103 means that the font's extent is exactly the same as its line-height, 104 meaning that it can be exactly aligned with padding, borders, margins, 105 and so forth. 106 107 The font's alphabetic baseline is 0.2em above its bottom, and 0.8em 108 below its top. The font has an x-height of 0.8em. 109 110 The font has four glyphs: 111 112 'X' U+0058 A square exactly 1em in height and width. 113 114 'p' U+0070 A rectangle exactly 0.2em high, 1em wide, and aligned so 115 that its top is flush with the baseline. 116 117 'É' U+00C9 A rectangle exactly 0.8em high, 1em wide, and aligned so 118 that its bottom is flush with the baseline. 119 120 ' ' U+0020 A transparent space exactly 1em high and wide. 121 122 Most other US-ASCII characters in the font have the same glyph as X.</pre> 123 </blockquote> 124 </section> 125 126 </section> 127 128 129 <section> 130 <h2>Testing <code>text-combine-upright</code></h2> 131 <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. 132 <figure class="example"> 133 <img src="https://drafts.csswg.org/css-writing-modes/tate-chu-yoko.png"> 134 <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> 135 </figure> 136 <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: 137 <pre class="highlight"><code><style> 138 .test { 139 writing-mode: vertical-rl; 140 font-family: Ahem; 141 } 142 .tcy { 143 text-combine-upright: all; 144 } 145 </style> 146 147 <p>Test passes if the following is identical:</p> 148 149 <div class="test"> 150 <p><span class="tcy">123</span></p> 151 <p>x</p> 152 </div></code></pre> 153 <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. 154 <figure class="example"> 155 <img src="img/figure-rendering-tcu.svg" width="480"> 156 <figcaption>An illustration of output from ① no-tcu-support UA, ② conforming UA, ③ reference file</figcaption> 157 </figure> 158 159 <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. 160 </section> 161 162 163 </section> 164 165 <section> 166 <h2>Glyphs</h2> 167 168 <p>This section describes requirements for glyphs that the font needs and gives some ideas of glyphs. 169 170 171 <section> 172 <h3>Glyphs that can be used as an alternative to Ahem glyphs</h3> 173 <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. 174 <ul> 175 <li>A black square is a 1em × 1em square glyph; it is pretty much the same as Ahem's glyph for <code>x</code> 176 <li>A blank of 1em × 1em 177 </ul> 178 <figure> 179 <img src="img/square_black.svg" width="300"> 180 <img src="img/square_blank.svg" width="300"> 181 </figure> 182 183 <p class="note">It might be okay with just using Ahem if tests needing black square only contain codepoints in ASCII-range. 184 </section> 185 186 187 <section> 188 <h3>Glyphs to check whether a character is rotated or not</h3> 189 <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. 190 <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. 191 <p>Therefore, we need two glyphs where: 192 <ul> 193 <li>their widths and heights are 1em 194 <li>one matches another visually when another rotated 90° counterclockwise 195 </ul> 196 <figure> 197 <img src="img/pointing_right.svg" width="300"> 198 <img src="img/pointing_up.svg" width="300"> 199 <figcaption>example glyphs that satisfy the requirements above: "pointing-right" on left and "pointing-up" on right</figcaption> 200 </figure> 201 <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. 202 <figure> 203 <pre class="highlight"><code><style> 204 body { 205 writing-mode: vertical-rl; 206 font-family: SomeFont; 207 } 208 .test { 209 text-combine-upright: all; 210 } 211 .reference { 212 text-orientaiton: upright; 213 } 214 </style> 215 216 <p class="test">A</p> 217 <p class="reference">B</p></code></pre> 218 <figcaption>Test code might look like this</figcaption> 219 </figure> 220 221 <p class="note">These glyphs are not directly related to TCY so perhaps it should go to CSS Orientation Test font. 222 </section> 223 224 225 <section> 226 <h3>Glyph to check whether the composition has no text decoration inside it</h3> 227 <p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-layout">Section 9.1.2 Layout Rules</a> it says: 228 <blockquote> 229 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. 230 </blockquote> 231 <p>Later in the section it says: 232 <blockquote> 233 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. 234 </blockquote> 235 <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. 236 <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: 237 <ul> 238 <li>it does not overlap ruby text, emphasis mark, or any decoration 239 </ul> 240 <p>The following is an idea for such glyph: it draws overline and underline but does not do so in between them. 241 <figure> 242 <img src="img/over_and_under.svg" width="300"> 243 </figure> 244 <p>With such glyph, the test would be written as: 245 <figure> 246 <pre class="highlight"><code><style> 247 .test { 248 writing-mode: vertical-rl; 249 font-family: TCU-test; 250 } 251 .tcy { 252 text-combine-upright: all; 253 text-emphasis: sesame; 254 } 255 </style> 256 257 <p><span class="tcy">AB</span></p></code></pre> 258 </figure> 259 <p>This will make the test reftestable. 260 <figure> 261 <img src="img/figure-over_and_under-pass.svg" width="300"> 262 <img src="img/figure-over_and_under-fail.svg" width="300"> 263 <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> 264 </figure> 265 <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. 266 </section> 267 268 269 <section> 270 <h3>Glyphs that is larger than 1em square</h3> 271 <p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-layout">9.1.2 Layout Rules</a> the spec says: 272 <blockquote> 273 The effective size of the composition is assumed to be 1em square; anything outside the square is not measured for layout purposes. 274 </blockquote> 275 <p>Hence, we need a glyph where: 276 <ul> 277 <li>its size is greater than 1em square 278 </ul> 279 <figure> 280 <img src="img/heavy_h.svg" width="200"> 281 <!-- <img src="img/heavy_h_rotated.svg" width="200"> --> 282 <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> 283 </figure> 284 <p>By using this glyph with two square glyphs we can make a 3em square. 285 <figure> 286 <pre class="highlight"><code><style> 287 body { 288 writing-mode: vertical-rl; 289 font-family: SomeFont; 290 } 291 .tcy { 292 text-combine-upright: all; 293 } 294 .reference { 295 font-size: 3em; 296 margin: 2em 0; 297 } 298 </style> 299 300 <div class="test"> 301 <p>x<span class="tcy">H</span>x</p> 302 <p class="reference">x</p> 303 </div></code></pre> 304 <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> 305 </figure> 306 </section> 307 308 <section> 309 <h3>TBD</h3> 310 <p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-layout">9.1.2 Layout Rules</a> the spec says: 311 <blockquote> 312 The UA should center the glyphs horizontally and vertically within the measured 1em square. 313 </blockquote> 314 <p class="issue">work in progress. test authors are struggling with the look of shape(s) to use to create a reftest 315 <!-- 316 <p> 317 <ul> 318 <li> 319 </ul> 320 <figure> 321 <img src=""> 322 <figcaption></figcaption> 323 </figure> 324 <p> 325 --> 326 </section> 327 328 329 <section> 330 <h3>Glyphs to check whether <code><var>n</var>wid</code> OpenType features are used</h3> 331 <p>In <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-compression">9.1.3 Compression Rules</a> the spec says: 332 <blockquote> 333 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. 334 </blockquote> 335 <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. 336 </ul> 337 338 <section> 339 <h4>A double stripe</h4> 340 <p>Used for the <i>hwid</i> feature. 341 <figure> 342 <img src="img/stripe_double.svg" width="300"> 343 <figcaption>double stripe. reference glyph on left, hwid glyph on right.</figure> 344 </figure> 345 </section> 346 347 <section> 348 <h4>A triple stripe</h4> 349 <p>Used for the <i>twid</i> feature. 350 <figure> 351 <img src="img/stripe_triple.svg" width="300"> 352 <figcaption>triple stripe. reference glyph on left, twid glyph on right.</figure> 353 </figure> 354 </section> 355 356 <section> 357 <h4>A quadruple stripe</h4> 358 <p>Used for the <i>qwid</i> feature. 359 <figure> 360 <img src="img/stripe_quad.svg" width="300"> 361 <figcaption>quadruple stripe. reference glyph on left, qwid glyph on right.</figure> 362 </figure> 363 </section> 364 365 <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. 366 367 <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. 368 </section> 369 370 371 <section> 372 <h3>Glyphs to check the optional processing regarding U+6C34</h3> 373 <p>The last paragraph in <a href="https://drafts.csswg.org/css-writing-modes/#text-combine-compression">9.1.3 Compression Rules</a> says: 374 <blockquote> 375 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 composition to match the advance height of 水 U+6C34. 376 </blockquote> 377 <p>We need two glyphs: 378 <ul> 379 <li>a glyph of horizontal rectangle (e.g. 1em × .8em), mapping to 0x6C34 380 <li>a glyph of thinner horizontal rectangle (e.g. 1em × .3em), mapping to a certain codepoint 381 </ul> 382 383 <p class="note">There is <a href="http://lists.w3.org/Archives/Public/www-style/2014Jul/0310.html">a spec issue</a>. 384 </section> 385 386 387 </section> 388 389 390 <section> 391 <h2>Glyph mappings</h2> 392 393 <p>This section describes which glyph should map to which code points. 394 395 <p class="note">This section is work-in-progress.</p> 396 397 <section> 398 <h3>Font A <span class="issue">TODO: Name</span></h3> 399 400 <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> 401 402 <p class="note">Unless otherwise specified, glyphs are mapped to both in horizontal and in vetical (using the <code>vert</code> feature) modes.</p> 403 404 <table class="simple" border> 405 <tr> 406 <th>Code Point 407 <th>Glyph 408 <th>Note 409 410 <tr> 411 <td>x (U+0078) 412 <td>Black 413 <td> 414 415 <tr> 416 <td>SPACE (U+0020) 417 <td>Blank 418 <td> 419 420 <tr> 421 <td>R (U+0052) 422 <td>Pointing Right 423 <td> 424 425 <tr> 426 <td>U (U+0055) 427 <td>Pointing Up 428 <td> 429 430 <tr> 431 <td>O (U+004F) 432 <td>Overline+Underline 433 <td> 434 435 <tr> 436 <td>h (U+0048) 437 <td>Heavy H 438 <td> 439 440 <tr> 441 <td>r (U+072) 442 <td>Pointing Right and Pointing Up 443 <td> 444 default: Pointing Right<br> 445 vert: Pointing Up 446 </table> 447 448 </section> 449 450 <section> 451 <h3>Fonts to test width-variant features</h3> 452 453 <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> 454 455 <p>Below is a table for the latter font; the former (only contains <code>hwid</code> feature) lacks other four features.</p> 456 457 <table class="simple" border> 458 <tr> 459 <th>Code Point 460 <th>Glyph 461 <th>Note 462 463 <tr> 464 <td>a (U+0078) 465 <td>Double Stripe<br>Triple Stripe<br>Quadruple Stripe<br>Black 466 <td> 467 hwid: Double Stripe<br> 468 twid: Triple Stripe<br> 469 qwid: Quadruple Stripe<br> 470 fwid: Black<br> 471 pwid: Black<br> 472 473 <tr> 474 <td>H (U+0078) 475 <td>Double Stripe 476 <td> 477 Used in reference 478 479 <tr> 480 <td>T (U+0078) 481 <td>Triple Stripe 482 <td> 483 Used in reference 484 485 <tr> 486 <td>Q (U+0078) 487 <td>Quadruple Stripe 488 <td> 489 Used in reference 490 </table> 491 492 </section> 493 494 </section> 495 496 497 498 <section> 499 <h2>Acknowledgements</h2> 500 <p>Special thnks goes to the current and former editors of the Writing Modes specification: fantasai, Koji Ishii, and Shinyu Murakami 501 <p>In addition to the editors, this work wouldn't have been possible without help from: Taichi Kawabata 502 </section> 503 504 505 <script src='http://www.w3.org/Tools/respec/respec-w3c-common' async class='remove'></script>