checklist.html

<!DOCTYPE html>
<html lang="en">

<head>
<title>Text layout and typography checklist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="i18n internationalisation internationalization localisation localization translation techniques index" name="keywords" />
<meta content="Allows you to find articles, tutorials, tests, etc at the W3C Internationalization subsite using lists of tasks." name="description" />
<link rel="stylesheet" type="text/css" href="https://www.w3.org/International/style/level2.css" />
<link rel="stylesheet" type="text/css" href="https://www.w3.org/International/techniques/techniques-v2.css" />
<style>
body { font-size: 16px; }
#toc { background-color: white; }
h2 { margin-left: 0; margin-top: 4em; }
h3 { margin-top: 3em; }
h3 a { color: #006; }
h3 a:link { color: #006; }
h3 a:active { color: #006; }
h3 a:visited { color: #006; }
h4 { margin-left: 0; }
#toclocation .toc1 { padding-left: 0.5em; margin-top: 2em; }
#toclocation .toc2 { padding-left: 2em; }
.toc2 a {  color: #697FB1; }
#toclocation ol { padding: 0; margin: 0; }

.flexContainer { vertical-align: top; display: flex; flex-flow: row nowrap; }
.flexContainer h3 { margin:0 1em 0 0; flex: 2; }
.flexContainer > p { flex: 3; }
.flexContainer > div { flex: 3; }
.flexContainer p a { font-style: italic; }
.threads { font-size: 90%; font-style: italic; }
</style>
<!--script type="text/javascript" src="https://www.w3.org/International/javascript/toc_2016.js"></script-->
<script type="text/javascript" src="http://localhost/International/javascript/toc_2016.js"></script>
</head>


<body>

<!-- Top left icons -->
<div id="topLeft"><a href="https://www.w3.org/"><img src="https://www.w3.org/Icons/w3c_home" alt="W3C" height="48" width="72" /></a><a href="https://www.w3.org/International/" title="Go to the Internationalization home page."><img src="https://www.w3.org/International/icons/sitetitle.gif"
			alt="W3C Internationalization (I18n) Activity: Making the World Wide Web truly world wide!" /></a></div>

<!-- Top left links -->
<div id="sitelinks"><a href="https://www.w3.org/International/" title="Internationalization Activity home page.">Home</a>&#xA0; <a href="https://www.w3.org/International/about" title="About the Internationalization Activity.">About</a>&#xA0; <a href="https://www.w3.org/International/about#scope" title="Groups that make up the Internationalization Activity.">Groups</a>&#xA0; <a href="https://www.w3.org/International/resource-index" title="Topic index for information on this site">Topics</a>&#xA0; <a href="https://www.w3.org/International/technique-index" title="Task-based index of i18n techniques">Techniques</a>&#xA0; <a href="https://www.w3.org/International/resources" title="Information resources on the Internationalization site.">Resources</a>&#xA0; <a href="https://www.w3.org/International/log/description" title="Information about news filters and RSS feeds for W3C Internationalization.">News</a>&#xA0;
  &#xA0;</div>
  
<div class="directory">
  <nav>
  <h2  id="toclinks" class="notoc"><a id="links">On this page</a></h2>
	<div id="toc"> </div>
	</nav>
</div>


<div class="content">
  <h1>Text layout and typography checklist </h1>
<section>
<p>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.
</p><p>To that end we have experts in various parts of the world documenting layout and typographic requirements and gaps between what is needed and what is currently supported in browsers and ebook readers. 
</p>
<p>The mainstay of this work is a series of documents describing requirements for text layout and typography support on the Web and in digital publications. The documents cover Japanese, Korean, Chinese, Latin, Arabic, Ethiopic, Tibetan, some Indic scripts, and hopefully soon Hebrew, Mongolian and other scripts. See a <a href="https://www.w3.org/International/layout">list of relevant work in this area</a>. </p>
<p>In addition, there is an index to <a href="index">information about typographic practices</a> in various scripts around the world, which is likely to be a useful resource for browser and spec developers.</p>
<p>This page is a checklist of items to consider when describing typography for a given script. It can be used by someone setting up a layout requirements document, but may also be useful for other situations. If you want to raise an issue or comment against this page, use the <a href="https://github.com/w3c/typography/issues">github issues list</a>.</p>
</section>
  

<section>
<h2 id="overview"><a href="#overview">Script overview</a></h2>

<p>Generally speaking, this section should be just high level and introductory.  It should give an overall picture of how the script works and leave discussion of specific typographic features and how they work to the later sections. This section is aimed at descriptive text and text that provides context in which to understand later sections – the later sections typically look at how to implement interactive features of typographic design.</p>

<section class="flexContainer">
<h3 id="overview_encoding"><a href="#overview_encoding">Encoding considerations</a></h3>
<p>Are there any particular encoding issues to consider for this script?</p>
</section>
<section class="flexContainer">
  <h3 id="overview_cursive"><a href="#overview_cursive">Main features of the script</a></h3>
  <div>
<p>Is the script an alphabet, abugida, abjad, syllabary, etc? What are the basic set of characters for major languages written in the script? How does the script work? Are glyphs in the script regularly joined up, as in Arabic, or not? Are there other special features, such as stacking, syllabic clusters and conjuncts, etc. Is there a set of characters used for special purposes, such as transcription? Are multiple scripts used? </p>
<p>What are the basic directional features of the script? Is the script written right-to-left, or bidirectionally?  Is is written vertically? If so, can it also be written horizontally, what is the frequency with which it is written one way or the other, and which side is the first line on?</p>
<p> Are there special considerations about page layout that should be described briefly at this point, eg. Japanese kihon-hanmen?</p>
  </div>
</section>

</section>

<section>
<h2 id="characters_phrases"><a href="#characters_phrases">Characters &amp; phrases</a></h2>


<section class="flexContainer">
<h3 id="overview_fonts"><a href="#overview_fonts">Fonts and font styles</a></h3>
<p>What are key fonts and or font styles used for this script? Are there standard fallback fonts in use in browsers, and if so do they match expectations? Does the script use fixed-width font glyphs, proportionally-spaced fonts, or a combination? <a href="index#fonts">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Afonts%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

<section class="flexContainer">
<h3 id="overview_punctuation"><a href="#overview_punctuation">Punctuation</a></h3>
<p>What are the typical punctuation marks used, and how are they used? (See other sections for information about how quotations work, and how punctuation interacts with boundary detection and line-breaking, etc.) <a href="index#punctuation">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Apunctuation%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

<section class="flexContainer">
<h3 id="quotations"><a href="#quotations">Quotations</a></h3>
<p>What is the expected behaviour for quotations marks, especially when nested? Should block quotes be indented or handled specially?
<a href="index#quotations">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Aquotations%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

<section class="flexContainer">
<h3 id="overview_symbols"><a href="#overview_symbols">Symbols</a></h3>
<p>Does the script use special symbols that are worth noting, eg. head marks in Tibetan?</p>
</section>

<section class="flexContainer">
<h3 id="overview_numbers"><a href="#overview_numbers">Numbers and digits</a></h3>
<p>Does the script have its own set of number digits?  How are they used, and how frequently? Does the numbering system use base-10, or some other type of base?</p>
</section>


<section class="flexContainer">
<h3 id="graphemes"><a href="#graphemes">Identifying boundaries of graphemes, words and larger groupings</a></h3>
<p>What are the basic units of the text, and how are they demarcated, eg. characters, character sequences, syllables, or words?  Are spaces or different symbols used between 'words'? Is it important to treat clusters of characters as a single unit? What should happen if you double- or triple-click in the text, whether or not 'words' are separated by spaces?
<a href="index#graphemes">See available information</a>.</p>
</section>


<section class="flexContainer">
<h3 id="transforming_characters"><a href="#transforming_characters">Transforming characters</a></h3>
<p>What transformations does your script need? For example, 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?
<a href="index#transforming_characters">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Atext-transform%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

<section class="flexContainer">
<h3 id="letter_spacing"><a href="#letter_spacing">Inline spacing</a></h3>
<p>Many scripts create emphasis or other effects by spacing out the letters or syllables in a word. We know there are questions here about how this should work in Indic and SE Asian scripts, and in Arabic-based scripts.  Can you provide information? Are there requirements for other scripts that we should add? See 
<a href="index#letter_spacing">available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Ainline-spacing%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>


<section class="flexContainer">
<h3 id="ruby_annotation"><a href="#ruby_annotation">Ruby annotation</a></h3>
<p>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?
<a href="index#ruby_annotation">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Aruby%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

<section class="flexContainer">
<h3 id="text_decoration"><a href="#text_decoration">Text decoration</a></h3>
<div>
<p>Some aspects related to the drawing of lines 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 strike-through may vary depending on the script. What about vertical text?
<a href="index#text_decoration">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Atext-decoration%20label%3Atype-info-request">check for currently needed data</a>.</p>
</div>
</section>

<section class="flexContainer">
<h3 id="emphasis"><a href="#emphasis">Emphasis</a></h3>
<p>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.
<a href="index#emphasis">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Aemphasis%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

</section>


<section>
<h2 id="lines_paragraphs"><a href="lines_paragraphs">Lines &amp; paragraphs</a></h2>

<section class="flexContainer">
<h3 id="line_breaking"><a href="#line_breaking">Line breaking</a></h3>
<div>
<p>Does CSS capture the rules about the way text in your script wraps when it hits the end of a line?  What characters should not appear at the end or start of a line, and what should be done to prevent that? Does line-breaking wrap whole 'words' at a time, or characters, or something else (such as syllables in Tibetan)?
<a href="index#line_breaking">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Aline-break%20label%3Atype-info-request">check for currently needed data</a>.</p>
</div>
</section>

<section class="flexContainer">
<h3 id="hyphenation"><a href="#hyphenation">Hyphenation</a></h3>
<p>Is hyphenation used for your script, or something else? If hyphenation is used, where should the hyphen appear?
<a href="index#hyphenation">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Ahyphenation%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

<section class="flexContainer">
<h3 id="justification"><a href="#justification">Justification &amp; line-end alignment</a></h3>
<div>
<p> When text in a paragraph needs to have flush lines down both sides, does it follow the rules for your script? Does the script 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? <a href="index#justification">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Ajustification%20label%3Atype-info-request">check for currently needed data</a>.</p>
</div>
</section>


<section class="flexContainer">
<h3 id="counters"><a href="#counters">Counters, lists, etc</a></h3>
<p>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. Are the details correct?
We have another document that provides over 120 templates for user-defined counter styles in over 30 scripts. Are there more? Are there other aspects related to counters and lists that need to be addressed?
<a href="index#counters">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Acounter-styles%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>


<section class="flexContainer">
<h3 id="initial_letter"><a href="#initial_letter">Initial letter styling</a></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?
<a href="index#initial_letter">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Ainitial-letter%20label%3Atype-info-request">check for currently needed data</a>.<br />
</p>
</section>


<section class="flexContainer">
  <h3 id="baselines_inline_alignment"><a href="#baselines_inline_alignment">Baselines &amp; inline alignment</a></h3>
<p>What are the  requirements for baseline alignment between mixed scripts and in general?
<a href="index#baselines_inline_alignment">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Abaselines%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>


<section class="flexContainer">
<h3 id="white_space_wrapping_in_source_code"><a href="#white_space_wrapping_in_source_code">White space and wrapping in source code</a></h3>
<p>Do the rules for transforming white space in the source text for display meet the requirements of your script?  
This is particularly relevant for Far Eastern and South East Asian scripts, that don't use spaces between words.</p>
</section>


<section class="flexContainer">
<h3 id="other_para_features"><a href="#other_para_features">Other paragraph features</a></h3>
<p>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?
<a href="index#other_para_features">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Aparagraph-features%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>
</section>


<section>
<h2 id="layout"><a href="layout">Layout &amp; pages</a></h2>

<section class="flexContainer">
<h3 id="direction_agnostic"><a href="#direction_agnostic">Direction-agnostic layout</a></h3>
<p>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. 
<a href="index#direction_agnostic">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Abidi%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

<section class="flexContainer">
<h3 id="vertical_text"><a href="#vertical_text">Vertical text</a></h3>
<p>What are  the requirements for vertically oriented text?  What about if you mix vertical text with scripts that are normally only horizontal? Is it normal to use different character in vertical vs. horizontal text?
<a href="index#vertical_text">See available information</a>.</p>
</section>

<section class="flexContainer">
<h3 id="mixed_horizontal_and_vertical"><a href="#mixed_horizontal_and_vertical">Mixed horizontal and vertical text</a></h3>
<p>The spec describes rules for embedding horizontal runs of text in vertical lines, as is often seen with numbers in Chinese, Japanese and Korean vertically?
<a href="index#mixed_horizontal_and_vertical">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Avertical-text%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

<section class="flexContainer">
<h3 id="notes_footnotes"><a href="#notes_footnotes">Notes, footnotes, etc</a></h3>
<p>Does your script have special requirements for notes, footnotes, endnotes or other necessary annotations of this kind in the way needed for your culture?
<a href="index#notes_footnotes">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Anotes-footnotes%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

<section class="flexContainer">
<h3 id="page_numbering_running_headers"><a href="#page_numbering_running_headers">Page numbering, running headers, etc</a></h3>
<p>Are there special conventions for page numbering, or the way that running headers and the like are handled?
<a href="index#page_numbering_running_headers">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Apage-numbering%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>

<section class="flexContainer">
<h3 id="more_page_layout_and_pagination"><a href="#more_page_layout_and_pagination">More page layout and pagination</a></h3>
<p>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?
<a href="index#more_page_layout_and_pagination">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Apagination%20label%3Atype-info-request">check for currently needed data</a>.</p>
</section>
</section>


<section>
<h2 id="other"><a href="other">Other</a></h2>

<section class="flexContainer">
<h3 id="culture_specific"><a href="#culture_specific">Culture-specific features</a></h3>
<p>Sometimes a script or language does things that are not common outside of it sphere of influence. This is a loose bag of additional items that weren't previously mentioned.</p>
</section>

<section class="flexContainer">
<h3 id="what_else"><a href="#what_else">What else?</a></h3>
<p>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.</p>
<p>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?</p>
</section>
</section>
  
  <hr />
  <section>
    <div class="smallprint">
	<p>If you have comments about this page, send them to ishida@w3.org.</p>
      <p id="version">Content last changed <span id="version-info"><!-- #BeginDate format:IS1m -->2017-08-23  13:21<!-- #EndDate --></span> GMT</p>
      <p class="copyright"><a rel="Copyright" href="/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2015 <a href="/"><abbr
						title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr
						title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.org/"><abbr
						title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>), All Rights
        Reserved. W3C <a href="/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a
						href="/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, <a rel="Copyright" href="/Consortium/Legal/copyright-documents">document use</a> and <a rel="Copyright" href="/Consortium/Legal/copyright-software">software licensing</a> rules apply. Your interactions with this site are in
        accordance with our <a href="/Consortium/Legal/privacy-statement#Public">public</a> and <a
						href="/Consortium/Legal/privacy-statement#Members">Member</a> privacy statements.</p>
    </div>
</section>
<script type="text/javascript">if (document.getElementById('toc')) { createtoc(3); }</script>
</div>
</body>
</html>