forked from w3c/typography
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
690 lines (464 loc) · 34.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Language enablement index</title>
<!-- local styles. Includes the styles from http://www.w3.org/International/docs/styleguide -->
<link rel="stylesheet" href="index-data/local.css">
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove" defer></script>
<script class="remove">
var respecConfig = {
useExperimentalStyles: true,
// specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use ED.
specStatus: "ED",
//publishDate: "2020-05-20",
previousPublishDate: "2019-05-20",
previousMaturity: "WD",
noRecTrack: true,
shortName: "typography",
copyrightStart: "2017",
edDraftURI: "https://w3c.github.io/typography/",
// lcEnd: "2009-08-05",
// editors, add as many as you like
// only "name" is required
editors: [
{ name: "Richard Ishida",
company: "W3C",
w3cid: 3439 }
],
// authors, add as many as you like.
//authors: [
// { name: "Your Name", url: "http://example.org/",
// company: "Your Company", companyURL: "http://example.com/" },
//],
group: "i18n",
//wgPublicList: "www-international",
github: "w3c/typography",
};
</script>
<script src="index-data/data.js"></script>
</head>
<body>
<section id="abstract">
<p>This document points browser implementers and specification developers to information about how to support typographic features of scripts or writing systems from around the world, and also points to relevant information in specifications, to tests, and to useful articles and papers. It is not exhaustive, and will be added to from time to time.</p>
</section>
<section id="sotd">
<p>The information in this document helps to link users and developers so that browsers can better support typographic needs around the world. It is expected that this document will be constantly updated, as new material becomes available or comes to our attention.</p>
<div class="note">
<p data-lang="en">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 for the dated version of the
document.</p>
</div>
</section>
<section id="intro">
<h2>Introduction</h2>
<p>The W3C and browser implementers need 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 users expect.</p>
<p>To that end experts in various parts of the world are documenting layout and typographic requirements, as well as gaps between what is needed and what is currently supported in browsers and ebook readers. (See a <a href="https://www.w3.org/International/i18n-drafts/nav/languagedev">list of relevant work in this area</a> that is supported by the W3C Internationalization groups.)</p>
<p>This page points browser implementers and specification developers to information about how to support features of scripts or writing systems from around the world, and also points to relevant information in specifications, to tests, and to useful articles and papers. It is not exhaustive, and will be added to from time to time.</p>
<p>The <em>Github resources</em> links point to ongoing discussions of three types:</p>
<ol>
<li><strong>Requests for information</strong> point to requests for more information about how one or more scripts work.</li>
<li><strong>Spec issues</strong> point to requests to implement a particular script feature in a spec.</li>
<li><strong>Browser bugs</strong> point to requests to implement or fix a particular script feature in a browser.</li>
</ol>
<p><strong class="advisement"> Additional information and references are hereby solicited;
please suggest additions, clarifications, corrections, and other improvements
using the <a href="https://github.com/w3c/typography/issues">github issues list</a>.</strong> </p>
</section>
<section id="text_direction">
<h2>Text direction</h2>
<section id="vertical_text">
<h3>Vertical text</h3>
<p>When dealing with vertical lines of text, it's common for content authors to want to mix short horizontal runs of text, such as 2-digit numbers, in a vertical column (tate chu yoko). It's also important to provide appropriate support for text in scripts that are normally only horizontal. Also, there are often special requirements related to the orientation of characters within vertical text.</p>
<div id="placeholder_vertical_text">
</div>
<script>
function displaySection (section_id, section, label) {
out = '<dl class="reslinks">\n'
// do background reading
if (section.background && section.background.length > 0) {
out += '<dt>Background reading</dt>\n<dd>\n'
if (section.background.length > 0) {
out += '<ul>\n'
for (let i=0;i<section.background.length;i++) {
if (section.background[i].url) out += '<li><cite><a target="_blank" href="'+section.background[i].url+'">'+section.background[i].title+'</a></cite> '
else out += '<li><cite>'+section.background[i].title+'</cite>: '
for (let j=0;j<section.background[i].sections.length;j++) {
if (j>0) out += '<span class="dot">•</span>'
out += '<a target="_blank" href="'+section.background[i].sections[j].url+'">'+section.background[i].sections[j].title+'</a>'
}
out += '</li>\n'
}
out += '</ul>\n'
}
out += '</dd>\n\n'
}
// do requirements
if (section.requirements.length > 0) {
out += '<dt>Requirements</dt>\n<dd>\n'
if (section.requirements.length > 0) {
out += '<ul>\n'
for (let i=0;i<section.requirements.length;i++) {
if (section.requirements[i].url) out += '<li><cite><a target="_blank" href="'+section.requirements[i].url+'">'+section.requirements[i].title+'</a></cite> '
else out += '<li><cite>'+section.requirements[i].title+'</cite>: '
for (let j=0;j<section.requirements[i].sections.length;j++) {
if (j>0) out += '<span class="dot">•</span>'
out += '<a target="_blank" href="'+section.requirements[i].sections[j].url+'">'+section.requirements[i].sections[j].title+'</a>'
}
out += '</li>\n'
}
out += '</ul>\n'
}
out += '</dd>\n\n'
}
// do github links
var githubLabels = ['type-info-request','spec-type-issue','browser-type-bug','useful-discussion']
var labelTitles = ['Requests for information','Spec issues','Browser bugs','Useful discussions']
var ghFound = false
out += '<dt>GitHub resources</dt>\n<dd>\n'
out += '<ul>\n'
out += '<li><a target="_blank" href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20label%3A'+label+'">All issues</a></li>'
for (let i=0;i<githubLabels.length;i++) {
if (section[githubLabels[i]]) {
out += '<li><a target="_blank" href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20label%3A'+githubLabels[i]+'%20label%3A'+label+'">'+labelTitles[i]+'</a>'
ghFound = true
}
}
if (section.samples) {
out += '<li><a target="_blank" href="https://w3c.github.io/type-samples/?feature='+label+'">Type samples</a>'
ghFound = true
}
if (! ghFound) out += '<li>None</li>'
out += '</ul>\n'
out += '</dd>\n\n'
// do specs
if (section.spec_links.length > 0) {
out += '<dt>Spec links</dt>\n<dd>\n'
out += '<ul>\n'
for (let i=0;i<section.spec_links.length;i++) {
if (section.spec_links[i].url) out += '<li><cite><a target="_blank" href="'+section.spec_links[i].url+'">'+section.spec_links[i].title+'</a></cite> '
else out += '<li><cite>'+section.spec_links[i].title+'</cite>: '
//out += '<li><cite>'+section.spec_links[i].title+'</cite>: '
for (let j=0;j<section.spec_links[i].sections.length;j++) {
if (j>0) out += '<span class="dot">•</span>'
out += '<a target="_blank" href="'+section.spec_links[i].sections[j].url+'">'+section.spec_links[i].sections[j].title+'</a>'
}
out += '</li>\n'
}
out += '</ul>\n'
}
out += '</dd>\n\n'
// do tests
if (section.tests.length > 0) {
out += '<dt>Tests</dt>\n<dd>\n'
out += '<ul>\n'
for (let i=0;i<section.tests.length;i++) {
out += '<li><a target="_blank" href="'+section.tests[i][1]+'">'+section.tests[i][0]+'</a>'
}
out += '</ul>\n'
out += '</dd>'
}
// do gap analysis
if (section.gap_analysis.length > 0) {
out += '<dt>Gap analysis</dt>\n<dd>\n'
out += '<ul class="linkList">\n'
for (let i=0;i<section.gap_analysis.length;i++) {
out += '<li><a target="_blank" href="'+section.gap_analysis[i][1]+'">'+section.gap_analysis[i][0]+'</a>'
}
out += '</ul>\n'
out += '</dd>'
}
out += '</dl>\n'
document.getElementById(section_id).innerHTML = out
}
displaySection("placeholder_vertical_text", vertical_text, 'i:vertical-text', 'vertical')
</script>
</section>
<section id="bidi_text">
<h3>Bidirectional text</h3>
<p>Scripts whose characters are typically written right-to-left, like Arabic, Hebrew, Thaana, and so on, become bidirectional when they include numbers or text from other scripts (such as Latin acronyms). Browsers and applications need to support bidirectionality. This means supporting the Unicode Bidirectional Algorithm, but also different visual locations of line start and end, isolation of embedded strings, correct line alignment, and so forth.</p>
<div id="placeholder_bidi"></div>
<script>displaySection("placeholder_bidi", bidi_text, 'i:bidi-text')</script>
</section>
</section>
<section id="characters_and_phrases">
<h2>Characters & phrases</h2>
<section id="charset">
<h3>Characters & encodings</h3>
<p>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).</p>
<div id="placeholder_charset"></div>
<script>displaySection("placeholder_charset", charset, 'i:charset')</script>
</section>
<section id="fonts">
<h3>Fonts</h3>
<p>Some scripts require special handling with regard to how font properties are specified and how font resources are loaded dynamically. In some scripts it is common to use different fonts for headings or emphasis, rather than bolding or italicisation. Fallback font families used by browsers (eg. serif, sans-serif, cursive, etc.) may need to be mapped differently to fonts for different scripts. For example, Khmer has slanted, upright, and round font styles, and Arabic has naskh, nasta'liq, ruq'a, kano, etc., which may need special handling. Special OpenType features may need to be supported.</p>
<p>See also [[[#font_style]]]</p>
<div id="placeholder_fonts"></div>
<script>displaySection("placeholder_fonts", fonts, 'i:fonts')</script>
</section>
<section id="font_style">
<h3>Font styles, weight, etc.</h3>
<p>In CSS, italic and oblique are described as font styles. Non-Latin script can add requirements for such styling. For example, oblique styles in Arabic or Hebrew scripts text may lean to the left. Proper italic glyphs in Cyrillic text can look very different from normal variants, and so synthesising italics can produce poor results. Chinese, Japanese and Korean fonts almost always lack italic or oblique faces, because those are not native typographic traditions. Bold text is similar in usage and in problems to the use of italics. Control and use of font-weight is also relevant to this section.</p>
<p>See also [[[#fonts]]].</p>
<div id="placeholder_font_style"></div>
<script>displaySection("placeholder_font_style", font_style, 'i:font-style')</script>
</section>
<section id="glyphs">
<h3>Glyph shaping & positioning</h3>
<p>In some scripts, such as Arabic, it may be desirable to allow the content author to control the placement of glyphs such as diacritics, or to control ligation, etc. Languages written with Arabic and Hebrew scripts have particular rules, of course, about when it is appropriate to show or hide diacritics for short vowel sounds. Many complex scripts have rules about how characters combine in syllabic structures, and scripts like Arabic may need controls to indicate where ligatures are wanted or not wanted. In addition, controls (based on Unicode characters or otherwise) may allow the user to control the shaping and positioning of glyphs, for example to compose/decompose conjuncts in brahmi-derived scripts.</p>
<p>See also the separate section [[[#cursive]]].) </p>
<div id="placeholder_glyphs"></div>
<script>displaySection("placeholder_glyphs", glyphs, 'i:glyphs')</script>
</section>
<section id="cursive">
<h3>Cursive text</h3>
<p>In scripts such as Arabic, Mongolian and N'Ko adjacent characters are joined together in normal printed text. It is important to ensure that those connections can be maintained correctly when characters are forced apart, or when transparency is applied to the text, etc. There are also situations where cursive joining behaviour exists when there is no adjacent character, or where joining needs to be disabled between glyphs. Cursive links shouldn't be broken by appropriate markup or styling. Etc.</p>
<div id="placeholder_cursive"></div>
<script>displaySection("placeholder_cursive", cursive, 'i:cursive')</script>
</section>
<section id="transforms">
<h3>Transforming characters</h3>
<p>Conversion between lower, upper and title case only applies to a few scripts, most scripts are unicameral. Where it does apply, the rules can vary by language. In other cases, a particular script may require a different type of transform. For example, in Japanese it is important to be able to convert between half-width and full-width presentation forms. </p>
<div id="placeholder_transforms"></div>
<script>displaySection("placeholder_transforms", transforms, 'i:transforms')</script>
</section>
<section id="segmentation">
<h3>Grapheme/word segmentation & selection</h3>
<p>A browser or application needs to correctly apply functions to the basic units of text, be they characters, character sequences, syllables, or words. Some scripts, such as those used in South and South-East Asia, require clusters of characters to be treated as a single unit for most editing operations. Many other scripts use combining characters such as accents, vowel signs, length markers, etc. that must be kept with the base character they are associated with.</p>
<p>When a user double-clicks on some text, the appropriate units should be selected. In scripts such as Chinese and Thai, 'words' should be selected even though they are not separated by spaces. In scripts such as Tibetan and Ethiopic, the word separator may be a visible character, rather than a space. It is important to understand how they should be treated when a 'word' is highlighted, or when text wraps, etc.</p>
<div id="placeholder_segmentation"></div>
<script>displaySection("placeholder_segmentation", segmentation, 'i:segmentation')</script>
</section>
<section id="punctuation_etc">
<h3>Punctuation & other inline features</h3>
<p>Many scripts use native punctuation marks in addition to or instead of those used in Latin script text. In other cases, such as Greek, common Latin punctuation marks may mean something different from what they mean in English. It may be important to understand what needs to be supported, how these punctuation marks function, and how they interact with other operations applied to the text.</p>
<p>Another aspect of this relates to separation of characters or items in text. For example, French inserts a particular type of space before certain punctuation marks, and the traditional Mongolian script requires special spacing between word stems and certain suffixes.</p>
<p>Other special inline markers may appear when handling abbreviation, ellipsis, and iteration, bracketing information, or demarcating things such as proper nouns, etc. </p>
<p>See also [[[#text_decoration]]], [[[#quotations]]], and [[[#inline_notes]]], which are broken out into separate sections.</p>
<div id="placeholder_punctuation_etc"></div>
<script>displaySection("placeholder_punctuation_etc", punctuation_etc, 'i:punctuation-etc')</script>
</section>
<section id="text_decoration">
<h3>Text decoration</h3>
<p>Some aspects related to the drawing of lines or markers alongside or through text involve local typographic considerations. For example, underlines need to be broken in special ways for some scripts, and the height of underlines, strike-through and overlines may vary depending on the script. For vertical text the placement needs to be to the right or left of the line of text, rather than under or over. Also, for many scripts bold and italic are not always appropriate for expressing emphasis or highlighting text, and some scripts have their own unique ways of doing it that involve adding special marks alongside letters or syllables, etc.</p>
<div id="placeholder_text_decoration"></div>
<script>displaySection("placeholder_text_decoration", text_decoration, 'i:text-decoration')</script>
<p>See also [[[#punctuation_etc]]].</p>
</section>
<section id="quotations">
<h3>Quotations</h3>
<p>Quotation marks vary from language to language, not just from script to script. Also, you should expect variations in behavior when quotation marks are nested. Furthermore, the quotation marks used for vertical Japanese text are not the same as those typically used for the same text when horizontally laid out.</p>
<div id="placeholder_quotations"></div>
<script>displaySection("placeholder_quotations", quotations, 'i:quotations')</script>
<p>See also [[[#punctuation_etc]]].</p>
</section>
<section id="inline_notes">
<h3>Inline notes & annotations</h3>
<p>Ruby is used for phonetic and semantic annotations of East Asian text, including furigana, pinyin and zhuyin fuhao systems. In addition to positioning annotations along the correct side of the base text, there are many fine adjustments of the annotation and base text to support. Warichu is a kind of inline annotation where the note text is two approximately equal lines of half sized text, one above the other, but both within the normal line height.</p>
<div id="placeholder_annotations"></div>
<script>displaySection("placeholder_annotations", inline_notes, 'i:inline-notes')</script>
<p>See also [[[#footnotes_etc]]].</p>
</section>
<section id="data_formats">
<h3>Data formats & numbers</h3>
<p>Relevant here are formats related to number, currency, dates, personal names, addresses, and so forth. Also, some scripts have one or sometimes more sets of their own numeric characters. In some cases, numeric characters represent numbers like 100, or 10,000. Numeric formats can also vary significantly, in terms not only of the separators and negative signs used, but also the groupings used for digits, and sometimes the mechanisms used to distinguish numbers from the text.</p>
<div id="placeholder_data_formats"></div>
<script>displaySection("placeholder_data_formats", data_formats, 'i:data-formats')</script>
<p>See also <a href="#lists"></a>.</p>
</section>
<!--section id="more_inline">
<h3>Other inline features</h3>
<p>A script may call for other inline features than those mentioned above. An example in Japanese is <span class="qterm">kumimoji</span>. Kumimoji is a way of combining several characters into a single character space. Syriac and Ethiopic identify numbers by drawing lines above them: the line extends to the width of the number. Arabic also has special characters that stretch to the length of certain numbers. There may be other such inline features in these and other scripts.</p>
<dl class="reslinks">
<dt>Requirements</dt>
<dd>
<ul>
<li><cite>Japanese Layout Requirements</cite>:
<ul class="linkList">
<li><a href="https://w3c.github.io/jlreq/#inline_cutting_note"> Inline Cutting Note (Warichu)</a></li>
<li><a href="https://w3c.github.io/jlreq/#furiwake_processing"> Furiwake Processing</a></li>
<li><a href="https://w3c.github.io/jlreq/#superscripts_and_superscripts"> Superscripts and Superscripts</a></li>
</ul>
</li>
</ul>
</dd>
<dt>GitHub resources</dt>
<dd>
<ul>
<li><a target="_blank" href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Ainline-features%20label%3Atype-info-request">Requests for information</a></li>
<li><a target="_blank" href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Ainline-features%20label%3Aspec-type-issue">Spec issues</a>
</li><li><a target="_blank" href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Ainline-features%20label%3Abrowser-type-bug">Browser bugs</a>
</li><li><a target="_blank" href="https://w3c.github.io/type-samples/?feature=inline-features">Type samples</a></li>
</ul>
</dd>
<dt>Spec links</dt>
<dd>
<ul>
<li><cite>tbd</cite></li>
</ul>
</dd>
<dt>Tests</dt>
<dd>
<ul>
<li>tbd</li>
</ul>
</dd>
</dl>
</section-->
</section>
<section>
<h2 id="blocks_paragraphs">Lines & paragraphs</h2>
<section id="line_breaking">
<h3>Line breaking</h3>
<p>There are often specific rules about how scripts behave when a line is wrapped. For example, Chinese, Japanese and Korean tend to break a line in the middle of a word (with no hyphenation) – even in Korean, which has spaces between words. Others break lines at syllable boundaries. (See below for hyphenation.)</p>
<p>It is common for certain characters to be forbidden at the start or end of a line, but which characters these are, and what rules are applied when depends on the script or language. In some cases, such as Japanese, there may be different rules according to the type of content or the user's preference.</p>
<p>See also [[[#hyphenation]]], which is broken out into a separate section.</p>
<div id="placeholder_line_breaking"></div>
<script>displaySection("placeholder_line_breaking", line_breaking, 'i:line-breaking')</script>
</section>
<section id="hyphenation">
<h3>Hyphenation</h3>
<p>Hyphenation in this sense means identifying broken words after text is wrapped at line end (and not only those involving a hyphen character). See [[[#punctuation_etc]]] for information about the use of regular hyphens in text. Some writing systems don't use hyphenation, those that do have particular rules about how it should be applied that are typically language-specific.</p>
<div id="placeholder_hyphenation"></div>
<script>displaySection("placeholder_hyphenation", hyphenation, 'i:hyphenation')</script>
</section>
<section id="justification">
<h3>Text alignment & justification</h3>
<p>Typographers have come up with various methods for effective full justification – causing the text to completely fill the line, in order to create visual alignment on both edges of a paragraph. </p>
<p>Typographic conventions for full text justification depend on the writing system, the content language, and the calligraphic style of the text. Results also tend to vary based on the capabilities of the layout engine and a given typographer’s preferences for weighing its various detrimental effects on typographic color and readability.</p>
<div id="placeholder_justification"></div>
<script>displaySection("placeholder_justification", justification, 'i:justification')</script>
</section>
<section id="spacing">
<h3>Text spacing </h3>
<p>This section is concerned with spacing that is adjusted around and between characters on a line that is driven by aims different from the full line justification described in the previous section, although it will affect line layout. Examples follow. Many scripts create emphasis or other effects by moving apart the letters or syllables in a word. (This may even apply in Indic and SE Asian scripts, and in Arabic-based scripts which join up adjacent letters.) Other times, increasing or decreasing the typical space between characters aids readability. Scripts used for Japanese or Chinese may also seek to reduce space between adjacent punctuation, to avoid large gaps. On the other hand, it may be necessary to add a gap around embedded numbers or Latin text in scripts that don't normally use spaces around words. Some scripts prefer to indent the first line of a paragraph, rather than leave vertical gaps between paragraphs. And in some scripts space needs to be carefully controlled before and after certain punctuation marks, such as in French or Thai.</p>
<div id="placeholder_letter_spacing"></div>
<script>displaySection("placeholder_letter_spacing", spacing, 'i:spacing')</script>
</section>
<section id="baselines">
<h3>Baselines, line-height, etc.</h3>
<p>Browsers and applications must accurately and comprehensively cover requirements for baseline alignment between mixed scripts. For example, Arabic script descenders go far below those of the Latin script, and Armenian characters need to be aligned with ideographic characters in Chinese appropriately with regard to comparative heights and baselines. European, Far Eastern and South Asian scripts tend to use different baselines, which must be aligned correctly. The complexity of characters in a script may affect line height settings. However, some scripts also expect larger inter-line gaps than others, in addition to the line height. This section covers these and other factors related to vertical spacing of lines.</p>
<div id="placeholder_baselines"></div>
<script>displaySection("placeholder_baselines", baselines, 'i:baselines')</script>
</section>
<section id="lists">
<h3>Lists, counters, etc</h3>
<p>List numbering in vertical text runs across the page, but may need to be rotated to run horizontally. In a list where items are alternatively right-to-left and left-to-right, where does the counter go, and how is the list aligned? The CSS specification describes a set of simple and complex styles for counters to be used in list numbering, chapter heading numbering, etc. It also provides a generic mechanism for content authors to create their own counter styles. One has to consider not only the characters and algorithms to be used (numeric, alphabetic, additive, etc), but also what the separator or other associated marks look like.</p>
<div id="placeholder_counters"></div>
<script>displaySection("placeholder_counters", lists, 'i:lists')</script>
</section>
<section id="initials">
<h3>Styling initials</h3>
<p>Does the browser or ereader correctly handle special styling of the initial letter of a line or paragraph, such as for drop caps? </p>
<div id="placeholder_initials"></div>
<script>displaySection("placeholder_initials", initials, 'i:initials')</script>
</section>
<!--section id="more_para">
<h3>Other paragraph features</h3>
<p>Some scripts have particular rules about indenting text at the start of a paragraph, or indeed whether that's normal. Some allow punctuation to hang outside the text box at the start or end of a line. There may be other aspects of how paragraphs are presented that vary from script to script, or need to be controlled by the content author.</p>
<dl class="reslinks">
<dt>Requirements</dt>
<dd>
<ul>
<li><cite>Chinese Layout Requirements</cite>:<ul class="linkList">
<li><a href="https://w3c.github.io/clreq/#hanging_punctuation_marks_at_line_end">Hanging Punctuation at Line End</a></li>
<li><a href="https://w3c.github.io/clreq/#paragraph_adjustment_rules">Paragraph Adjustment Rules</a></li>
</ul></li>
<li><cite>Japanese Layout Requirements</cite>:<ul class="linkList">
<li><a href="https://www.w3.org/TR/jlreq/#page_wise_arrangement_of_kihonhanmen_elements">Page wise Arrangement of Kihon-hanmen Elements</a></li>
<li><a href="https://www.w3.org/TR/jlreq/#paragraph_adjustment_rules">Paragraph Adjustment Rules</a></li>
<li><a href="https://www.w3.org/TR/jlreq/#block_direction_setting_process_of_lines_paragraphs">Block Direction Setting Process of Lines, Paragraphs etc.</a></li>
</ul></li>
<li><cite>Hangul Layout Requirements</cite>: <a href="https://www.w3.org/TR/klreq/#paraadjust">Paragraph Adjustment</a></li>
<li><cite>Latin Layout Requirements</cite>: <a href="https://www.w3.org/TR/dpub-latinreq/#paragraphs-and-indentation">Paragraphs and indentation</a></li>
</ul>
</dd>
<dt>GitHub resources</dt>
<dd>
<ul>
<li><a target="_blank" href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Aparagraph-features%20label%3Atype-info-request">Requests for information</a></li>
<li><a target="_blank" href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Aparagraph-features%20label%3Aspec-type-issue">Spec issues</a>
</li><li><a target="_blank" href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Aparagraph-features%20label%3Abrowser-type-bug">Browser bugs</a>
</li><li><a target="_blank" href="https://w3c.github.io/type-samples/?feature=paragraph-features">Type samples</a></li>
</ul>
</dd>
<dt>Spec links</dt>
<dd>
<ul>
<li><cite>CSS3 Text</cite>: <a href="https://drafts.csswg.org/css-text-3/#edge-effects">Edge effects</a></li>
</ul>
</dd>
</dl>
</section-->
</section>
<section id="layout">
<h2>Layout & pages</h2>
<section id="page_layout">
<h3>General page layout and progression</h3>
<p>In paged media for right-to-left scripts or vertically set documents, pages progress from right to left, and the front and back cover are in the opposite locations to, say, an English book. Unlike the general Western approach, the size of the main text block in Japanese pages (called the <span class="foreign">hanmen</span>) is traditionally established by counting character cells, and margin space is then defined by the remaining space. Columns run across a page in vertically-set pages. The standard page layout for Mongolian is landscape, and horizontal scrolling within a page is much more important than in the West, so default scrollbar positions may need special support.</p>
<p>Other topics that belong here include any local requirements for things such as printer marks, tables of contents and indexes.</p>
<div id="placeholder_layout"></div>
<script>displaySection("placeholder_layout", page_layout, 'i:page-layout')</script>
<p>See also <a href="#grids_tables"></a></p>
</section>
<section id="grids_tables">
<h3>Grids & tables</h3>
<p>Are there any special considerations related to the layout and design of tables? Due to their essentially monospaced character repertoire, Chinese and Japanese are partial to a grid-based system of layout that has some special requirements.</p>
<div id="placeholder_tables"></div>
<script>displaySection("placeholder_tables", grids_tables, 'i:grids-tables')</script>
</section>
<section id="footnotes_etc">
<h3>Footnotes, endnotes, etc</h3>
<p>Support for footnotes, endnotes or other necessary annotations of this kind may vary in other cultures. In some cases, a script may use a very idiosyncratic approach to locate the notes or to link to them from the text. (See [[[#inline_notes]]] 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.)</p>
<div id="placeholder_footnotes"></div>
<script>displaySection("placeholder_footnotes", footnotes_etc, 'i:footnotes-etc')</script>
<p>For inline annotations, see <a href="#inline_notes"></a></p>
</section>
<section id="headers_footers">
<h3>Page headers, footers, etc</h3>
<p>These links point to conventions for managing the content that appears outside the main text block, for example page numbering, or the way that running headers and the like are handled. </p>
<div id="placeholder_page_header"></div>
<script>displaySection("placeholder_page_header", headers_footers, 'i:headers-footers')</script>
</section>
<section id="interaction">
<h3>Forms & user interaction</h3>
<p>Where a page allows users to input information in forms or interact with a page, there may be special requirements for the layout and orientation of the input fields and associated labels. There may also be other aspects of user interaction with the page that differ.</p>
<div id="placeholder_user_interaction"></div>
<script>displaySection("placeholder_user_interaction", interaction, 'i:interaction')</script>
</section>
<!--section id="more_page">
<h3>Other page- or document-level features</h3>
<p>Other topics that belong here include any local requirements for things such as cross-references, bookmarks, and so forth.</p>
<dl class="reslinks">
<dt>Requirements</dt>
<dd>
<ul>
<li><cite>TBD</cite></li>
</ul>
</dd>
</dl>
</section-->
</section>
<section>
<h2 id="changeLog" class="informative">Changes Since the Last Published
Version</h2>
<p>The following changes have been made since the document was last published to the TR space:</p>
<ul>
<li>Additional clarifications added to section introductions.</li>
<li>Links all checked and amended as needed. Various new links added.</li>
<li>Reorganised to use same categorisation as language matrix and gap-analysis docs.</li>
<li>Added subsection for tables.</li>
<li>Reorganised the Layout & Pages section. Added new subsections for general page layout and progression, and for user interaction.</li>
</ul>
<p>See the <a href="https://github.com/w3c/typography/commits/gh-pages/index.html">github
commit log</a> for more details.</p>
</section>
<!--<section>
<h2 id="Acknowledgements" class="informative">Acknowledgements</h2>
<p>The W3C Internationalization Working Group and Interest Group, as well
as others, provided comments and suggestions.The Working Group
would like to thank: @@@ names go here.</p>
</section>-->
</body>
</html>