Skip to content

Commit

Permalink
Add 2022 template changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@r12a
r12a committed May 24, 2022
1 parent 722ceca commit 2cde04a
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 101 deletions.
87 changes: 44 additions & 43 deletions articles/typography/justification.en.html
View file
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8" />
<title>Approaches to full justification</title>
<meta name="description" content="Provides an overview of text justification strategies, and advice to authors and implementers." />
<script type="text/javascript">
<script>
var f = { }

// AUTHORS should fill in these assignments:
Expand All @@ -31,15 +31,16 @@

f.additionalLinks = ''
</script>
<script type="text/javascript" src="justification-data/translations.js"> </script>
<script type="text/javascript" src="../../javascript/doc-structure/article-dt.js"> </script>
<script type="text/javascript" src="../../javascript/boilerplate-text/boilerplate-en.js"></script><!--TRANSLATORS must change -en to the subtag for their language!-->
<script type="text/javascript" src="../../javascript/doc-structure/article.js"> </script>
<script type="text/javascript" src="../../javascript/articletoc-html5.js"></script>
<link rel="stylesheet" href="../../style/article-2016.css" type="text/css" />
<script src="justification-data/translations.js"> </script>
<script src="../../javascript/doc-structure/article-dt.js"> </script>
<script src="../../javascript/boilerplate-text/boilerplate-en.js"> </script>
<!--TRANSLATORS must change -en in the line just above to the subtag for their language! -->
<script src="../../javascript/doc-structure/article-2022.js"> </script>
<script src="../../javascript/articletoc-2022.js"></script>
<link rel="stylesheet" href="../../style/article-2022.css" />
<link rel="copyright" href="#copyright"/>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css" media="all">

<style media="all">
th.bytes {
font-size: 20px;
}
Expand Down Expand Up @@ -67,24 +68,24 @@ <h1>Approaches to full justification</h1>
</header>


<section>
<div id="audience">
<p><span id="intendedAudience" class="leadin">Intended audience:</span>
browser implementers, specification developers, and anyone who would like to get a better idea about how full justification differs for writing systems around the world. </p>
<div id="updateInfo"></div><script>document.getElementById('updateInfo').innerHTML = g.updated</script>
</div>



<p>This article gives a high level summary of various typographic strategies for fully justifying text on a line and in a paragraph for a variety of scripts, and offers some advice to authors and implementers.</p>
<p>Since the amount of content on a line tends to vary, even if minutely, from line to line within a paragraph, 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>
<p>This article provides a hint at some of the different strategies used in different writing systems, but the devil is very much in the detail. Furthermore, other factors such as line-break rules, hyphenation, and other inline features, have to be taken into account during justification.</p>
<p class="note">For more detailed information about how justification happens in various scripts, see the <a href="http://w3c.github.io/typography/#justification">International text layout and typography index</a>.</p>
</section>
<p class="info">For more detailed information about how justification happens in various scripts, see the <a href="http://w3c.github.io/typography/#justification">International text layout and typography index</a>.</p>



<section>
<h2 id="sec_survey"><a href="#sec_survey">A survey of script behaviors</a></h2>
<section>
<h3 id="chinese"><a href="#chinese">Chinese Writing System (Han Ideographs)</a></h3>
<section id="sec_survey">
<h2>A survey of script behaviors</h2>
<section id="chinese">
<h3>Chinese Writing System (Han Ideographs)</h3>
<p>Historically, Chinese was written as Han ideographs, with no punctuation.
Under this system, justification was automatic,
as the characters fit perfectly into a square grid, and lines could wrap between any two characters.
Expand All @@ -99,8 +100,8 @@ <h3 id="chinese"><a href="#chinese">Chinese Writing System (Han Ideographs)</a><
script-change boundaries,
and inter-character spacing.</p>
</section>
<section>
<h3 id="japanese"><a href="#japanese">Japanese Writing System</a></h3>
<section id="japanese">
<h3>Japanese Writing System</h3>
<p>Like Chinese, Japanese was historically written in Han ideographs;
however it has since developed its own phonetic scripts
Hiragana and Katakana (collectively, Kana).
Expand All @@ -124,8 +125,8 @@ <h3 id="japanese"><a href="#japanese">Japanese Writing System</a></h3>
</div>
<p>Punctuation normally fits in the same square glyph as ideographic and kana characters, but typically leaves a substantial part of that square blank. When attempting to justify text on a line, justification may reduce the blank space in such glyphs first, before attempting other strategies.</p>
</section>
<section>
<h3 id="korean"><a href="#korean">Korean Writing System</a></h3>
<section id="korean">
<h3>Korean Writing System</h3>
<p>Like Japanese, Korean was historically written in pure Han ideographs, but long ago developed its own phonetic script, Hangul, which has mostly supplanted ideographs in modern Korean writing. </p>
<p>While Han ideographs (Hanja, in Korean) were kept as part of the writing system,
they have become increasingly scarce over time
Expand All @@ -140,8 +141,8 @@ <h3 id="korean"><a href="#korean">Korean Writing System</a></h3>
as in English publications, this method adjusts the spaces between words
in order to fill the line. However, unlike English, modern Korean normally wraps characters rather than whole words to a new line when the end of a line is reached. This can to some extent reduce the difficulty of justifying text. </p>
</section>
<section>
<h3 id="latin"><a href="#latin">Latin (Roman) Writing System</a></h3>
<section id="latin">
<h3>Latin (Roman) Writing System</h3>
<p>Quite possibly the writing system familiar to more people than any other,
the Latin writing system derives from the Roman alphabet,
including a few additional characters and diacritic marks
Expand All @@ -162,8 +163,8 @@ <h3 id="latin"><a href="#latin">Latin (Roman) Writing System</a></h3>
treat Latin letters the same as Japanese characters
for the purpose of line-breaking and justification.</p>
</section>
<section>
<h3 id="ethiopic"><a href="#ethiopic">Ethiopic Writing System</a></h3>
<section id="ethiopic">
<h3>Ethiopic Writing System</h3>
<p>Like Latin, the Ethiopic writing system uses an alphabet of disjoint letters
and uses punctuation to indicate the break between words.
Unlike Latin, Ethiopic traditionally uses a visible word separator –<wbr/>
Expand All @@ -182,8 +183,8 @@ <h3 id="ethiopic"><a href="#ethiopic">Ethiopic Writing System</a></h3>
</figure>
</div>
</section>
<section>
<h3 id="arabic"><a href="#arabic">Arabic Writing System (and Other Cursive Systems)</a></h3>
<section id="arabic">
<h3>Arabic Writing System (and Other Cursive Systems)</h3>
<p>Arabic is a cursive script,
meaning its letters are typically joined together within a word.
This creates additional challenges, and opportunities for full justification.</p>
Expand All @@ -207,8 +208,8 @@ <h3 id="arabic"><a href="#arabic">Arabic Writing System (and Other Cursive Syste
and in the absence of additional information should be given
similar treatment for justification.</p>
</section>
<section>
<h3 id="tibetan"><a href="#tibetan">Tibetan Writing System</a></h3>
<section id="tibetan">
<h3>Tibetan Writing System</h3>
<p>Tibetan is a Brahmic writing system related to Indic scripts like Devanagari and Gujarati;
however, unlike these systems, it does not use Western-style punctuation
nor spaces between words,
Expand All @@ -225,8 +226,8 @@ <h3 id="tibetan"><a href="#tibetan">Tibetan Writing System</a></h3>
</figure>
</div>
</section>
<section>
<h3 id="sea"><a href="#sea">South &amp; Southeast Asian Writing Systems</a></h3>
<section id="sea">
<h3>South &amp; Southeast Asian Writing Systems</h3>

<p>Tamil has many very long words, and in Tamil news columns it may not be possible to fit more than a single word on a line. In such cases it is common to stretch the word to fit the whole width of the line. To do so, equal space is added between <em>each non-connected glyph</em> across the line. Space is inserted evenly between the unconnected glyphs, regardless of whether a glyph is part of a syllabic cluster, or even a single code point.</p>

Expand Down Expand Up @@ -254,8 +255,8 @@ <h3 id="sea"><a href="#sea">South &amp; Southeast Asian Writing Systems</a></h3>
</ol>
<p>In Southeast Asian systems such as Thai and Lao, there are no spaces between words, but spaces serve to separate larger units of text. However, lines are still broken at (invisible) word boundaries, and the text may be stretched to make the line ends flush. If there are no spaces on a line, or if expanding the spaces produces gaps that are too large, similar glyph-based algorithms may be applied to the text in order to produce the expansion needed.</p>
</section>
<section>
<h3 id="other"><a href="#other">Other Writing Systems</a></h3>
<section id="other">
<h3>Other Writing Systems</h3>
<p>Most (but not all) writing systems not mentioned here
have discrete letters, like Latin,
and in the absence of more specific information
Expand All @@ -268,19 +269,19 @@ <h3 id="other"><a href="#other">Other Writing Systems</a></h3>
</section>


<section>
<section id="advice">
<h2>Advice for implementers and authors</h2>
<p>In this section we provide additional advice for implementers and content authors related to justification.</p>
<section>
<h3 id="tag_for_content"><a href="#tag_for_content">Tagging content for language</a></h3>
<section id="tag_for_content">
<h3>Tagging content for language</h3>
<p class="advisement"> Authors should use (correct) language tags
in order to get the best possible typographic behavior.
For example, if Japanese text is tagged as Japanese,
the user agent knows to preferentially compress the space rather than expand it. If Latin text is labelled as German, the user agent knows to avoid inter-character spacing, since that may signify emphasis to German readers.</p>
<p>For information about how to tag HTML for language, see <a href="/International/articles/language-tags/index">Language tags in HTML and XML</a>.</p>
</section>
<section>
<h3 id="untagged_content"><a href="#untagged_content">Justifying untagged content</a></h3>
<section id="untagged_content">
<h3>Justifying untagged content</h3>
<p>Web browsers frequently have to deal with untagged, potentially mixed-script content.
The following are some implementation guidelines for designing a strategy to deal with such content.</p>
<ul>
Expand All @@ -298,8 +299,8 @@ <h3 id="untagged_content"><a href="#untagged_content">Justifying untagged conten
</li></ul>
</section>
</section>
<section>
<h2 id="endlinks"><a href="#endlinks">Further reading</a></h2>
<section id="endlinks">
<h2>Further reading</h2>
<aside class="section" id="survey"> </aside><script>document.getElementById('survey').innerHTML = g.survey</script>

<ul id="full-links">
Expand All @@ -314,7 +315,7 @@ <h2 id="endlinks"><a href="#endlinks">Further reading</a></h2>
</ul>
</section>

<footer id="thefooter"></footer><script type="text/javascript">document.getElementById('thefooter').innerHTML = g.bottomOfPage</script>
<script type="text/javascript">completePage()</script>
<footer id="thefooter"></footer><script>document.getElementById('thefooter').innerHTML = g.bottomOfPage</script>
<script>completePage()</script>
</body>
</html>

0 comments on commit 2cde04a

Please sign in to comment.