You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
7093 lines
220 KiB
7093 lines
220 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang=en>
|
|
<head><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
|
|
|
|
<title>CSS Text Level 3</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
|
|
<style type="text/css">
|
|
.egbidiwsaA,.egbidiwsbB,.egbidiwsaB,.egbidiwsbC
|
|
{ white-space:pre;font-size:80%;font-family:monospace; vertical-align:2px; margin:1px }
|
|
.egbidiwsaA { background:lime;padding:2px; }
|
|
.egbidiwsbB { border:2px solid blue }
|
|
.egbidiwsaB { background:yellow;border:2px dotted white }
|
|
.egbidiwsbC { border:2px dotted red }
|
|
|
|
.char { border: 1px dotted gray; }
|
|
.quarter { font-size: 25%; }
|
|
tt[lang="ja"] { font-family: "MS Gothic", "Osaka", monospace }
|
|
</style>
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1>CSS Text Level 3</h1>
|
|
|
|
<h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 1 September
|
|
2011</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-text-20110901/">http://www.w3.org/TR/2011/WD-css3-text-20110901/</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-text">http://www.w3.org/TR/css3-text</a>
|
|
|
|
<dt>Latest editor's draft:
|
|
|
|
<dd><a
|
|
href="http://dev.w3.org/csswg/css3-text/">http://dev.w3.org/csswg/css3-text/</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-text-20110412/">http://www.w3.org/TR/2011/WD-css3-text-20110412/</a>
|
|
|
|
<dt>Editors:
|
|
|
|
<dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
|
|
(Mozilla)
|
|
|
|
<dd><a href="mailto:kojiishi@gluesoft.co.jp">Koji Ishii</a> (Invited
|
|
Expert)
|
|
|
|
<dd><a href="mailto:murakami@antenna.co.jp">Shinyu Murakami</a> (<a
|
|
href="http://www.antenna.co.jp/">Antenna House</a>)
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2011 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p>This CSS3 module defines properties for text manipulation and specifies
|
|
their processing model. It covers line breaking, justification and
|
|
alignment, white space handling, text decoration and text transformation.
|
|
|
|
<h2 class="no-num no-toc" id=status>Status of This Document</h2>
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than work in progress.
|
|
|
|
<p>This CSS module has been produced as a combined effort of the <a
|
|
href="http://www.w3.org/International/Activity">W3C Internationalization
|
|
Activity</a>, and the <a href="http://www.w3.org/Style/Activity">Style
|
|
Activity</a> and is maintained by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. It also
|
|
includes contributions made by participants in the <a
|
|
href="http://www.w3.org/Style/XSL/Group/">XSL Working Group</a> (<a
|
|
href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.
|
|
|
|
<p><strong>Feedback on this draft should be posted to the (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a
|
|
href="mailto:www-style@w3.org">www-style@w3.org</a></strong> (see <a
|
|
href="http://www.w3.org/Mail/Request">instructions</a>) <strong>with
|
|
<kbd>[css3-text]</kbd> in the subject line.</strong> You are strongly
|
|
encouraged to complain if you see something stupid in this draft. The
|
|
editors will do their best to respond to all feedback.
|
|
|
|
<p><strong>If you have implemented properties from the <a
|
|
href="http://www.w3.org/TR/2003/CR-css3-text-20030514/">May 2003 CSS3 Text
|
|
CR</a></strong> <em>please</em> let us know so we can take that into
|
|
account as we redraft the spec. You can post to <a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
|
|
(public), post to the <a
|
|
href="http://lists.w3.org/Archives/Member/w3c-css-wg/">CSS WG mailing
|
|
list</a> (<a
|
|
href="http://cgi.w3.org/MemberAccess/AccessRequest">Member-restricted</a>),
|
|
or <a href="http://fantasai.inkedblade.net/contact">email fantasai
|
|
directly</a> (personal).
|
|
|
|
<p>The following features are at risk and may be cut from the spec during
|
|
its CR period if there are no (correct) implementations:
|
|
|
|
<ul>
|
|
<li>the <length> values of the ‘<a href="#tab-size0"><code
|
|
class=property>tab-size</code></a>’ property
|
|
|
|
<li>the ‘<a href="#hanging-punctuation0"><code
|
|
class=property>hanging-punctuation</code></a>’ property
|
|
|
|
<li>the percentage values of ‘<a href="#letter-spacing0"><code
|
|
class=property>letter-spacing</code></a>’ and ‘<a
|
|
href="#word-spacing0"><code class=property>word-spacing</code></a>’
|
|
|
|
|
|
<li>the ‘<code class=css>hyphenate-limit-*</code>’ properties
|
|
|
|
<li>the ‘<a href="#text-spacing"><code
|
|
class=property>text-spacing</code></a>’ property
|
|
|
|
<li>the ‘<a href="#text-decoration-skip0"><code
|
|
class=property>text-decoration-skip</code></a>’ property /
|
|
‘<code class=css>ink</code>’ value
|
|
|
|
<li>the ‘<a href="#text-emphasis-skip0"><code
|
|
class=property>text-emphasis-skip</code></a>’ property
|
|
|
|
<li><span class=issue>audit draft and add more here</span>
|
|
</ul>
|
|
|
|
<h2 class="no-num no-toc" id=contents>Table of Contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#intro"><span class=secno>1. </span> Introduction</a>
|
|
<ul class=toc>
|
|
<li><a href="#placement"><span class=secno>1.1. </span> Module
|
|
Interactions</a>
|
|
|
|
<li><a href="#values"><span class=secno>1.2. </span> Values</a>
|
|
|
|
<li><a href="#terms"><span class=secno>1.3. </span> Terminology</a>
|
|
</ul>
|
|
|
|
<li><a href="#transforming"><span class=secno>2. </span> Transforming
|
|
Text</a>
|
|
<ul class=toc>
|
|
<li><a href="#text-transform"><span class=secno>2.1. </span>
|
|
Transforming Text: the ‘<code
|
|
class=property>text-transform</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#white-space-processing"><span class=secno>3. </span> White
|
|
Space Processing</a>
|
|
<ul class=toc>
|
|
<li><a href="#white-space-collapsing"><span class=secno>3.1. </span>
|
|
White Space Collapsing: the ‘<code
|
|
class=property>text-space-collapse</code>’ property</a>
|
|
|
|
<li><a href="#tab-size"><span class=secno>3.2. </span> Tab Character
|
|
Size: the ‘<code class=property>tab-size</code>’
|
|
property</a>
|
|
|
|
<li><a href="#white-space-rules"><span class=secno>3.3. </span> The
|
|
White Space Processing Rules</a>
|
|
<ul class=toc>
|
|
<li><a href="#egbidiwscollapse"><span class=secno>3.3.1. </span>
|
|
Example of bidirectionality with white space collapsing</a>
|
|
|
|
<li><a href="#line-break-transform"><span class=secno>3.3.2. </span>
|
|
Line Feed Transformation Rules</a>
|
|
|
|
<li><a href="#white-space-summary"><span class=secno>3.3.3. </span>
|
|
Informative Summary of White Space Collapsing Effects</a>
|
|
</ul>
|
|
|
|
<li><a href="#white-space"><span class=secno>3.4. </span> White Space
|
|
and Text Wrapping Shorthand: the ‘<code
|
|
class=property>white-space</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#line-breaking"><span class=secno>4. </span> Line Breaking
|
|
and Word Boundaries</a>
|
|
<ul class=toc>
|
|
<li><a href="#line-break"><span class=secno>4.1. </span> Line Breaking
|
|
Strictness: the ‘<code class=property>line-break</code>’
|
|
property</a>
|
|
|
|
<li><a href="#word-break"><span class=secno>4.2. </span> Word Breaking
|
|
Rules: the ‘<code class=property>word-break</code>’
|
|
property</a>
|
|
</ul>
|
|
|
|
<li><a href="#hyphenation"><span class=secno>5. </span>Hyphenation</a>
|
|
<ul class=toc>
|
|
<li><a href="#hyphens"><span class=secno>5.1. </span>Hyphenation
|
|
Control: the ‘<code class=property>hyphens</code>’
|
|
property</a>
|
|
|
|
<li><a href="#hyphenate-character"><span class=secno>5.2. </span>
|
|
Hyphens: the ‘<code
|
|
class=property>hyphenate-character</code>’ property</a>
|
|
|
|
<li><a href="#hyphenate-size-limits"><span class=secno>5.3. </span>
|
|
Hyphenation Size Limit: the ‘<code
|
|
class=property>hyphenate-limit-zone</code>’ property</a>
|
|
|
|
<li><a href="#hyphenate-char-limits"><span class=secno>5.4. </span>
|
|
Hyphenation Character Limits: the ‘<code
|
|
class=property>hyphenate-limit-word</code>’ property</a>
|
|
|
|
<li><a href="#hyphenate-line-limits"><span class=secno>5.5. </span>
|
|
Hyphenation Line Limits: the ‘<code
|
|
class=property>hyphenate-limit-lines</code>’ and ‘<code
|
|
class=property>hyphenate-limit-last</code>’ properties</a>
|
|
</ul>
|
|
|
|
<li><a href="#wrapping"><span class=secno>6. </span> Text Wrapping</a>
|
|
<ul class=toc>
|
|
<li><a href="#text-wrap"><span class=secno>6.1. </span> Text Wrap
|
|
Settings: the ‘<code class=property>text-wrap</code>’
|
|
property</a>
|
|
<ul class=toc>
|
|
<li><a href="#example-avoid"><span class=secno>6.1.1. </span> Example
|
|
of using ‘<code class=css>text-wrap: avoid</code>’ in
|
|
presenting a footer</a>
|
|
</ul>
|
|
|
|
<li><a href="#overflow-wrap"><span class=secno>6.2. </span> Emergency
|
|
Wrapping: the ‘<code class=property>overflow-wrap</code>’
|
|
property</a>
|
|
</ul>
|
|
|
|
<li><a href="#justification"><span class=secno>7. </span> Alignment and
|
|
Justification</a>
|
|
<ul class=toc>
|
|
<li><a href="#text-align"><span class=secno>7.1. </span> Text Alignment:
|
|
the ‘<code class=property>text-align</code>’ property</a>
|
|
<ul class=toc>
|
|
<li><a href="#character-alignment"><span class=secno>7.1.1.
|
|
</span>Details on Character-based Alignment in a Table Column</a>
|
|
</ul>
|
|
|
|
<li><a href="#text-align-last"><span class=secno>7.2. </span> Last Line
|
|
Alignment: the ‘<code
|
|
class=property>text-align-last</code>’ property</a>
|
|
|
|
<li><a href="#text-justify"><span class=secno>7.3. </span> Justification
|
|
Method: the ‘<code class=property>text-justify</code>’
|
|
property</a>
|
|
</ul>
|
|
|
|
<li><a href="#spacing"><span class=secno>8. </span> Spacing</a>
|
|
<ul class=toc>
|
|
<li><a href="#word-spacing"><span class=secno>8.1. </span> Word Spacing:
|
|
the ‘<code class=property>word-spacing</code>’ property</a>
|
|
|
|
|
|
<li><a href="#letter-spacing"><span class=secno>8.2. </span> Tracking:
|
|
the ‘<code class=property>letter-spacing</code>’
|
|
property</a>
|
|
|
|
<li><a href="#text-spacing-prop"><span class=secno>8.3. </span>
|
|
Character Class Spacing: the ‘<code
|
|
class=property>text-spacing</code>’ property</a>
|
|
<ul class=toc>
|
|
<li><a href="#fullwidth-collapsing"><span class=secno>8.3.1. </span>
|
|
Fullwidth Punctuation Collapsing</a>
|
|
|
|
<li><a href="#text-spacing-classes"><span class=secno>8.3.2. </span>
|
|
Text Spacing Character Classes</a>
|
|
</ul>
|
|
</ul>
|
|
|
|
<li><a href="#edge-effects"><span class=secno>9. </span> Edge Effects</a>
|
|
<ul class=toc>
|
|
<li><a href="#text-indent"><span class=secno>9.1. </span> First Line
|
|
Indentation: the ‘<code class=property>text-indent</code>’
|
|
property</a>
|
|
|
|
<li><a href="#hanging-punctuation"><span class=secno>9.2. </span>
|
|
Hanging Punctuation: the ‘<code
|
|
class=property>hanging-punctuation</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#decoration"><span class=secno>10. </span> Text
|
|
Decoration</a>
|
|
<ul class=toc>
|
|
<li><a href="#line-decoration"><span class=secno>10.1. </span> Line
|
|
Decoration: Underline, Overline, and Strike-Through</a>
|
|
<ul class=toc>
|
|
<li><a href="#text-decoration-line"><span class=secno>10.1.1. </span>
|
|
Text Decoration Lines: the ‘<code
|
|
class=property>text-decoration-line</code>’ property</a>
|
|
|
|
<li><a href="#text-decoration-color"><span class=secno>10.1.2. </span>
|
|
Text Decoration Color: the ‘<code
|
|
class=property>text-decoration-color</code>’ property</a>
|
|
|
|
<li><a href="#text-decoration-style"><span class=secno>10.1.3. </span>
|
|
Text Decoration Style: the ‘<code
|
|
class=property>text-decoration-style</code>’ property</a>
|
|
|
|
<li><a href="#text-decoration"><span class=secno>10.1.4. </span> Text
|
|
Decoration Shorthand: the ‘<code
|
|
class=property>text-decoration</code>’ property</a>
|
|
|
|
<li><a href="#text-decoration-skip"><span class=secno>10.1.5. </span>
|
|
Text Decoration Line Continuity: the ‘<code
|
|
class=property>text-decoration-skip</code>’ property</a>
|
|
|
|
<li><a href="#text-underline-position"><span class=secno>10.1.6.
|
|
</span> Text Underline Position: the ‘<code
|
|
class=property>text-underline-position</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#emphasis-marks"><span class=secno>10.2. </span> Emphasis
|
|
Marks</a>
|
|
<ul class=toc>
|
|
<li><a href="#text-emphasis-style"><span class=secno>10.2.1. </span>
|
|
Emphasis Mark Style: the ‘<code
|
|
class=property>text-emphasis-style</code>’ property</a>
|
|
|
|
<li><a href="#text-emphasis-color"><span class=secno>10.2.2. </span>
|
|
Emphasis Mark Color: the ‘<code
|
|
class=property>text-emphasis-color</code>’ property</a>
|
|
|
|
<li><a href="#text-emphasis"><span class=secno>10.2.3. </span>
|
|
Emphasis Mark Shorthand: the ‘<code
|
|
class=property>text-emphasis</code>’ property</a>
|
|
|
|
<li><a href="#text-emphasis-position"><span class=secno>10.2.4.
|
|
</span> Emphasis Mark Position: the ‘<code
|
|
class=property>text-emphasis-position</code>’ property</a>
|
|
|
|
<li><a href="#text-emphasis-skip"><span class=secno>10.2.5. </span>
|
|
Emphasis Mark Skip: the ‘<code
|
|
class=property>text-emphasis-skip</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#text-shadow"><span class=secno>10.3. </span> Text Shadows:
|
|
the ‘<code class=property>text-shadow</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#conformance"><span class=secno>11. </span> Conformance</a>
|
|
<ul class=toc>
|
|
<li><a href="#conventions"><span class=secno>11.1. </span> Document
|
|
Conventions</a>
|
|
|
|
<li><a href="#conformance-classes"><span class=secno>11.2. </span>
|
|
Conformance Classes</a>
|
|
|
|
<li><a href="#partial"><span class=secno>11.3. </span> Partial
|
|
Implementations</a>
|
|
|
|
<li><a href="#experimental"><span class=secno>11.4. </span> Experimental
|
|
Implementations</a>
|
|
|
|
<li><a href="#testing"><span class=secno>11.5. </span>Non-Experimental
|
|
Implementations</a>
|
|
|
|
<li><a href="#cr-exit-criteria"><span class=secno>11.6. </span> CR Exit
|
|
Criteria</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#acknowledgements"> Appendix A:
|
|
Acknowledgements</a>
|
|
|
|
<li class=no-num><a href="#appendix-b-references">Appendix B:
|
|
References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-ref">Normative references</a>
|
|
|
|
<li class=no-num><a href="#informative-ref">Informative references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#changes">Appendix C: Changes</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#recent-changes"> Changes from the April 2011
|
|
CSS3 Text <abbr title="Working Draft">WD</abbr></a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#default-stylesheet">Appendix D: Default UA
|
|
Stylesheet</a>
|
|
|
|
<li class=no-num><a href="#script-groups">Appendix E: Scripts and
|
|
Spacing</a>
|
|
|
|
<li class=no-num><a href="#small-kana">Appendix F: Small Kana Mappings</a>
|
|
|
|
|
|
<li class=no-num><a
|
|
href="#appendix-g-text-processing-order-of-oper">Appendix G: Text
|
|
Processing Order of Operations</a>
|
|
|
|
<li class=no-num><a href="#appendix-h-full-property-index">Appendix H:
|
|
Full Property Index</a>
|
|
|
|
<li class=no-num><a href="#traditions">Appendix J: Cultural
|
|
Correlations</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=intro><span class=secno>1. </span> Introduction</h2>
|
|
|
|
<p>[document here]
|
|
|
|
<p class=issue>This draft describes features that are specific to certain
|
|
scripts. There is an ongoing discussion about where these features belong:
|
|
in existing CSS properties, in new CSS properties, or perhaps in other
|
|
specifications.
|
|
|
|
<h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
|
|
|
|
<p>This module replaces and extends the text-level features defined in <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> chapter 16.
|
|
|
|
<h3 id=values><span class=secno>1.2. </span> Values</h3>
|
|
|
|
<p>This specification follows the <a
|
|
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
|
|
definition conventions</a> from <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
|
|
this specification are defined in CSS Level 2 Revision 1 <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
|
|
modules may expand the definitions of these value types: for example <a
|
|
href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
|
|
when combined with this module, expands the definition of the
|
|
<color> value type as used in this specification.
|
|
|
|
<p>In addition to the property-specific values listed in their definitions,
|
|
all properties defined in this specification also accept the <a
|
|
href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
|
|
keyword as their property value. For readability it has not been repeated
|
|
explicitly.
|
|
|
|
<h3 id=terms><span class=secno>1.3. </span> Terminology</h3>
|
|
|
|
<p id=grapheme-cluster>A <dfn id=grapheme-cluster0>grapheme cluster</dfn>
|
|
is what a language user considers to be a character or a basic unit of the
|
|
script. The term is described in detail in the Unicode Technical Report:
|
|
Text Boundaries <a href="#UAX29"
|
|
rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a>. This specification uses the
|
|
<em>extended grapheme cluster</em> definition in <a href="#UAX29"
|
|
rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a> (not the <em>legacy grapheme
|
|
cluster</em> definition). The UA may further tailor the definition as
|
|
allowed by Unicode. Within this specification, the ambiguous term <dfn
|
|
id=character>character</dfn> is used as a friendlier synonym for <a
|
|
href="#grapheme-cluster0"><i>grapheme cluster</i></a>. See <a
|
|
href="http://dev.w3.org/csswg/css3-writing-modes/#character-properties">Characters
|
|
and Properties</a> for how to determine the Unicode properties of a
|
|
character.
|
|
|
|
<p id=letter>A <dfn id=letter0>letter</dfn> for the purpose of this
|
|
specification is a <a href="#character"><i>character</i></a> belonging to
|
|
one of the Letter or Number general categories in Unicode. <a
|
|
href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a>
|
|
|
|
<h2 id=transforming><span class=secno>2. </span> Transforming Text</h2>
|
|
|
|
<h3 id=text-transform><span class=secno>2.1. </span> <a name=caps-prop></a>
|
|
Transforming Text: the ‘<a href="#text-transform0"><code
|
|
class=property>text-transform</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-transform0>text-transform</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | [ [ capitalize | uppercase | lowercase ] || full-width ||
|
|
full-size-kana ]
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property transforms text for styling purposes. Values have the
|
|
following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=none title="text-transform:none">‘<code
|
|
class=css>none</code>’</dfn>
|
|
|
|
<dd>No effects.
|
|
|
|
<dt><dfn id=capitalize title="text-transform:capitalize">‘<code
|
|
class=css>capitalize</code>’</dfn>
|
|
|
|
<dd>Puts the first <a href="#character"><i>character</i></a> of each word
|
|
in titlecase; other characters are unaffected.
|
|
|
|
<dt><dfn id=uppercase title="text-transform:uppercase">‘<code
|
|
class=css>uppercase</code>’</dfn>
|
|
|
|
<dd>Puts all characters in uppercase.
|
|
|
|
<dt><dfn id=lowercase title="text-transform:lowercase">‘<code
|
|
class=css>lowercase</code>’</dfn>
|
|
|
|
<dd>Puts all characters in lowercase.
|
|
|
|
<dt><dfn id=full-width title="text-transform:full-width">‘<code
|
|
class=css>full-width</code>’</dfn>
|
|
|
|
<dd>Puts all characters in fullwidth form. If the character does not have
|
|
a corresponding fullwidth form, it is left as is. This value is typically
|
|
used to typeset Latin characters and digits like ideographic characters.
|
|
|
|
<dt><dfn id=full-size-kana
|
|
title="text-transform:full-size-kana">‘<code
|
|
class=css>full-size-kana</code>’</dfn>
|
|
|
|
<dd>Converts all small Kana characters to normal Kana. This value is
|
|
typically used for ruby annotation text, where all small Kana should be
|
|
drawn as large Kana.
|
|
</dl>
|
|
|
|
<p>The case mapping rules for the character repertoire specified by the
|
|
Unicode Standard can be found on the Unicode Consortium Web site <a
|
|
href="#UNICODE" rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>. The UA
|
|
must use the full case mappings for Unicode characters, including any
|
|
conditional casing rules, as defined in Default Case Algorithm section. If
|
|
(and only if) the content language of the element is known, then any
|
|
applicable language-specific rules must be used as well. (See <a
|
|
href="http://www.unicode.org/Public/UNIDATA/SpecialCasing.txt">SpecialCasing.txt</a>)
|
|
|
|
|
|
<p>The definition of "word" used for ‘<code
|
|
class=css>capitalize</code>’ is UA-dependent; <a href="#UAX29"
|
|
rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a> is suggested (but not
|
|
required) for determining such word boundaries. Authors should not expect
|
|
‘<code class=css>capitalize</code>’ to follow
|
|
language-specific titlecasing conventions (such as skipping articles in
|
|
English).
|
|
<!-- www-style notes that UAX29 won't work for 'Tis and similar, so
|
|
the UA might want to use UAX29 to split into words, but skip forward
|
|
past any starting non-letters (as an example of why UAX29 is not ideal) -->
|
|
|
|
|
|
<p>The definition of fullwidth and halfwidth forms can be found on the
|
|
Unicode consortium web site at <a href="#UAX11"
|
|
rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a>. The mapping to fullwidth
|
|
form is defined by taking code points with the <wide> tag in their
|
|
Decomposition_Mapping in <a href="#UAX44"
|
|
rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a> and mapping their
|
|
decomposition (minus the <wide> tag) back to the original code
|
|
point.
|
|
|
|
<p>The mappings for small Kana to normal Kana are defined in <a
|
|
href="#small-kana">Small Kana Mappings</a>.
|
|
|
|
<p>When multiple values are specified and therefore multiple
|
|
transformations need to be applied, they are applied in the following
|
|
order:
|
|
|
|
<ol>
|
|
<li>‘<code class=css>capitalize</code>’, ‘<code
|
|
class=css>uppercase</code>’, and ‘<code
|
|
class=css>lowercase</code>’
|
|
|
|
<li>‘<code class=css>full-width</code>’
|
|
|
|
<li>‘<code class=css>full-size-kana</code>’
|
|
</ol>
|
|
|
|
<p>Text transformation happens after <a href="#white-space-rules">white
|
|
space processing</a>, which means that ‘<code
|
|
class=css>full-width</code>’ transforms only preserved U+0020 spaces
|
|
to U+3000.
|
|
|
|
<div class=example>
|
|
<p>The following example converts the ASCII characters in abbreviations in
|
|
Japanese to their fullwidth variants so that they lay out and line break
|
|
like ideographs:
|
|
|
|
<pre>abbr:lang(ja) { text-transform: full-width; }</pre>
|
|
</div>
|
|
|
|
<p class=issue>All-caps text sometimes has special typographic
|
|
considerations. For example: Punctuation and number glyphs might be
|
|
adjusted for the higher "center of gravity" (see the <a
|
|
href="http://www.microsoft.com/typography/otspec/features_ae.htm#case">case</a>
|
|
feature in OpenType). Should we turn that on by default, as they suggest?
|
|
Or spacing might be adjusted for the increased visual weight of the glyphs
|
|
(see the <a
|
|
href="http://www.microsoft.com/typography/otspec/features_ae.htm#cpsp">cpsp</a>
|
|
feature in OpenType). Should we turn that on when ‘<a
|
|
href="#letter-spacing0"><code
|
|
class=property>letter-spacing</code></a>’ is ‘<code
|
|
class=css>normal</code>’?
|
|
|
|
<p class=issue>A more complicated problem is the <a
|
|
href="http://blogs.msdn.com/b/michkap/archive/2006/08/18/706383.aspx">greek
|
|
uppercasing rules</a> which actually alter the diacritics. How should we
|
|
handle that?
|
|
|
|
<p class=note>A future level of CSS may introduce the ability to create
|
|
custom mapping tables for less common text transforms, such as by
|
|
‘<a href="#text-transform0"><code
|
|
class=css>@text-transform</code></a>’ rule similar to ‘<code
|
|
class=css>@counter-style</code>’ from <a href="#CSS3LIST"
|
|
rel=biblioentry>[CSS3LIST]<!--{{CSS3LIST}}--></a>.
|
|
|
|
<h2 id=white-space-processing><span class=secno>3. </span> White Space
|
|
Processing</h2>
|
|
|
|
<p>The source text of a document often contains formatting that is not
|
|
relevant to the final rendering: for example, breaking the source into
|
|
segments (lines) for ease of editing or adding white space characters such
|
|
as tabs and spaces to indent the source code. CSS white space processing
|
|
allows the author to control interpretation of such formatting: to
|
|
preserve or collapse it away when rendering the document.
|
|
|
|
<p id=segment-normalization> In the document source, segments can be
|
|
delimited by carriage returns (U+000D), linefeeds (U+000A) or a
|
|
combination (U+000D U+000A), or by some other mechanism, such as the SGML
|
|
RECORD-START and RECORD-END tokens. If no segmentation rules are specified
|
|
for the document language, each line feed (U+000A), carriage return
|
|
(U+000D) and CRLF sequence (U+000D U+000A) in the text is considered a
|
|
segment break. (This default rule also applies to generated content.) In
|
|
CSS, each such segment break is treated as a single line feed character
|
|
(U+000A).
|
|
|
|
<p>White space processing in CSS interprets white space characters only for
|
|
rendering: it has no effect on the underlying document data.
|
|
|
|
<p class=note>Note that the document parser may have not only normalized
|
|
segment breaks, but also collapsed other space characters or otherwise
|
|
processed white space according to markup rules. Because CSS processing
|
|
occurs <em>after</em> the parsing stage, it is not possible to restore
|
|
these characters for styling. Therefore, some of the behavior specified
|
|
below can be affected by these limitations and may be user agent
|
|
dependent.
|
|
|
|
<p>Control characters (Unicode class Cc) other than tab (U+0009), line feed
|
|
(U+000A), space (U+0020), and the bidi formatting characters
|
|
(U+202<var>x</var>) should be rendered as invisible zero-width characters.
|
|
UAs may instead treat them as visible characters. (Note, however, that
|
|
this will usually result in them being rendered as missing glyphs.) <span
|
|
class=issue>What's the line-breaking behavior? Effects on joining? Can we
|
|
just copy the behavior of some zero-width Unicode character?</span>
|
|
|
|
<h3 id=white-space-collapsing><span class=secno>3.1. </span> White Space
|
|
Collapsing: the ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ property</h3>
|
|
|
|
<p class=issue>This section is still under discussion and may change in
|
|
future drafts.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-space-collapse>text-space-collapse</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>collapse | discard | [ [preserve | preserve-breaks] && [ trim-inner
|
|
|| consume-before || consume-after ]
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>collapse
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p class=issue>Need a property name
|
|
|
|
<p>This property declares whether and how <a
|
|
href="#white-space-processing">white space</a> inside the element is
|
|
collapsed. Values have the following meanings, which must be interpreted
|
|
according to the <a href="#white-space-rules">white space processing
|
|
rules</a>:
|
|
|
|
<dl>
|
|
<dt><dfn id=collapse0 title="white-space:collapse">‘<code
|
|
class=css>collapse</code>’</dfn>
|
|
|
|
<dd>This value directs user agents to collapse sequences of white space
|
|
into a single character (or <a href="#line-break-transform">in some
|
|
cases</a>, no character).
|
|
|
|
<dt><dfn id=preserve title="white-space:preserve">‘<code
|
|
class=css>preserve</code>’</dfn>
|
|
|
|
<dd>This value prevents user agents from collapsing sequences of white
|
|
space. Line feeds are preserved as forced line breaks.
|
|
|
|
<dt><dfn id=preserve-breaks
|
|
title="white-space:preserve-breaks">‘<code
|
|
class=css>preserve-breaks</code>’</dfn>
|
|
|
|
<dd>This value collapses white space as for ‘<code
|
|
class=css>collapse</code>’, but preserves line feeds as forced line
|
|
breaks.
|
|
|
|
<dt><dfn id=discard title="white-space:discard">‘<code
|
|
class=css>discard</code>’</dfn>
|
|
|
|
<dd>This value directs user agents to "discard" all white space in the
|
|
element.
|
|
|
|
<dt><dfn id=trim-inner title="white-space:trim-inner">‘<code
|
|
class=css>trim-inner</code>’</dfn>
|
|
|
|
<dd>For block containers this value directs UAs to discard all whitespace
|
|
at the beginning of the element up to and including the last line feed
|
|
before the first non-white-space character in the element as well as to
|
|
discard all white space at the end of the element starting with the first
|
|
line feed after the last non-white-space character in the element. For
|
|
other elements this value directs UAs to discard all whitespace at the
|
|
beginning and end of the element.
|
|
|
|
<dt><dfn id=consume-before title="white-space:consume-before">‘<code
|
|
class=css>consume-before</code>’</dfn>
|
|
|
|
<dd>This value directs the UA to collapse all collapsible whitespace
|
|
immediately before the start of the element.
|
|
|
|
<dt><dfn id=consume-after title="white-space:consume-after">‘<code
|
|
class=css>consume-after</code>’</dfn>
|
|
|
|
<dd>This value directs the UA to collapse all collapsible whitespace
|
|
immediately after the end of the element.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>The following style rules implement MathML's white space processing:
|
|
|
|
<pre>
|
|
<!-- -->@namespace m "http://www.w3.org/1998/Math/MathML";
|
|
<!-- -->m|* {
|
|
<!-- --> text-space-collapse: discard;
|
|
<!-- -->}
|
|
<!-- -->m|mi, m|mn, m|mo, m|ms, m|mtext {
|
|
<!-- --> text-space-collapse: trim-inner;
|
|
<!-- -->}</pre>
|
|
</div>
|
|
|
|
<p class=issue>It's been pointed out that ‘<code
|
|
class=css>trim-inner</code>’, ‘<code
|
|
class=css>consume-before</code>’, and ‘<code
|
|
class=css>consume-after</code>’ won't work well because ‘<a
|
|
href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ is inherited, meaning
|
|
that inserting a <span> or >div> would cause more white space to be
|
|
removed than otherwise.
|
|
|
|
<h3 id=tab-size><span class=secno>3.2. </span> Tab Character Size: the
|
|
‘<a href="#tab-size0"><code
|
|
class=property>tab-size</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=tab-size0>tab-size</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><integer> | <length>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>8
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block containers
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property determines the measure of the tab character (U+0009) when
|
|
rendered. Integers represent the measure in space characters (U+0020).
|
|
Negative integers are not allowed.
|
|
|
|
<h3 id=white-space-rules><span class=secno>3.3. </span> The White Space
|
|
Processing Rules</h3>
|
|
|
|
<p>White space processing affects only spaces (U+0020), tabs (U+0009), and
|
|
(<a href="#segment-normalization">post-normalization</a>) line feeds
|
|
(U+00A0).
|
|
|
|
<p>For each inline (including anonymous inlines) within an inline
|
|
formatting context, white space characters are handled as follows,
|
|
ignoring bidi formatting characters as if they were not there:
|
|
|
|
<ul>
|
|
<li id=collapse>
|
|
<p>If ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ is set to
|
|
‘<code class=css>collapse</code>’ or ‘<code
|
|
class=css>preserve-breaks</code>’, white space characters are
|
|
considered <dfn id=collapsible>collapsible</dfn> and are processed by
|
|
performing the following steps:</p>
|
|
|
|
<ol>
|
|
<li>All spaces and tabs immediately preceding or following a line feed
|
|
character are removed.
|
|
|
|
<li>If ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ is not
|
|
‘<code class=css>preserve-breaks</code>’, line feed
|
|
characters are transformed for rendering according to the <a
|
|
href="#line-break-transform">line feed transformation rules</a>.
|
|
|
|
<li>Every tab is converted to a space (U+0020).
|
|
|
|
<li>Any space immediately following another collapsible space
|
|
—even one outside the boundary of the inline—is removed.
|
|
However, if removing this space would eliminate a line breaking
|
|
opportunity in the text, that opportunity is still considered to exist.
|
|
|
|
<li>A collapsible space immediately preceding an element with
|
|
‘<code class=css>consume-before</code>’ is removed. Such
|
|
removed spaces do not indicate a line breaking opportunity in the text.
|
|
|
|
|
|
<li>Any collapsible spaces after the end of an element with ‘<code
|
|
class=css>consume-after</code>’ are removed. Such removed spaces
|
|
do not indicate a line breaking opportunity in the text.
|
|
</ol>
|
|
|
|
<li>
|
|
<p>If ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ is set to
|
|
‘<code class=css>preserve</code>’, any sequence of spaces
|
|
unbroken by an element boundary is treated as a sequence of non-breaking
|
|
spaces. However, a line breaking opportunity exists at the end of the
|
|
sequence.
|
|
|
|
<li>
|
|
<p>If ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ is set to
|
|
‘<code class=css>discard</code>’, the first white space
|
|
character in every white space sequence is converted to a zero width
|
|
non-joiner (U+200C) and the rest of the sequence is removed.</p>
|
|
</ul>
|
|
|
|
<p>Then, the entire block is rendered. Inlines are laid out, taking bidi
|
|
reordering into account, and wrapping as specified by the ‘<a
|
|
href="#text-wrap0"><code class=property>text-wrap</code></a>’
|
|
property.
|
|
|
|
<p>As each line is laid out,
|
|
|
|
<ol>
|
|
<li>A sequence of collapsible spaces at the beginning of a line is
|
|
removed.
|
|
|
|
<li>Each tab is rendered as a horizontal shift that lines up the start
|
|
edge of the next glyph with the next tab stop. Tab stops occur at points
|
|
that are multiples of the width of a space (U+0020) rendered in the
|
|
block's font from the block's starting content edge. How many spaces is
|
|
given by the ‘<a href="#tab-size0"><code
|
|
class=property>tab-size</code></a>’ property.
|
|
|
|
<li>A sequence of collapsible spaces at the end of a line is removed.
|
|
|
|
<li>If spaces or tabs at the end of a line are non-collapsible but have
|
|
‘<a href="#text-wrap0"><code
|
|
class=property>text-wrap</code></a>’ set to ‘<code
|
|
class=property>normal</code>’ or ‘<code
|
|
class=property>avoid</code>’ the UA may visually collapse their
|
|
character advance widths.
|
|
</ol>
|
|
|
|
<p>White space that was not removed during the white space processing steps
|
|
is called <dfn id=preserved>preserved</dfn> white space.
|
|
|
|
<div class=example>
|
|
<h4 id=egbidiwscollapse><span class=secno>3.3.1. </span> Example of
|
|
bidirectionality with white space collapsing</h4>
|
|
|
|
<p>Consider the following markup fragment, taking special note of spaces
|
|
(with varied backgrounds and borders for emphasis and identification):</p>
|
|
|
|
<pre><code><ltr>A<span class=egbidiwsaA> </span><rtl><span class=egbidiwsbB> </span>B<span class=egbidiwsaB> </span></rtl><span class=egbidiwsbC> </span>C</ltr></code></pre>
|
|
|
|
<p>where the <code><ltr></code> element represents a left-to-right
|
|
embedding and the <code><rtl></code> element represents a
|
|
right-to-left embedding. If the ‘<a
|
|
href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ property is set to
|
|
‘<code class=css>collapse</code>’, the above processing model
|
|
would result in the following:</p>
|
|
|
|
<ul style="line-height:1.3">
|
|
<li>The space before the B (<span class=egbidiwsbB> </span>) would
|
|
collapse with the space after the A (<span
|
|
class=egbidiwsaA> </span>).
|
|
|
|
<li>The space before the C (<span class=egbidiwsbC> </span>) would
|
|
collapse with the space after the B (<span
|
|
class=egbidiwsaB> </span>).
|
|
</ul>
|
|
|
|
<p>This would leave two spaces, one after the A in the left-to-right
|
|
embedding level, and one after the B in the right-to-left embedding
|
|
level. This is then ordered according to the Unicode bidirectional
|
|
algorithm, with the end result being:</p>
|
|
|
|
<pre>A<span class=egbidiwsaA> </span><span class=egbidiwsaB> </span>BC</pre>
|
|
|
|
<p>Note that there are two spaces between A and B, and none between B and
|
|
C. This is best avoided by putting spaces outside the element instead of
|
|
just inside the opening and closing tags and, where practical, by relying
|
|
on implicit bidirectionality instead of explicit embedding levels.</p>
|
|
</div>
|
|
|
|
<h4 id=line-break-transform><span class=secno>3.3.2. </span> Line Feed
|
|
Transformation Rules</h4>
|
|
|
|
<p>When line feeds are <a href="#collapse">collapsible</a>, they are either
|
|
transformed into a space (U+0020) or removed depending on the context
|
|
before and after the line break.
|
|
|
|
<p class=note>Note that the white space processing rules have already
|
|
removed any tabs and spaces after the line feed before these checks take
|
|
place.
|
|
|
|
<ul>
|
|
<li>If the character immediately before or immediately after the line feed
|
|
is the zero width space character (U+200B), then the line feed is
|
|
removed.
|
|
|
|
<li>Otherwise, if the East Asian Width property <a href="#UAX11"
|
|
rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a> of both the character before
|
|
and after the line feed is F, W, or H (not A), and neither side is
|
|
Hangul, then the line feed is removed.
|
|
|
|
<li>Otherwise, the line feed is converted to a space (U+0020).
|
|
</ul>
|
|
|
|
<p class=issue>Comments on how well this would work in practice would be
|
|
very much appreciated, particularly from people who work with Thai and
|
|
similar scripts.
|
|
|
|
<h4 id=white-space-summary><span class=secno>3.3.3. </span> Informative
|
|
Summary of White Space Collapsing Effects</h4>
|
|
|
|
<ul>
|
|
<li>Consecutive white space collapses into a single space.
|
|
|
|
<li>A sequence of newlines and other white space between two Chinese,
|
|
Japanese, or Yi characters collapses into nothing.
|
|
|
|
<li>A zero width space before or after a white space sequence containing a
|
|
newline causes the entire sequence of white space to collapse into a zero
|
|
width space.
|
|
</ul>
|
|
|
|
<h3 id=white-space><span class=secno>3.4. </span> White Space and Text
|
|
Wrapping Shorthand: the ‘<a href="#white-space0"><code
|
|
class=property>white-space</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=white-space0>white-space</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>normal | pre | nowrap | pre-wrap | pre-line
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>not defined for shorthand properties
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>The ‘<a href="#white-space0"><code
|
|
class=property>white-space</code></a>’ property is a shorthand for
|
|
the ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ and ‘<a
|
|
href="#text-wrap0"><code class=property>text-wrap</code></a>’
|
|
properties. Not all combinations are represented. Values have the
|
|
following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=normal title="white-space:normal">‘<code
|
|
class=css>normal</code>’</dfn>
|
|
|
|
<dd>Sets ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ to ‘<code
|
|
class=css>collapse</code>’ and ‘<a href="#text-wrap0"><code
|
|
class=property>text-wrap</code></a>’ to ‘<code
|
|
class=css>normal</code>’
|
|
|
|
<dt><dfn id=pre title="white-space:pre">‘<code
|
|
class=css>pre</code>’</dfn>
|
|
|
|
<dd>Sets ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ to ‘<code
|
|
class=css>preserve</code>’ and ‘<a href="#text-wrap0"><code
|
|
class=property>text-wrap</code></a>’ to ‘<code
|
|
class=css>none</code>’
|
|
|
|
<dt><dfn id=nowrap title="white-space:nowrap">‘<code
|
|
class=css>nowrap</code>’</dfn>
|
|
|
|
<dd>Sets ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ to ‘<code
|
|
class=css>collapse</code>’ and ‘<a href="#text-wrap0"><code
|
|
class=property>text-wrap</code></a>’ to ‘<code
|
|
class=css>none</code>’
|
|
|
|
<dt><dfn id=pre-wrap title="white-space:pre-wrap">‘<code
|
|
class=css>pre-wrap</code>’</dfn>
|
|
|
|
<dd>Sets ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ to ‘<code
|
|
class=css>preserve</code>’ and ‘<a href="#text-wrap0"><code
|
|
class=property>text-wrap</code></a>’ to ‘<code
|
|
class=css>normal</code>’
|
|
|
|
<dt><dfn id=pre-line title="white-space:pre-line">‘<code
|
|
class=css>pre-line</code>’</dfn>
|
|
|
|
<dd>Sets ‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’ to ‘<code
|
|
class=css>preserve-breaks</code>’ and ‘<a
|
|
href="#text-wrap0"><code class=property>text-wrap</code></a>’ to
|
|
‘<code class=css>normal</code>’
|
|
</dl>
|
|
|
|
<p>The following informative table summarizes the behavior of various
|
|
‘<a href="#white-space0"><code
|
|
class=property>white-space</code></a>’ values:
|
|
|
|
<table class=data>
|
|
<colgroup class=header></colgroup>
|
|
|
|
<colgroup span=3></colgroup>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
|
|
<th>New Lines
|
|
|
|
<th>Spaces and Tabs
|
|
|
|
<th>Text Wrapping
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>normal
|
|
|
|
<td>Collapse
|
|
|
|
<td>Collapse
|
|
|
|
<td>Wrap
|
|
|
|
<tr>
|
|
<th>pre
|
|
|
|
<td>Preserve
|
|
|
|
<td>Preserve
|
|
|
|
<td>No wrap
|
|
|
|
<tr>
|
|
<th>nowrap
|
|
|
|
<td>Collapse
|
|
|
|
<td>Collapse
|
|
|
|
<td>No wrap
|
|
|
|
<tr>
|
|
<th>pre-wrap
|
|
|
|
<td>Preserve
|
|
|
|
<td>Preserve
|
|
|
|
<td>Wrap
|
|
|
|
<tr>
|
|
<th>pre-line
|
|
|
|
<td>Preserve
|
|
|
|
<td>Collapse
|
|
|
|
<td>Wrap
|
|
</table>
|
|
|
|
<h2 id=line-breaking><span class=secno>4. </span> Line Breaking and Word
|
|
Boundaries</h2>
|
|
|
|
<p>In most writing systems, in the absence of hyphenation a line break
|
|
occurs only at word boundaries. Many writing systems use spaces or
|
|
punctuation to explicitly separate words, and line break opportunities can
|
|
be identified by these characters. Scripts such as Thai, Lao, and Khmer,
|
|
however, do not use spaces or punctuation to separate words. Although the
|
|
zero width space (U+200B) can be used as an explicit word delimiter in
|
|
these scripts, this practice is not common. As a result, a lexical
|
|
resource is needed to correctly identify break points in such texts.
|
|
|
|
<p>In several other writing systems, (including Chinese, Japanese, Yi, and
|
|
sometimes also Korean) a line break opportunity is based on character
|
|
boundaries, not word boundaries. In these systems a line can break
|
|
anywhere <em>except</em> between certain character combinations.
|
|
Additionally the level of strictness in these restrictions can vary with
|
|
the typesetting style.
|
|
|
|
<p>CSS does not fully define where line breaking opportunities occur,
|
|
however some controls are provided to distinguish common variations.
|
|
|
|
<p class=note>Further information on line breaking conventions can be found
|
|
in <a href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> and <a
|
|
href="#JIS4051" rel=biblioentry>[JIS4051]<!--{{JIS4051}}--></a> for
|
|
Japanese, <a href="#ZHMARK" rel=biblioentry>[ZHMARK]<!--{{ZHMARK}}--></a>
|
|
for Chinese, and in <a href="#UAX14"
|
|
rel=biblioentry>[UAX14]<!--{{!UAX14}}--></a> for all scripts in Unicode.
|
|
<!-- The CSS Working Group notes that although UAX 14 contains a wealth of
|
|
information about line breaking conventions, a literal implementation
|
|
of its algorithm has been found to be inadequate in multiple situations. -->
|
|
|
|
<p class=issue>Any guidance for appropriate references here would be much
|
|
appreciated.
|
|
|
|
<p class=issue>Information on line-breaking in the absence of dictionaries:
|
|
<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2011Feb/0126.html">for
|
|
Thai</a>
|
|
|
|
<p>Floated and absolutely-positioned elements do not introduce a line
|
|
breaking opportunity. The line breaking behavior of a replaced element is
|
|
equivalent to that of a Latin character.
|
|
|
|
<p class=issue>It is not clear whether this section handles Southeast Asian
|
|
scripts well. Additionally, some guidance should be provided on how to
|
|
break or not break Southeast Asian in the absence of a dictionary.
|
|
|
|
<h3 id=line-break><span class=secno>4.1. </span> Line Breaking Strictness:
|
|
the ‘<a href="#line-break0"><code
|
|
class=property>line-break</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=line-break0>line-break</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>auto | loose | normal | strict
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies the strictness of line-breaking rules applied
|
|
within an element: particularly how line-breaking interacts with
|
|
punctuation. Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=auto title="line-break:auto">‘<code
|
|
class=css>auto</code>’</dfn>
|
|
|
|
<dd>The UA determines the set of line-breaking restrictions to use, and it
|
|
may vary the restrictions based on the length of the line; e.g., use a
|
|
less restrictive set of line-break rules for short lines.
|
|
|
|
<dt><dfn id=loose title="line-break:loose">‘<code
|
|
class=css>loose</code>’</dfn>
|
|
|
|
<dd>Breaks text using the least restrictive set of line-breaking rules.
|
|
Typically used for short lines, such as in newspapers.
|
|
|
|
<dt><dfn id=normal0 title="line-break:normal">‘<code
|
|
class=css>normal</code>’</dfn>
|
|
|
|
<dd>Breaks text using the most common set of line-breaking rules.
|
|
|
|
<dt><dfn id=strict title="line-break:strict">‘<code
|
|
class=css>strict</code>’</dfn>
|
|
|
|
<dd>Breaks text using the most stringent set of line-breaking rules.
|
|
</dl>
|
|
|
|
<p>CSS distinguishes between three levels of strictness in the rules for
|
|
implicit line breaking. The precise set of rules in effect for each level
|
|
is up to the UA and should follow language conventions. However, this
|
|
specification does recommend that:
|
|
|
|
<ul>
|
|
<li>Following breaks be forbidden in ‘<code
|
|
class=css>strict</code>’ line breaking and allowed in ‘<code
|
|
class=css>normal</code>’ and ‘<code
|
|
class=css>loose</code>’:
|
|
<ul>
|
|
<li>breaks before Japanese <a href="#small-kana">small kana</a>
|
|
|
|
<li>breaks before the Katakana-Hiragana prolonged sound mark:
|
|
ー U+30FC
|
|
</ul>
|
|
If the language is known to be Chinese or Japanese, then additionally:
|
|
<ul>
|
|
<li>breaks before before hyphens:<br>
|
|
‐ U+2010, – U+2013, 〜 U+301C,
|
|
゠ U+30A0
|
|
</ul>
|
|
|
|
<li>Following breaks be forbidden in ‘<code
|
|
class=css>normal</code>’ and ‘<code
|
|
class=css>strict</code>’ line breaking and allowed in ‘<code
|
|
class=css>loose</code>’:
|
|
<ul>
|
|
<li>breaks before iteration marks:<br>
|
|
々 U+3005, 〻 U+303B, ゝ U+309D,
|
|
ゞ U+309E, ヽ U+30FD, ヾ U+30FE
|
|
|
|
<li>breaks between some inseparable characters:<br>
|
|
‥ U+2025, … U+2026
|
|
</ul>
|
|
If the language is known to be Chinese or Japanese, then additionally:
|
|
<ul>
|
|
<li>breaks before certain centered punctuation marks:<br>
|
|
: U+003A, ; U+003B, ・ U+30FB,
|
|
： U+FF1A, ； U+FF1B, ･ U+FF65,
|
|
! U+0021, ? U+003F, ‼ U+203C,
|
|
⁇ U+2047, ⁈ U+2048, ⁉ U+2049,
|
|
！ U+FF01, ？ U+FF1F
|
|
|
|
<li>breaks before postfixes:<br>
|
|
% U+0025, ¢ U+00A2, ° U+00B0,
|
|
‰ U+2030, ′ U+2032, ″ U+2033,
|
|
℃ U+2103, ％ U+FF05, ￠ U+FFE0
|
|
|
|
<li>breaks after prefixes:<br>
|
|
$ U+0024, £ U+00A3, ¥ U+00A5,
|
|
€ U+20AC, № U+2116, ＄ U+FF04,
|
|
￡ U+FFE1, ￥ U+FFE5
|
|
</ul>
|
|
</ul>
|
|
|
|
<p class=note>In CSS3 no distinction is made among the levels of strictness
|
|
in non-CJK text: only CJK codepoints are affected, unless the text is
|
|
marked as Chinese or Japanese, in which case some additional common
|
|
codepoints are affected. However a future level of CSS may add behaviors
|
|
affecting non-CJK text.
|
|
|
|
<p>Support for this property is <em>optional</em>. It is recommended for
|
|
UAs that wish to support CJK typography and strongly recommended for UAs
|
|
in the Japanese market.
|
|
|
|
<p class=note>The CSSWG recognizes that in a future edition of the
|
|
specification finer control over line breaking may be necessary to satisfy
|
|
high-end publishing requirements.
|
|
|
|
<h3 id=word-break><span class=secno>4.2. </span> Word Breaking Rules: the
|
|
‘<a href="#word-break0"><code
|
|
class=property>word-break</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=word-break0>word-break</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>normal | keep-all | break-all
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies line break opportunities within words. Values
|
|
have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=normal1 title="word-break:normal">‘<code
|
|
class=css>normal</code>’</dfn>
|
|
|
|
<dd>Break lines according to their usual rules.
|
|
|
|
<dt><dfn id=break-all title="word-break:break-all">‘<code
|
|
class=css>break-all</code>’</dfn>
|
|
|
|
<dd>Lines may break between any two characters within words. Hyphenation
|
|
is not applied. This option is used mostly in a context where the text is
|
|
predominantly using CJK characters with few non-CJK excerpts and it is
|
|
desired that the text be better distributed on each line.
|
|
|
|
<dt><dfn id=keep-all title="word-break:keep-all">‘<code
|
|
class=css>keep-all</code>’</dfn>
|
|
|
|
<dd>Lines may break only at <a href="#word-separator">word separators</a>
|
|
and other explicit break opportunities. Otherwise this option is
|
|
equivalent to ‘<code class=css>normal</code>’. This option is
|
|
mostly used where the presence of word separator characters still creates
|
|
line-breaking opportunities, as in Korean.
|
|
</dl>
|
|
|
|
<p>When shaping scripts such as Arabic are allowed to break within words
|
|
due to ‘<code class=css>break-all</code>’, the characters must
|
|
still be shaped as if the word were not broken.
|
|
|
|
<h2 id=hyphenation><span class=secno>5. </span>Hyphenation</h2>
|
|
|
|
<p>Hyphenation allows the controlled splitting of words to improve the
|
|
layout of paragraphs. CSS3 Text does not define the exact rules for
|
|
hyphenation, but defines six properties and an at-rule that influence
|
|
hyphenation.
|
|
|
|
<p>Whether hyphenation is applied can controlled with the ‘<a
|
|
href="#hyphens0"><code class=property>hyphens</code></a>’ property.
|
|
|
|
<p>The following author controls are not required to be supported for the
|
|
UA to claim conformance to CSS Text Level 3:
|
|
|
|
<ul>
|
|
<li>‘<a href="#hyphenate-limit-zone"><code
|
|
class=property>hyphenate-limit-zone</code></a>’
|
|
|
|
<li>‘<a href="#hyphenate-limit-chars"><code
|
|
class=property>hyphenate-limit-chars</code></a>’
|
|
|
|
<li>‘<a href="#hyphenate-limit-lines"><code
|
|
class=property>hyphenate-limit-lines</code></a>’
|
|
</ul>
|
|
|
|
<p>Nonetheless, UAs are strongly encouraged to optimize their line-breaking
|
|
implementation to choose good break points and appropriate hyphenation
|
|
points.
|
|
|
|
<p class=note>These controls are optional because for a low-end
|
|
implementation of hyphenation, they are not critical enough; and for a
|
|
high-end implementation of paragraph breaking (such as in T<span
|
|
style="font-variant: small-caps">e</span>χ) they are not considered
|
|
especially useful.
|
|
|
|
<p>Hyphenation opportunities are not considered when calculating
|
|
‘<code class=css>min-content</code>’ intrinsic sizes.
|
|
|
|
<h3 id=hyphens><span class=secno>5.1. </span>Hyphenation Control: the
|
|
‘<a href="#hyphens0"><code class=property>hyphens</code></a>’
|
|
property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=hyphens0>hyphens</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | manual | auto
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>manual
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property controls whether hyphenation is allowed to create more
|
|
break opportunities within a line of text. Values have the following
|
|
meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=none0 title="hyphens:none">‘<code
|
|
class=css>none</code>’</dfn>
|
|
|
|
<dd>Words are not broken at line breaks, even if characters inside the
|
|
word suggest line break points.
|
|
|
|
<dt><dfn id=manual title="hyphens:manual">‘<code
|
|
class=css>manual</code>’</dfn>
|
|
|
|
<dd>Words are only broken at line breaks where there are characters inside
|
|
the word that suggest line break opportunities. Characters can be
|
|
explicit or conditional.
|
|
<div class=example>
|
|
<p>In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an
|
|
explicit hyphen. Unicode Standard Annex #14 describes the <a
|
|
href="http://unicode.org/reports/tr14/#SoftHyphen">role of soft hyphens
|
|
in</a> Unicode line breaking. <a href="#UAX14"
|
|
rel=biblioentry>[UAX14]<!--{{!UAX14}}--></a>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In HTML, &shy; represents the soft hyphen character which
|
|
suggests a line break opportunity.
|
|
|
|
<pre>ex&shy;ample</pre>
|
|
</div>
|
|
|
|
<dt><dfn id=auto0 title="hyphens:auto">‘<code
|
|
class=css>auto</code>’</dfn>
|
|
|
|
<dd>Words can be broken at appropriate hyphenation points either as
|
|
determined by hyphenation characters inside the word or as determined
|
|
automatically by a language-appropriate hyphenation resource (such as
|
|
those provided via ‘<code
|
|
class=css>@hyphenation-resource</code>’). Conditional hyphenation
|
|
characters inside a word, if present, take priority over automatic
|
|
resources when determining hyphenation points within the word.
|
|
</dl>
|
|
|
|
<p>Correct automatic hyphenation requires a hyphenation resource
|
|
appropriate to the language of the text being broken. The UA is therefore
|
|
only required to automatically hyphenate text for which the author has
|
|
declared a language (e.g. via HTML <code>lang</code> or XML
|
|
<code>xml:lang</code>) and for which it has an appropriate hyphenation
|
|
resource.
|
|
|
|
<p>When shaping scripts such as Arabic are allowed to break within words
|
|
due to hyphenation, the characters must still be shaped as if the word
|
|
were not broken.
|
|
|
|
<h3 id=hyphenate-character><span class=secno>5.2. </span> Hyphens: the
|
|
‘<a href="#hyphenate-character0"><code
|
|
class=property>hyphenate-character</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=hyphenate-character0>hyphenate-character</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>auto | <string>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies strings that are shown between parts of
|
|
hyphenated words. The ‘<code class=property>auto</code>’ value
|
|
means that the user agent should find an appropriate value. If a string is
|
|
specified, it appears at the end of the line before a hyphenation break.
|
|
|
|
<div class=example>
|
|
<p>In Latin scripts, the hyphen character (U+2010) is often used to
|
|
indicate that a word has been split. Normally, it will not be necessary
|
|
to set it explicitly. However, this can easily be done:
|
|
|
|
<pre>article { hyphenate-character: "\2010" }</pre>
|
|
</div>
|
|
|
|
<p class=note>Both hyphens triggered by automatic hyphenation and hyphens
|
|
triggered by soft hyphens are rendered according to ‘<a
|
|
href="#hyphenate-character0"><code
|
|
class=property>hyphenate-character</code></a>’.
|
|
|
|
<p class=issue>Can we point to CLDR for hyphenation character data?
|
|
|
|
<h3 id=hyphenate-size-limits><span class=secno>5.3. </span> Hyphenation
|
|
Size Limit: the ‘<a href="#hyphenate-limit-zone"><code
|
|
class=property>hyphenate-limit-zone</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=hyphenate-limit-zone>hyphenate-limit-zone</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><percentage> | <length>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block containers
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>refers to width of the line box
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p class=issue>Is ‘<a href="#hyphenate-limit-zone"><code
|
|
class=property>hyphenate-limit-zone</code></a>’ a good name?
|
|
Comments/suggestions?
|
|
|
|
<p>This property specifies the maximum amount of unfilled space (before
|
|
justification) that may be left in the line box before hyphenation is
|
|
triggered to pull part of a word from the next line back up into the
|
|
current line.
|
|
|
|
<h3 id=hyphenate-char-limits><span class=secno>5.4. </span> Hyphenation
|
|
Character Limits: the ‘<code
|
|
class=property>hyphenate-limit-word</code>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=hyphenate-limit-chars>hyphenate-limit-chars</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>auto | <integer>{1,3}
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies the minimum number of characters in a hyphenated
|
|
word. If the word does not meet the required minimum number of characters
|
|
in the word / before the hyphen / after the hyphen, then the word must not
|
|
be hyphenated. Nonspacing combining marks (<span class=issue>Unicode
|
|
class</span>) and intra-word punctuation (Unicode classes P*) do not count
|
|
towards the minimum.
|
|
|
|
<p>If three values are specified, the first value is the required minimum
|
|
for the total characters in a word, the second value is the minimum for
|
|
characters before the hyphenation point, and the third value is the
|
|
minimum for characters after the hyphenation point. If the third value is
|
|
missing, it is the same as the second. If the second value is missing,
|
|
then it is ‘<code class=css>auto</code>’. The ‘<code
|
|
class=css>auto</code>’ value means that the UA chooses a value that
|
|
adapts to the current layout.
|
|
|
|
<p class=note>Unless the UA is able to calculate a better value, it is
|
|
suggested that ‘<code class=css>auto</code>’ means 2 for
|
|
before and after, and 5 for the word total.
|
|
|
|
<div class=example>
|
|
<p>In the example below, the minimum size of a hyphenated word is left to
|
|
the UA (which means it may vary depending on the language, the length of
|
|
the line, or other factors), but the minimum number of characters before
|
|
and after the hyphenation point is set to 3.
|
|
|
|
<pre>p { hyphenate-limit-chars: auto 3; }</pre>
|
|
</div>
|
|
|
|
<h3 id=hyphenate-line-limits><span class=secno>5.5. </span> Hyphenation
|
|
Line Limits: the ‘<a href="#hyphenate-limit-lines"><code
|
|
class=property>hyphenate-limit-lines</code></a>’ and ‘<a
|
|
href="#hyphenate-limit-last"><code
|
|
class=property>hyphenate-limit-last</code></a>’ properties</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=hyphenate-limit-lines>hyphenate-limit-lines</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>no-limit | <integer>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>no-limit
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block containers
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property indicates the maximum number of successive hyphenated
|
|
lines in an element. The ‘<code class=css>no-limit</code>’
|
|
value means that there is no limit.
|
|
|
|
<p>In some cases, user agents may not be able to honor the specified value.
|
|
(See ‘<a href="#overflow-wrap0"><code
|
|
class=property>overflow-wrap</code></a>’.) It is not defined whether
|
|
hyphenation introduced by such emergency breaking influences nearby
|
|
hyphenation points.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=hyphenate-limit-last>hyphenate-limit-last</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | always | column | page | spread
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block containers
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property indicates hyphenation behavior at the end of elements,
|
|
column, pages and spreads. A spread is a set of two pages that are visible
|
|
to the reader at the same time. Values are:
|
|
|
|
<dl>
|
|
<dt><dfn id=none1>‘<code class=css>none</code>’</dfn>
|
|
|
|
<dd>No restrictions imposed.
|
|
|
|
<dt><dfn id=always>‘<code class=css>always</code>’</dfn>
|
|
|
|
<dd>The last full line of the element, or the last line before any column,
|
|
page, or spread break inside the element should not be hyphenated.
|
|
|
|
<dt><dfn id=column>‘<code class=css>column</code>’</dfn>
|
|
|
|
<dd>The last line before any column, page, or spread break inside the
|
|
element should not be hyphenated.
|
|
|
|
<dt><dfn id=page>‘<code class=css>page</code>’</dfn>
|
|
|
|
<dd>The last line before page or spread break inside the element should
|
|
not be hyphenated.
|
|
|
|
<dt><dfn id=spread>‘<code class=css>spread</code>’</dfn>
|
|
|
|
<dd>The last line before any spread break inside the element should not be
|
|
hyphenated.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
<!-- -->p { hyphenate-limit-last: always }
|
|
<!-- -->div.chapter { hyphenate-limit-last: spread }</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>A paragraph may be formatted like this when ‘<code
|
|
class=css>hyphenate-limit-last: none</code>’ is set:
|
|
|
|
<pre>
|
|
<!-- -->This is just a
|
|
<!-- -->simple example
|
|
<!-- -->to show Antarc-
|
|
<!-- -->tica.
|
|
</pre>
|
|
|
|
<p>With ‘<code class=css>hyphenate-limit-last: always</code>’
|
|
one would get:
|
|
|
|
<pre>
|
|
<!-- -->This is just a
|
|
<!-- -->simple example
|
|
<!-- -->to show
|
|
<!-- -->Antarctica.
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=wrapping><span class=secno>6. </span> Text Wrapping</h2>
|
|
|
|
<p>Text wrapping is controlled by the ‘<a href="#text-wrap0"><code
|
|
class=property>text-wrap</code></a>’ and ‘<a
|
|
href="#overflow-wrap0"><code
|
|
class=property>overflow-wrap</code></a>’ properties:
|
|
|
|
<h3 id=text-wrap><span class=secno>6.1. </span> Text Wrap Settings: the
|
|
‘<a href="#text-wrap0"><code
|
|
class=property>text-wrap</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-wrap0>text-wrap</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>normal | none | avoid
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies the mode for text wrapping. Possible values:
|
|
|
|
<dl>
|
|
<dt><dfn id=normal2 title="text-wrap:normal">‘<code
|
|
class=css>normal</code>’</dfn>
|
|
|
|
<dd>Lines may break at allowed break points, as determined by the
|
|
line-breaking rules in effect. Line breaking behavior defined for the WJ,
|
|
ZW, and GL line-breaking classes in <a href="#UAX14"
|
|
rel=biblioentry>[UAX14]<!--{{!UAX14}}--></a> must be honored.
|
|
|
|
<dt><dfn id=none2 title="text-wrap:none">‘<code
|
|
class=css>none</code>’</dfn>
|
|
|
|
<dd>Lines may not break; text that does not fit within the block container
|
|
overflows it.
|
|
|
|
<dt><dfn id=avoid title="text-wrap:avoid">‘<code
|
|
class=css>avoid</code>’</dfn>
|
|
|
|
<dd>Line breaking is suppressed within the element: the UA may only break
|
|
within the element if there are no other valid break points in the line.
|
|
If the text breaks, line-breaking restrictions are honored as for
|
|
‘<code class=property>normal</code>’.
|
|
</dl>
|
|
|
|
<p>Regardless of the ‘<a href="#text-wrap0"><code
|
|
class=property>text-wrap</code></a>’ value, lines always break at
|
|
forced breaks: for all values, line-breaking behavior defined for the BK,
|
|
CR, LF, CM NL, and SG line breaking classes in <a href="#UAX14"
|
|
rel=biblioentry>[UAX14]<!--{{!UAX14}}--></a> must be honored.
|
|
|
|
<p>When <span class=property>‘<a href="#text-wrap0"><code
|
|
class=property>text-wrap</code></a>’</span> is set to ‘<code
|
|
class=property>normal</code>’ or ‘<code
|
|
class=property>avoid</code>’, UAs that allow breaks at punctuation
|
|
other than spaces should prioritize breakpoints. For example, if breaks
|
|
after slashes have a lower priority than spaces, the sequence "check /etc"
|
|
will never break between the ‘<code class=css>/</code>’ and
|
|
the ‘<code class=property>e</code>’. The UA may use the width
|
|
of the containing block, the text's language, and other factors in
|
|
assigning priorities. As long as care is taken to avoid such awkward
|
|
breaks, allowing breaks at appropriate punctuation other than spaces is
|
|
recommended, as it results in more even-looking margins, particularly in
|
|
narrow measures.</p>
|
|
<!-- add a sample prioritization algorithm -->
|
|
|
|
<h4 id=example-avoid><span class=secno>6.1.1. </span> Example of using
|
|
‘<code class=css>text-wrap: avoid</code>’ in presenting a
|
|
footer</h4>
|
|
|
|
<div class=example>
|
|
<p>The priority of breakpoints can be set to reflect the intended grouping
|
|
of text.</p>
|
|
|
|
<p>Given the rules</p>
|
|
|
|
<pre>
|
|
<!-- -->footer { text-wrap: avoid; /* inherits to all descendants */ }
|
|
</pre>
|
|
|
|
<p>and the following markup:</p>
|
|
|
|
<pre>
|
|
<!-- --><footer>
|
|
<!-- --> <venue>27th Internationalization and Unicode Conference</venue>
|
|
<!-- --> &#8226; <date>April 7, 2005</date> &#8226;
|
|
<!-- --> <place>Berlin, Germany</place>
|
|
<!-- --></footer>
|
|
</pre>
|
|
|
|
<p>In a narrow window the footer could be broken as</p>
|
|
|
|
<pre>
|
|
<!-- -->27th Internationalization and Unicode Conference •
|
|
<!-- -->April 7, 2005 • Berlin, Germany
|
|
</pre>
|
|
|
|
<p>or in a narrower window as</p>
|
|
|
|
<pre>
|
|
<!-- -->27th Internationalization and Unicode
|
|
<!-- -->Conference • April 7, 2005 •
|
|
<!-- -->Berlin, Germany
|
|
</pre>
|
|
|
|
<p>but not as</p>
|
|
|
|
<pre>
|
|
<!-- -->27th Internationalization and Unicode Conference • April
|
|
<!-- -->7, 2005 • Berlin, Germany
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=overflow-wrap><span class=secno>6.2. </span> Emergency Wrapping: the
|
|
‘<a href="#overflow-wrap0"><code
|
|
class=property>overflow-wrap</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=overflow-wrap0>overflow-wrap</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>normal | [ break-word || hyphenate ]
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies whether the UA may break within a word to
|
|
prevent overflow when an otherwise-unbreakable string is too long to fit
|
|
within the line box. It only has an effect when ‘<a
|
|
href="#text-wrap0"><code class=property>text-wrap</code></a>’ is
|
|
either ‘<code class=property>normal</code>’ or ‘<code
|
|
class=property>avoid</code>’. Possible values:
|
|
|
|
<dl>
|
|
<dt><dfn id=normal3 title="overflow-wrap:normal">‘<code
|
|
class=css>normal</code>’</dfn>
|
|
|
|
<dd>Lines may break only at allowed break points. However, the
|
|
restrictions introduced by ‘<code class=css>word-break:
|
|
keep-all</code>’ may be relaxed to match ‘<code
|
|
class=css>word-break: normal</code>’ and the various hyphenation
|
|
limit properties may be ignored if there are no otherwise-acceptable
|
|
break points in the line.
|
|
|
|
<dt><dfn id=hyphenate title="overflow-wrap:hyphenate">‘<code
|
|
class=css>hyphenate</code>’</dfn>
|
|
|
|
<dd>An unbreakable "word" may be hyphenated if there are no
|
|
otherwise-acceptable break points in the line even if hyphenation is
|
|
turned off or otherwise restricted. Hyphenation controls may influence
|
|
where the word breaks, but cannot forbid the word from hyphenating to
|
|
prevent overflow.
|
|
|
|
<dt><dfn id=break-word title="overflow-wrap:break-word">‘<code
|
|
class=css>break-word</code>’</dfn>
|
|
|
|
<dd>An unbreakable "word" may be broken at an arbitrary point if there are
|
|
no otherwise-acceptable break points in the line. Shaping characters are
|
|
still shaped as if the word were not broken, and grapheme clusters must
|
|
together stay as one unit. If specified together with ‘<code
|
|
class=css>hyphenate</code>’, valid hyphenation takes precedence
|
|
over ‘<code class=css>break-word</code>’ breaking.
|
|
</dl>
|
|
|
|
<p>Break opportunities not part of ‘<code class=css>overflow-wrap:
|
|
normal</code>’ line breaking are not considered when calculating
|
|
‘<code class=css>min-content</code>’ intrinsic sizes.
|
|
|
|
<p>For legacy reasons, UAs may also accept ‘<code
|
|
class=property>word-wrap</code>’ as an alternate name for the
|
|
‘<a href="#overflow-wrap0"><code
|
|
class=property>overflow-wrap</code></a>’ property. However this
|
|
syntax not valid.
|
|
|
|
<h2 id=justification><span class=secno>7. </span> Alignment and
|
|
Justification</h2>
|
|
|
|
<h3 id=text-align><span class=secno>7.1. </span> Text Alignment: the
|
|
‘<a href="#text-align0"><code
|
|
class=property>text-align</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-align0>text-align</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[ start | <a class=noxref
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span
|
|
class=value-inst-string><string></span></a> ]? [ start | end |
|
|
left | right | center | justify | match-parent ]
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>start
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block containers
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value, except for ‘<code
|
|
class=property>match-parent</code>’ (see prose)
|
|
</table>
|
|
|
|
<p>This property describes how inline contents of a block are horizontally
|
|
aligned if the contents do not completely fill the line box. Values have
|
|
the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=start title="text-align:start">‘<code
|
|
class=css>start</code>’</dfn>
|
|
|
|
<dd>The inline contents are aligned to the start edge of the line box.
|
|
|
|
<dt><dfn id=end title="text-align:end">‘<code
|
|
class=css>end</code>’</dfn>
|
|
|
|
<dd>The inline contents are aligned to the end edge of the line box.
|
|
|
|
<dt><dfn id=left title="text-align:left">‘<code
|
|
class=css>left</code>’</dfn>
|
|
|
|
<dd>The inline contents are aligned to the left edge of the line box. In
|
|
vertical text, ‘<code class=property>left</code>’ aligns to
|
|
the edge of the line box that would be the start edge for left-to-right
|
|
text.
|
|
|
|
<dt><dfn id=right title="text-align:right">‘<code
|
|
class=css>right</code>’</dfn>
|
|
|
|
<dd>The inline contents are aligned to the right edge of the line box. In
|
|
vertical text, ‘<code class=property>right</code>’ aligns to
|
|
the edge of the line box that would be the end edge for left-to-right
|
|
text.
|
|
|
|
<dt><dfn id=center title="text-align:center">‘<code
|
|
class=css>center</code>’</dfn>
|
|
|
|
<dd>The inline contents are centered within the line box.
|
|
|
|
<dt><dfn id=justify title="text-align:justify">‘<code
|
|
class=css>justify</code>’</dfn>
|
|
|
|
<dd>The text is justified according to the method specified by the <a
|
|
class=property href="#text-justify">‘<code
|
|
class=property>text-justify</code>’</a> property.
|
|
|
|
<dt><dfn id=ltstringgt title="text-align:<string>">‘<code
|
|
class=css><span title="<string>"><a class=noxref
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span
|
|
class=value-inst-string><string></span></a></span></code>’</dfn>
|
|
|
|
<dd>The string must be a single character; otherwise the declaration must
|
|
be <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.
|
|
When applied to a table cell, specifies the <dfn
|
|
id=alignment-character>alignment character</dfn> around which the cell's
|
|
contents will align. See <a href="#character-alignment">below</a> for
|
|
further details.
|
|
|
|
<dt><dfn id=match-parent title="text-align:match-parent">‘<code
|
|
class=css>match-parent</code>’</dfn>
|
|
|
|
<dd>This value behaves the same as ‘<code
|
|
class=property>inherit</code>’ except that an inherited
|
|
‘<code class=property>start</code>’ or ‘<code
|
|
class=property>end</code>’ keyword is calculated against its
|
|
parent's ‘<code class=property>direction</code>’ value and
|
|
results in a computed value of either ‘<code
|
|
class=property>left</code>’ or ‘<code
|
|
class=property>right</code>’.
|
|
</dl>
|
|
|
|
<p>If two keywords are given in combination, then the first value specifies
|
|
the alignment of the first line and any line immediately after a forced
|
|
line break; and the second value specifies the alignment of any remaining
|
|
lines.
|
|
|
|
<p>A block of text is a stack of <a
|
|
href="http://www.w3.org/TR/CSS21/visuren.html#line-box">line boxes</a>. In
|
|
the case of ‘<code class=property>start</code>’, ‘<code
|
|
class=property>end</code>’, ‘<code
|
|
class=property>left</code>’, ‘<code
|
|
class=property>right</code>’ and ‘<code
|
|
class=property>center</code>’, this property specifies how the
|
|
inline-level boxes within each line box align with respect to the start
|
|
and end sides of the line box: alignment is not with respect to the <a
|
|
href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a> or
|
|
containing block.
|
|
|
|
<p>In the case of ‘<code class=property>justify</code>’, the UA
|
|
may stretch or shrink any inline boxes by <a
|
|
href="#text-justify">adjusting</a> their text in addition to shifting
|
|
their positions. (See also ‘<a href="#text-justify0"><code
|
|
class=property>text-justify</code></a>’, ‘<a
|
|
href="#letter-spacing0"><code
|
|
class=property>letter-spacing</code></a>’, and ‘<a
|
|
href="#word-spacing0"><code
|
|
class=property>word-spacing</code></a>’.) If an element's white
|
|
space is set to be <a href="#collapse">collapsible</a>, then the UA is not
|
|
required to adjust its text for the purpose of justification and may
|
|
instead treat the text as having no expansion opportunities. If the UA
|
|
chooses to adjust the text, then it must ensure that tab stops continue to
|
|
line up as required by the <a
|
|
href="http://dev.w3.org/csswg/css3-text/#white-space-rules">white space
|
|
processing rules</a>.
|
|
|
|
<h4 id=character-alignment><span class=secno>7.1.1. </span>Details on
|
|
Character-based Alignment in a Table Column</h4>
|
|
|
|
<p>When multiple cells in a column have an alignment character specified,
|
|
the alignment character of each such cell in the column is centered along
|
|
a single column-parallel axis and the rest of the text in the column
|
|
shifted accordingly. (Note that the strings do not have to be the same for
|
|
each cell, although they usually are.)
|
|
|
|
<p>If the alignment character appears more than once in the text, the first
|
|
instance is used for alignment. If the alignment character does not appear
|
|
in a cell at all, the string is aligned as if the alignment character had
|
|
been inserted at the end of its contents.
|
|
|
|
<p>Character-based alignment occurs before table cell width computation so
|
|
that auto width computations can leave enough space for alignment. Whether
|
|
column-spanning cells participate in the alignment prior to or after width
|
|
computation is undefined. If width constraints on the cell contents
|
|
prevent full alignment throughout the column, the resulting alignment is
|
|
undefined.
|
|
|
|
<p>A keyword value may be specified in conjunction with the <string>
|
|
value; if it is not given, it defaults to ‘<code
|
|
class=css>right</code>’. This value is used:
|
|
|
|
<ul>
|
|
<li>when character-based alignment is applied to boxes that are not table
|
|
cells.
|
|
|
|
<li>when the text wraps to multiple lines (at unforced break points).
|
|
|
|
<li>when the column is wide enough that the character alignment alone does
|
|
not determine the positions of its character-aligned contents. In this
|
|
case the keyword alignment of the first cell in the column with a
|
|
specified alignment character is used to slide the position of the
|
|
character-aligned contents to match the keyword alignment insofar as
|
|
possible without changing the width of the column. For ‘<code
|
|
class=css>center</code>’, the UA may center the aligned contents
|
|
using its extremes, center the alignment axis itself (insofar as
|
|
possible), or optically center the aligned contents some other way (such
|
|
as by taking a weighted average of the extent of the cells' contents to
|
|
either side of the axis).
|
|
|
|
<li>when a character-aligned cell spans more than one column. In this case
|
|
the keyword alignment value is used to determine which column's axis to
|
|
align with: the leftmost column for ‘<code
|
|
class=css>left</code>’, the rightmost column for ‘<code
|
|
class=css>right</code>’ and ‘<code
|
|
class=css>center</code>’, the startmost column for ‘<code
|
|
class=css>start</code>’, the endmost column for ‘<code
|
|
class=css>end</code>’.
|
|
</ul>
|
|
|
|
<div class=example> The following style sheet:
|
|
<pre>TD { text-align: "." center }</pre>
|
|
will cause the column of dollar figures in the following HTML table:
|
|
<pre class=html-example>
|
|
<!-- --><TABLE>
|
|
<!-- --><COL width="40">
|
|
<!-- --><TR> <TH>Long distance calls
|
|
<!-- --><TR> <TD> $1.30
|
|
<!-- --><TR> <TD> $2.50
|
|
<!-- --><TR> <TD> $10.80
|
|
<!-- --><TR> <TD> $111.01
|
|
<!-- --><TR> <TD> $85.
|
|
<!-- --><TR> <TD> N/A
|
|
<!-- --><TR> <TD> $.05
|
|
<!-- --><TR> <TD> $.06
|
|
<!-- --></TABLE></pre>
|
|
|
|
<p>to align along the decimal point. The table might be rendered as
|
|
follows:</p>
|
|
|
|
<pre>
|
|
<!-- -->+---------------------+
|
|
<!-- -->| Long distance calls |
|
|
<!-- -->+---------------------+
|
|
<!-- -->| $11.30 |
|
|
<!-- -->| $22.50 |
|
|
<!-- -->| $0.80 |
|
|
<!-- -->| $200567.01 |
|
|
<!-- -->| $85. |
|
|
<!-- -->| N/A |
|
|
<!-- -->| $.05 |
|
|
<!-- -->| $.06 |
|
|
<!-- -->+---------------------+
|
|
<!-- --></pre>
|
|
</div>
|
|
|
|
<p class=note>Right alignment is used by default for character-based
|
|
alignment because numbering systems are almost all left-to-right even in
|
|
right-to-left writing systems, and the primary use case of character-based
|
|
alignment is for numerical alignment.
|
|
|
|
<h3 id=text-align-last><span class=secno>7.2. </span> Last Line Alignment:
|
|
the ‘<a href="#text-align-last0"><code
|
|
class=property>text-align-last</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-align-last0>text-align-last</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>auto | start | end | left | right | center | justify
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block containers
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property describes how the last line of a block or a line right
|
|
before a forced line break is aligned. If a line is also the first line of
|
|
the block or the first line after a forced line break, then ‘<a
|
|
href="#text-align-last0"><code
|
|
class=property>text-align-last</code></a>’ takes precedence over
|
|
‘<a href="#text-align0"><code
|
|
class=property>text-align</code></a>’ <em>except</em> when two
|
|
keywords are given for ‘<a href="#text-align0"><code
|
|
class=property>text-align</code></a>’ (i.e. when ‘<a
|
|
href="#text-align0"><code class=property>text-align</code></a>’
|
|
assigns an explicit first line alignment).
|
|
|
|
<p>‘<code class=css>auto</code>’ is equivalent to the value of
|
|
the ‘<a href="#text-align0"><code
|
|
class=property>text-align</code></a>’ property except when ‘<a
|
|
href="#text-align0"><code class=property>text-align</code></a>’ is
|
|
set to ‘<code class=css>justify</code>’, in which case it is
|
|
‘<code class=css>justify</code>’ when ‘<a
|
|
href="#text-justify0"><code class=property>text-justify</code></a>’
|
|
is ‘<code class=css>distribute</code>’ and ‘<code
|
|
class=css>start</code>’ otherwise. All other values have the same
|
|
meanings as in ‘<a href="#text-align0"><code
|
|
class=property>text-align</code></a>’.
|
|
|
|
<h3 id=text-justify><span class=secno>7.3. </span> Justification Method:
|
|
the ‘<a href="#text-justify0"><code
|
|
class=property>text-justify</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-justify0>text-justify</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>auto | none | inter-word | inter-ideograph | inter-cluster |
|
|
distribute | kashida
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block containers and, optionally, inline elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property selects the justification method used when a line's
|
|
alignment is set to ‘<code class=css>justify</code>’ (see
|
|
‘<a href="#text-align0"><code
|
|
class=property>text-align</code></a>’), primarily by controlling
|
|
which scripts' characters are adjusted together or separately. The
|
|
property applies to block containers, but the UA may (but is not required
|
|
to) also support it on inline elements. It takes the following values:
|
|
|
|
<dl>
|
|
<dt><dfn id=auto1 title="text-justify:auto">‘<code
|
|
class=css>auto</code>’</dfn>
|
|
|
|
<dd>The UA determines the justification algorithm to follow, based on a
|
|
balance between performance and adequate presentation quality.
|
|
<p class=note>One possible algorithm is to determine the behavior based
|
|
on the language of the paragraph: the UA can then choose appropriate
|
|
value for the language, like ‘<code
|
|
class=css>inter-ideograph</code>’ for CJK, or ‘<code
|
|
class=css>inter-word</code>’ for English. Another possibility is
|
|
to use a justification method that is a universal compromise for all
|
|
scripts, e.g. the ‘<code class=css>inter-cluster</code>’
|
|
method with block scripts raised to first priority.</p>
|
|
|
|
<dt><dfn id=none3 title="text-justify:none">‘<code
|
|
class=css>none</code>’</dfn>
|
|
|
|
<dd>Justification is disabled. <span class=note>This value is intended for
|
|
use in user stylesheets to improve readability or for accessibility
|
|
purposes.</span>
|
|
|
|
<dt><dfn id=inter-word title="text-justify:inter-word">‘<code
|
|
class=css>inter-word</code>’</dfn>
|
|
|
|
<dd>Justification primarily changes spacing at word separators. This value
|
|
is typically used for languages that separate words using spaces, like
|
|
English or Korean.
|
|
|
|
<dt><dfn id=inter-ideograph
|
|
title="text-justify:inter-ideographic">‘<code
|
|
class=css>inter-ideograph</code>’</dfn>
|
|
|
|
<dd>Justification primarily changes spacing at word separators and between
|
|
characters in <a href="#block-scripts">block scripts</a>. This value is
|
|
typically used for <abbr title="Chinese/Japanese/Korean">CJK</abbr>
|
|
languages.
|
|
|
|
<dt><dfn id=inter-cluster title="text-justify:inter-cluster">‘<code
|
|
class=css>inter-cluster</code>’</dfn>
|
|
|
|
<dd>Justification primarily changes spacing at word separators and between
|
|
characters in <a href="#clustered-scripts">clustered scripts</a>. This
|
|
value is typically used for Southeast Asian scripts such as Thai.
|
|
|
|
<dt><dfn id=distribute title="text-justify:distribute">‘<code
|
|
class=css>distribute</code>’</dfn>
|
|
|
|
<dd>Justification primarily changes spacing both at word separators and
|
|
between characters in all scripts equally (except those in the connected
|
|
and cursive categories). This value is sometimes used in e.g. Japanese.
|
|
|
|
<dt><a name=kashida-prop></a><a name=text-kashida-space></a> <dfn
|
|
id=kashida title="text-justify:kashida">‘<code
|
|
class=css>kashida</code>’</dfn>
|
|
|
|
<dd>Justification primarily stretches <a href="#cursive-scripts">cursive
|
|
scripts</a> through the use of kashida or other calligraphic elongation.
|
|
This value is <em>optional</em> for conformance to CSS3 Text. (UAs that
|
|
do not support cursive elongation must <a
|
|
href="http://www.w3.org/TR/css-2010/#partial">treat the value as
|
|
invalid</a>.)
|
|
</dl>
|
|
|
|
<p>When justifying text, the user agent takes the remaining space between
|
|
the ends of a line's contents and the edges of its line box, and
|
|
distributes that space throughout its contents so that the contents
|
|
exactly fill the line box. If the ‘<a href="#letter-spacing0"><code
|
|
class=property>letter-spacing</code></a>’ and ‘<a
|
|
href="#word-spacing0"><code class=property>word-spacing</code></a>’
|
|
property values allow it, the user agent may also distribute negative
|
|
space, putting more content on the line than would otherwise fit under
|
|
normal spacing conditions. The exact justification algorithm is
|
|
UA-dependent; however, CSS provides some general guidelines which should
|
|
be followed when any justification method other than ‘<code
|
|
class=property>auto</code>’ is specified.
|
|
|
|
<p id=expansion-opportunity>CSS defines <dfn
|
|
id=expansion-opportunities>expansion opportunities</dfn> as points where
|
|
the justification algorithm may alter spacing within the text. These
|
|
expansion opportunities fall into priority levels as defined by the
|
|
justification method. Within a line, expansion and compression should
|
|
primarily target the first-priority expansion opportunities; lower
|
|
priority expansion opportunities are adjusted at a lower priority as
|
|
needed.
|
|
|
|
<p>Expansion and compression limits are given by the <a
|
|
href="#letter-spacing">letter-spacing</a> and <a
|
|
href="#word-spacing">word-spacing</a> properties. How any remaining space
|
|
is distributed once all expansion opportunities reach their limits is up
|
|
to the UA. If the inline contents of a line cannot be stretched to the
|
|
full width of the line box, then they must be aligned as specified by the
|
|
‘<a href="#text-align-last0"><code
|
|
class=property>text-align-last</code></a>’ property. (If ‘<a
|
|
href="#text-align-last0"><code
|
|
class=property>text-align-last</code></a>’ is ‘<code
|
|
class=css>justify</code>’, then they must be aligned as for
|
|
‘<code class=css>center</code>’ if ‘<a
|
|
href="#text-justify0"><code class=property>text-justify</code></a>’
|
|
is ‘<code class=css>distribute</code>’ and as ‘<code
|
|
class=css>start</code>’ otherwise.)
|
|
|
|
<p>The expansion opportunity priorities for values of ‘<a
|
|
href="#text-justify0"><code class=property>text-justify</code></a>’
|
|
are given in the table below. Since justification behavior varies by
|
|
writing system, expansion opportunities are organized by <a
|
|
href="#script-groups">script categories</a>. An expansion opportunity
|
|
exists between two <i>letters</i> at a priority level when at least one of
|
|
them belongs to a script category at that level and the other does not
|
|
belong to a higher priority level. All scripts in the same priority level
|
|
must be treated exactly the same. Word separators (spaces) and other
|
|
symbols and punctuation are treated specially, see below.
|
|
|
|
<table class=data>
|
|
<caption>Prioritization of Expansion Points</caption>
|
|
|
|
<colgroup class=header></colgroup>
|
|
|
|
<colgroup span=6></colgroup>
|
|
|
|
<thead>
|
|
<tr>
|
|
<td>
|
|
|
|
<th>‘<code class=css>inter-word</code>’
|
|
|
|
<th>‘<code class=css>inter-ideograph</code>’
|
|
|
|
<th>‘<code class=css>distribute</code>’
|
|
|
|
<th>‘<code class=css>inter-cluster</code>’
|
|
|
|
<th>‘<code class=css>kashida</code>’
|
|
|
|
<th>‘<code class=css>auto</code>’
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th scope=row><a href="#block-scripts">block</a>
|
|
|
|
<td>2
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td>2
|
|
|
|
<td>2
|
|
|
|
<td>3
|
|
|
|
<td><strong>1</strong>*
|
|
|
|
<tr>
|
|
<th scope=row><a href="#clustered-scripts">clustered</a>
|
|
|
|
<td>2
|
|
|
|
<td>2
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td>3
|
|
|
|
<td><strong>1</strong>*
|
|
|
|
<tr>
|
|
<th scope=row><a href="#cursive-scripts">cursive</a>
|
|
|
|
<td>2
|
|
|
|
<td>2
|
|
|
|
<td>2
|
|
|
|
<td>2
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td>2*
|
|
|
|
<tr>
|
|
<th scope=row><a href="#discrete-scripts">discrete</a>
|
|
|
|
<td>2
|
|
|
|
<td>2
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td>2
|
|
|
|
<td>3
|
|
|
|
<td>2*
|
|
|
|
<tr>
|
|
<th scope=row><a href="#connected-scripts">connected</a>
|
|
|
|
<td>never
|
|
|
|
<td>never
|
|
|
|
<td>never
|
|
|
|
<td>never
|
|
|
|
<td>never
|
|
|
|
<td>never
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th scope=row>spaces
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td>2
|
|
|
|
<td><strong>1</strong>*
|
|
|
|
<tr>
|
|
<th scope=row>symbols
|
|
|
|
<td>2
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td><strong>1</strong>
|
|
|
|
<td>3
|
|
|
|
<td>*
|
|
</table>
|
|
|
|
<p id=auto-justify><small>* The ‘<code class=css>auto</code>’
|
|
column defined above is informative; it suggests a prioritization that
|
|
presents a universal compromise among justification methods.</small>
|
|
|
|
<p id=justify-spaces>The <dfn id=spaces title=spaces-category>spaces</dfn>
|
|
category represents expansion opportunities at <a
|
|
href="#word-separator">word separators</a>. (See <a
|
|
href="#word-spacing">‘<code
|
|
class=property>word-spacing</code>’</a>.) The UA may treat spaces
|
|
differently than other expansion points in the same priority, but must not
|
|
change their priority with respect to expansion points in other priority
|
|
levels. For example, in Japanese ‘<code
|
|
class=css>inter-ideograph</code>’ justification (which treats CJK
|
|
characters at a higher priority than Latin characters), word spaces
|
|
traditionally have a higher priority than inter-CJK spacing, and the UA
|
|
may split the 1st-priority level to implement that. However the UA is not
|
|
allowed to drop spaces to the same priority as Latin characters.
|
|
|
|
<p id=justify-symbols>The <dfn id=punctuation-symbols>symbols</dfn>
|
|
category represents the expansion opportunities existing at or between any
|
|
pair of characters from the Unicode Symbols (S*) and Punctuation (P*)
|
|
classes and at enabled <a href="#text-autospace">autospace</a> points. The
|
|
default justification priority of these points is given above. However,
|
|
there may be additional rules controlling their justification behavior due
|
|
to typographic tradition. Therefore, the UA may reassign specific
|
|
characters or introduce additional levels of prioritization to handle
|
|
expansion opportunities involving symbols and punctuation. For example,
|
|
there are traditionally no expansion opportunities between consecutive EM
|
|
DASH U+2014, HORIZONTAL BAR U+2015, HORIZONTAL ELLIPSIS U+2026, or TWO DOT
|
|
LEADER U+2025 characters <a href="#JLREQ"
|
|
rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>; thus a UA might assign these
|
|
characters to the "never" prioritization level. As another example,
|
|
certain fullwidth punctuation characters are considered to contain an
|
|
expansion opportunity (see ‘<a href="#text-spacing"><code
|
|
class=property>text-spacing</code></a>’). The UA might therefore
|
|
assign these characters to a higher prioritization level than the
|
|
opportunities between ideographic characters.
|
|
|
|
<p id=justify-cursive>For justification of <a
|
|
href="#cursive-scripts0"><i>cursive scripts</i></a>, words may be expanded
|
|
through kashida elongation or other cursive expansion processes. Kashida
|
|
may be applied in discrete units or continuously, and the prioritization
|
|
of kashida points is UA-dependent: for example, the UA may apply more at
|
|
the end of the line. The UA should not apply kashida to fonts for which it
|
|
is inappropriate. It may instead rely on other justification methods that
|
|
lengthen or shorten Arabic segments (e.g. by substituting in swash forms
|
|
or optional ligatures). Because elongation rules depend on the typeface
|
|
style, the UA should rely on on the font whenever possible rather than
|
|
inserting kashida based on a font-independent ruleset. The UA should limit
|
|
elongation so that, e.g. in multi-script lines a short stretch of Arabic
|
|
will not be forced to soak up too much of the extra space by itself. If
|
|
the UA does not support cursive elongation, then, as with connected
|
|
scripts, no expansion points exist between characters of these scripts.
|
|
|
|
<p>The UA may enable or break optional ligatures or use other font features
|
|
such as alternate glyphs or glyph compression to help justify the text
|
|
under any method. This behavior is not controlled by this level of CSS.
|
|
|
|
<p class=issue>Add example of using ‘<a href="#text-justify0"><code
|
|
class=property>text-justify</code></a>’ with the TeX algorithm.
|
|
|
|
<div class=example>
|
|
<p>3.8 Line Adjustment in <a href="#JLREQ"
|
|
rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> gives an example of a set of
|
|
rules for how a text formatter can justify Japanese text. It describes
|
|
rules for cases where the ‘<a href="#text-justify0"><code
|
|
class=property>text-justify</code></a>’ property is ‘<code
|
|
class=css>inter-ideograph</code>’ and the ‘<a
|
|
href="#text-spacing"><code class=property>text-spacing</code></a>’
|
|
property does not specify ‘<code
|
|
class=css>no-compress</code>’.</p>
|
|
|
|
<p>It produces an effect similar to cases where the computed value of
|
|
‘<a href="#text-spacing"><code
|
|
class=property>text-spacing</code></a>’ property does not specify
|
|
‘<code class=css>trim-end</code>’ or ‘<code
|
|
class=css>space-end</code>’. If the UA wants to prohibit this
|
|
behavior, rule b. of 3.8.3 should be omitted.</p>
|
|
|
|
<p>Note that the rules described in the document specifically target
|
|
Japanese. Therefore they may produce non-optimal results when used to
|
|
justify other languages such as English. To make the rules more
|
|
applicable to other scripts, the UA could, for instance, omit the rule to
|
|
compress half-width spaces (rule a. of 3.8.3).</p>
|
|
<!--
|
|
<p>JIS X-4051 [[JIS4051]] defines how a text formatter can justify Japanese text.
|
|
Here is one example of the interpretation of JIS X-4051 with slight modification.</p>
|
|
<ol>
|
|
<li>If no justification is necessary, neither compression nor expansion occur.</li>
|
|
<li>If justification is necessary,
|
|
take the first line break opportunity beyond the end of line
|
|
and apply the following rules (in order) to compress until it fits.
|
|
<ol style="list-style-type:lower-alpha">
|
|
<li>Compress space characters up to the minimum value specified by 'word-spacing' property, or up to 1/4em.</li>
|
|
<li>Compress <a href="#fullwidth-middle-dot-punctuation">fullwidth middle dot punctuations</a>
|
|
and <a href="#fullwidth-colon-punctuation">fullwidth colon punctuations</a>
|
|
up to 1/2em, by trimming the same amount of spaces from both sides of the characters.</li>
|
|
<li>Compress the left side of <a href="#fullwidth-opening-punctuation">fullwidth opening punctuations</a>
|
|
and the right side of <a href="#fullwidth-closing-punctuation">fullwidth closing punctuations</a>
|
|
up to 1/2em.</li>
|
|
<li>Compress spaces created by 'text-spacing' property up to 1/8em.</li>
|
|
</ol></li>
|
|
<li>If the compression fails to fit the line,
|
|
take the last line break opportunity before the end of line,
|
|
and apply the following rules (in order) to expand until it fits.
|
|
<ol style="list-style-type:lower-alpha">
|
|
<li>Expand space characters up to the maximum value specified by 'word-spacing' property, or up to 1/2em.</li>
|
|
<li>Expand spaces created by 'text-spacing' property up to 1/2em.</li>
|
|
<li>Expand all expansion opportunities as defined above in equal percent of the size of each character.</li>
|
|
</ol></li>
|
|
</ol>
|
|
-->
|
|
</div>
|
|
|
|
<h2 id=spacing><span class=secno>8. </span> Spacing</h2>
|
|
|
|
<p id=spacing-limit>The next two properties refer to the
|
|
<spacing-limit> value type, which is defined as follows:
|
|
|
|
<dl>
|
|
<dt><dfn id=ltspacing-limitgt title="<spacing-limit>">‘<code
|
|
class=css><spacing-limit></code>’</dfn>
|
|
|
|
<dd> [ normal | <a class=noxref
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-length"><span
|
|
class=value-inst-length><length></span></a> | <a class=noxref
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage"><span
|
|
class=value-inst-percentage><percentage></span></a> ]
|
|
|
|
<dt><dfn id=normal4 title="<spacing-limit>:normal">‘<code
|
|
class=css>normal</code>’</dfn>
|
|
|
|
<dd>Specifies the normal optimum/minimum/maximum spacing, as defined by
|
|
the current font and/or the user agent. Normal spacing should be
|
|
percentage-based. Normal minimum and maximum spacing must be based on the
|
|
optimum spacing so that the minimum and maximum limits increase and
|
|
decrease with changes to the optimum spacing. Normal minimum and maximum
|
|
spacing may also vary according to some measure of the amount of text on
|
|
a line (e.g. block width divided by font size): larger measures can
|
|
accommodate tighter spacing constraints. Normal optimum/minimum/maximum
|
|
spacing may also vary based on the value of the <a
|
|
href="#text-justify">‘<code
|
|
class=property>text-justify</code>’</a> property, the element's
|
|
language, and other factors. Normal minimum, maximum, and optimal spacing
|
|
between a pair of <a href="#connected-scripts">connected</a> or <a
|
|
href="#cursive-scripts">cursive</a> characters is always zero.
|
|
|
|
<dt><dfn id=ltlengthgt-or-ltpercentagegt
|
|
title="<spacing-limit>:<length>|<percentage>">‘<code
|
|
class=css><a class=noxref
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-length"><span
|
|
class=value-inst-length><length></span></a> or <a class=noxref
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage"><span
|
|
class=value-inst-percentage><percentage></span></a></code>’</dfn>
|
|
|
|
<dd>Specifies extra spacing <em>in addition to</em> the normal spacing.
|
|
Percentages are with respect to the width of the affected character.
|
|
Values may be negative, but there may be implementation-dependent limits.
|
|
|
|
</dl>
|
|
|
|
<h3 id=word-spacing><span class=secno>8.1. </span> Word Spacing: the
|
|
‘<a href="#word-spacing0"><code
|
|
class=property>word-spacing</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=word-spacing0>word-spacing</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#spacing-limit"><spacing-limit></a> {1,3}
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>refers to width of space (U+0020) glyph
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>‘<code class=property>normal</code>’ or computed value
|
|
or percentage
|
|
</table>
|
|
|
|
<p>This property specifies the minimum, maximum, and optimal spacing
|
|
between words. If only one value is specified, then it represents the
|
|
optimal spacing and the minimum and maximum are both ‘<code
|
|
class=property>normal</code>’. If two values are specified, then the
|
|
first represents both the optimal spacing and the minimum spacing, and the
|
|
second represents the maximum spacing. If three values are specified, they
|
|
represent the optimum, minimum, and maximum respectively.
|
|
|
|
<p>If the value of the optimum or maximum spacing is less than the value of
|
|
the minimum spacing, then its used value is the minimum spacing. If the
|
|
optimum spacing is greater than the maximum spacing then its used value is
|
|
the maximum spacing. (This substitution occurs after inheritance.)
|
|
|
|
<p>In the absence of justification the optimal spacing must be used. The
|
|
text justification process may alter the spacing from its optimum (see the
|
|
<a href="#text-justify">‘<code
|
|
class=property>text-justify</code>’</a> property, above) but must
|
|
not violate the minimum spacing limit and should also avoid exceeding the
|
|
maximum.
|
|
|
|
<p id=word-separator>Spacing is applied to each word-separator character
|
|
left in the text after the <a href="#white-space-rules">white space
|
|
processing rules</a> have been applied and should be applied half on each
|
|
side of the character. <span class=issue>This is correct for Ethiopian and
|
|
doesn't matter for invisible spaces, but is it correct for Tibetan? Most
|
|
publications seem to add space <em>after</em> the tsek mark during
|
|
justification.</span> Word-separator characters include the space
|
|
(U+0020), the no-break space (U+00A0), the Ethiopic word space (U+1361),
|
|
the Aegean word separators (U+10100,U+10101), the Ugaritic word divider
|
|
(U+1039F), and the Tibetan tsek (U+0F0B, U+0F0C). <span class=issue>Is
|
|
this list correct?</span> If there are no word-separator characters, or if
|
|
the word-separating character has a zero advance width (such as the zero
|
|
width space U+200B) then the user agent must not create an additional
|
|
spacing between words. General punctuation and fixed-width spaces (such as
|
|
U+3000 and U+2000 through U+200A) are not considered word-separators.
|
|
|
|
<h3 id=letter-spacing><span class=secno>8.2. </span> Tracking: the
|
|
‘<a href="#letter-spacing0"><code
|
|
class=property>letter-spacing</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=letter-spacing0>letter-spacing</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="#spacing-limit"><spacing-limit></a>{1,3}
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>refers to width of space (U+0020) glyph
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>‘<code class=property>normal</code>’ or computed value
|
|
or percentage
|
|
</table>
|
|
|
|
<p>This property specifies the minimum, maximum, and optimal spacing
|
|
between <i>characters</i>. If only one value is specified, then it
|
|
represents all three values. If two values are specified, then the first
|
|
represents both the optimal spacing and the minimum spacing, and the
|
|
second represents the maximum spacing. If three values are specified, they
|
|
represent the optimum, minimum, and maximum respectively.
|
|
|
|
<p>If the value of the optimum or maximum spacing is less than the value of
|
|
the minimum spacing, then its used value is the minimum spacing. If the
|
|
optimum spacing is greater than the maximum spacing then its used value is
|
|
the maximum spacing. (This substitution occurs after inheritance.)
|
|
|
|
<p>In the absence of justification the optimal spacing must be used. The
|
|
text justification process may alter the spacing from its optimum (see the
|
|
<a href="#text-justify">‘<code
|
|
class=property>text-justify</code>’</a> property, above) but must
|
|
not violate the minimum spacing limit and should also avoid exceeding the
|
|
maximum. Letter-spacing is applied in addition to any word-spacing.
|
|
‘<code class=property>normal</code>’ optimum letter-spacing is
|
|
typically zero.
|
|
|
|
<p>Letter-spacing must not be applied at the beginning or at the end of a
|
|
line. At element boundaries, the letter spacing is given by and rendered
|
|
within the innermost element that <em>contains</em> the boundary.
|
|
|
|
<div class=example>
|
|
<p>For example, given the markup</p>
|
|
|
|
<pre><P>a<LS>b<Z>cd</Z><Y>ef</Y></LS>g</P></pre>
|
|
|
|
<p>and the style sheet</p>
|
|
|
|
<pre><!--
|
|
-->LS { letter-spacing: 1em; }
|
|
<!-- -->Z { letter-spacing: 0.3em; }
|
|
<!-- -->Y { letter-spacing: 0.4em; }</pre>
|
|
|
|
<p>the spacing would be</p>
|
|
|
|
<pre>a[0]b[1em]c[0.3em]d[1em]e[0.4em]f[0]g</pre>
|
|
</div>
|
|
|
|
<p>UAs may apply letter-spacing to cursive scripts. In this case, UAs
|
|
should extend the space between disjoint characters as specified above
|
|
<em>and</em> extend the visible connection between cursively connected
|
|
characters by the same amount (rather than leaving a gap). The UA may use
|
|
glyph substitution or other font capabilities to spread out the letters.
|
|
If the UA cannot expand a cursive script without breaking the cursive
|
|
connections, it should not apply letter-spacing between characters of that
|
|
script at all.
|
|
|
|
<p>When the resulting space between two characters is not the same as the
|
|
default space, user agents should not use optional ligatures.
|
|
|
|
<h3 id=text-spacing-prop><span class=secno>8.3. </span> <a
|
|
name=punctuation-trim></a> <a name=text-trim-prop></a><a
|
|
name=text-trim></a> <a name=text-autospace-prop></a><a
|
|
name=text-autospace></a> Character Class Spacing: the ‘<a
|
|
href="#text-spacing"><code class=property>text-spacing</code></a>’
|
|
property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-spacing>text-spacing</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>normal | none | [ trim-start | space-start ] || [ trim-end |
|
|
space-end | allow-end ] || [ trim-adjacent | space-adjacent ] ||
|
|
no-compress || ideograph-alpha || ideograph-numeric || punctuation
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block containers
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property controls spacing between adjacent characters on the same
|
|
line within the same inline formatting context using a set of
|
|
character-class-based rules. Such spacing can either be created between or
|
|
trimmed from the affected glyphs. Values are defined as follows:
|
|
|
|
<dl>
|
|
<dt><dfn id=normal5 title="text-spacing:normal">‘<code
|
|
class=css>normal</code>’</dfn>
|
|
|
|
<dd>Specifies the baseline behavior, equivalent to ‘<code
|
|
class=css>space-start allow-end trim-adjacent</code>’.
|
|
|
|
<dt><dfn id=none4 title="text-spacing:none">‘<code
|
|
class=css>none</code>’</dfn>
|
|
|
|
<dt>
|
|
|
|
<dd>Turns off all text-spacing features. All fullwidth characters are set
|
|
with full-width glyphs.
|
|
|
|
<dt><dfn id=ideograph-alpha
|
|
title="text-spacing:ideograph-alpha">‘<code
|
|
class=css>ideograph-alpha</code>’</dfn>
|
|
|
|
<dd>Creates 1/4em extra spacing between runs of <a
|
|
href="#ideographs"><i>ideographs</i></a> and <a
|
|
href="#non-ideographic-letters"><i>non-ideographic letters</i></a>. <span
|
|
class=note>A commonly used algorithm for determining this behavior is
|
|
specified in <a href="#JLREQ"
|
|
rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a></span>
|
|
|
|
<dt><dfn id=ideograph-numeric
|
|
title="text-spacing:ideograph-numeric">‘<code
|
|
class=css>ideograph-numeric</code>’</dfn>
|
|
|
|
<dd>Creates 1/4em extra spacing between runs of <a
|
|
href="#ideographs"><i>ideographs</i></a> and <a
|
|
href="#non-ideographic-numerals"><i>non-ideographic numerals</i></a>
|
|
glyphs. <span class=note>A commonly used algorithm for determining this
|
|
behavior is specified in <a href="#JLREQ"
|
|
rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a></span>
|
|
|
|
<dt><dfn id=punctuation title="text-spacing:punctuation">‘<code
|
|
class=css>punctuation</code>’</dfn>
|
|
|
|
<dd>Creates extra non-breaking spacing around punctuation as required by
|
|
language-specific typographic conventions. In this level, if the
|
|
element's content language is French, narrow no-break space (U+202F) and
|
|
no-break space (U+00A0) is be inserted where required by <a
|
|
href="http://unicode.org/udhr/n/notes_fra.html">French typographic
|
|
guidelines</a>. Otherwise this value has no effect. However future
|
|
specifications may add automatic spacing behavior for other languages.
|
|
|
|
<dt><dfn id=space-start title="text-spacing:space-start">‘<code
|
|
class=css>space-start</code>’</dfn>
|
|
|
|
<dd>Set <a href="#fullwidth-opening-punctuation0"><i>fullwidth opening
|
|
punctuation</i></a> with full-width glyphs (spaced) at the start of each
|
|
line.
|
|
|
|
<dt><dfn id=trim-start title="text-spacing:trim-start">‘<code
|
|
class=css>trim-start</code>’</dfn>
|
|
|
|
<dd>Set <a href="#fullwidth-opening-punctuation0"><i>fullwidth opening
|
|
punctuation</i></a> with half-width glyphs (flush) at the start of each
|
|
line.
|
|
|
|
<dt><dfn id=allow-end title="text-spacing:allow-end">‘<code
|
|
class=css>allow-end</code>’</dfn>
|
|
|
|
<dd>Set <a href="#fullwidth-closing-punctuation0"><i>fullwidth closing
|
|
punctuation</i></a> with half-width glyphs (flush) at the end of each
|
|
line if it does not otherwise fit prior to justification, otherwise sets
|
|
the punctuation with full-width glyphs.
|
|
|
|
<dt><dfn id=space-end title="text-spacing:space-end">‘<code
|
|
class=css>space-end</code>’</dfn>
|
|
|
|
<dd>Set <a href="#fullwidth-opening-punctuation0"><i>fullwidth opening
|
|
punctuation</i></a> with full-width glyphs (spaced) at the start of each
|
|
line.
|
|
|
|
<dt><dfn id=trim-end title="text-spacing:trim-end">‘<code
|
|
class=css>trim-end</code>’</dfn>
|
|
|
|
<dd>Set <a href="#fullwidth-closing-punctuation0"><i>fullwidth closing
|
|
punctuation</i></a> with half-width glyphs (flush) at the end of each
|
|
line.
|
|
|
|
<dt><dfn id=space-adjacent
|
|
title="text-spacing:space-adjacent">‘<code
|
|
class=css>space-adjacent</code>’</dfn>
|
|
|
|
<dd>Set <a href="#fullwidth-opening-punctuation0"><i>fullwidth opening
|
|
punctuation</i></a> with full-width glyphs (spaced) when not at the start
|
|
of the line. Set <a href="#fullwidth-closing-punctuation0"><i>fullwidth
|
|
closing punctuation</i></a> with full-width glyphs (spaced) when not at
|
|
the end of the line.
|
|
|
|
<dt><dfn id=trim-adjacent title="text-spacing:trim-adjacent">‘<code
|
|
class=css>trim-adjacent</code>’</dfn>
|
|
|
|
<dd>Collapse spacing between punctuation glyphs <a
|
|
href="#fullwidth-collapsing">as described below</a>.
|
|
|
|
<dt><dfn id=no-compress title="text-spacing:no-compress">‘<code
|
|
class=css>no-compress</code>’</dfn>
|
|
|
|
<dd>Justification may not compress text-spacing. (If this value is not
|
|
specified, the justification process may reduce autospacing except when
|
|
the spacing is at the start or end of the line.) <span class=note> An
|
|
example of compression rules is given for Japanese in 3.8 Line Adjustment
|
|
in <a href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.</span>
|
|
</dl>
|
|
|
|
<p>This property is additive with the ‘<a href="#word-spacing0"><code
|
|
class=property>word-spacing</code></a>’ and ‘<a
|
|
href="#letter-spacing0"><code
|
|
class=property>letter-spacing</code></a>’ properties. That is, the
|
|
amount of spacing contributed by the ‘<a
|
|
href="#letter-spacing0"><code
|
|
class=property>letter-spacing</code></a>’ setting (if any) is added
|
|
to the spacing created by ‘<a href="#text-spacing"><code
|
|
class=property>text-spacing</code></a>’. The same applies to
|
|
‘<a href="#word-spacing0"><code
|
|
class=property>word-spacing</code></a>’.
|
|
|
|
<p>At element boundaries, the amount of extra spacing introduced between
|
|
characters is determined by and rendered within the innermost element that
|
|
contains the boundary. If the extra spacing is applied to a particular
|
|
glyph, then the spacing is determined by the innermost element containing
|
|
that glyph.
|
|
|
|
<p class=note>Values other than ‘<code
|
|
class=css>normal</code>’, ‘<code class=css>none</code>’,
|
|
‘<code class=css>trim-start</code>’, ‘<code
|
|
class=css>trim-end</code>’, and ‘<code
|
|
class=css>space-end</code>’ are at-risk and may be dropped from this
|
|
level of CSS. They are defined here currently to help work out a complete
|
|
design of this feature.
|
|
|
|
<p>Support for this property is <em>optional</em>. It is strongly
|
|
recommended for UAs that wish to support CJK typography.
|
|
|
|
<p class=issue>It was requested to add a value for doubling the space after
|
|
periods.
|
|
|
|
<h4 id=fullwidth-collapsing><span class=secno>8.3.1. </span> Fullwidth
|
|
Punctuation Collapsing</h4>
|
|
|
|
<p>Typically fullwidth characters have glyphs with the same advance width
|
|
as a standard Han character (e.g. 水 U+6C34). However, many fullwidth
|
|
punctuation glyphs only take up part of the fullwidth design space. Thus
|
|
such punctuation are not always set fullwidth. Several values of ‘<a
|
|
href="#text-spacing"><code class=property>text-spacing</code></a>’
|
|
allow the author to control when such characters are set half-width
|
|
(typically half the width of an ideograph) and when they are set
|
|
full-width.
|
|
|
|
<p>In order to set the text as specified, the UA may need to either
|
|
|
|
<ul>
|
|
<li>trim (kern) the blank half of the glyphs if they are given full-width
|
|
and must be set half-width, or
|
|
|
|
<li>add space to the glyphs if they are given half-width must be set
|
|
full-width.
|
|
</ul>
|
|
|
|
<p>Some fonts use proportional glyphs for fullwidth punctuation characters.
|
|
For such proportional glyphs, the given advance width is considered
|
|
simultaneously full-width and half-width: no space is added or removed.
|
|
|
|
<p class=note>The advance width of a standard Han character can be
|
|
determined either from font metrics such as the OpenType <code>ideo</code>
|
|
and <code>idtp</code> baselines for the opposite writing mode, or by
|
|
taking the advance width of a Han character such as 水 U+6C34. (The
|
|
opposite writing mode must be used because some fonts are compressed so
|
|
that the characters are not square.) More information on OpenType metrics
|
|
can be found <a
|
|
href="http://www.microsoft.com/typography/otspec/baselinetags.htm#ideoembox">in
|
|
the OpenType spec</a>. Note that if 水 U+6C34, 卜 U+535C, and 一 U+4E00
|
|
do not all have the same advance width, the font has proportional
|
|
ideographs and the fullwidth advance width cannot be reliably determined
|
|
by measuring glyphs.
|
|
|
|
<p>Unless ‘<a href="#text-spacing"><code
|
|
class=property>text-spacing</code></a>’ is set to ‘<code
|
|
class=css>space-adjacent</code>’ or ‘<code
|
|
class=css>none</code>’ (or the font has proportional fullwidth
|
|
punctuation glyphs), the UA must collapse the space typically associated
|
|
with such full width glyphs as follows:
|
|
|
|
<ul>
|
|
<li>Set <a href="#fullwidth-opening-punctuation0"><i>fullwidth opening
|
|
punctuation</i></a> half-width if the previous character is a <a
|
|
href="#fullwidth-opening-punctuation0"><i>fullwidth opening
|
|
punctuation</i></a>, <a
|
|
href="#fullwidth-middle-dot-punctuation0"><i>fullwidth middle dot
|
|
punctuation</i></a>, or ideographic space (U+3000). Else set it
|
|
full-width.
|
|
|
|
<li>Set <a href="#fullwidth-closing-punctuation0"><i>fullwidth closing
|
|
punctuation</i></a> half-width if the next character is a <a
|
|
href="#fullwidth-closing-punctuation0"><i>fullwidth closing
|
|
punctuation</i></a>, <a
|
|
href="#fullwidth-middle-dot-punctuation0"><i>fullwidth middle dot
|
|
punctuation</i></a>, or ideographic space (U+3000). Else set it
|
|
full-width.
|
|
|
|
<li>Set <a href="#fullwidth-closing-punctuation0"><i>fullwidth closing
|
|
punctuation</i></a> followed by <a
|
|
href="#fullwidth-opening-punctuation0"><i>fullwidth opening
|
|
punctuation</i></a> each "3/4-width", i.e. halfway between fullw-width
|
|
and half-width.
|
|
</ul>
|
|
|
|
<div class=example>
|
|
<p>The following example table lists the punctuation pairs affected by
|
|
adjancent-pairs trimming. It uses halfwidth equivalents to approximate
|
|
the trimming effect.</p>
|
|
|
|
<table class=data>
|
|
<caption>Demonstration of adjacent-pairs punctuation trimming</caption>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>Combination
|
|
|
|
<th>Sample Pair
|
|
|
|
<th>Looks Like
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td scope=row>Opening—Opening
|
|
|
|
<td><tt class=char lang=ja>〔</tt>+<tt class=char lang=ja>（</tt>
|
|
|
|
<td><tt class=char lang=ja>〔</tt><tt class="char half-r"
|
|
lang=ja>(</tt>
|
|
|
|
<tr>
|
|
<td scope=row>Middle Dot—Opening
|
|
|
|
<td><tt class=char lang=ja>・</tt>+<tt class=char lang=ja>（</tt>
|
|
|
|
<td><tt class=char lang=ja>・</tt><tt class=char lang=ja>(</tt>
|
|
|
|
<tr>
|
|
<td scope=row>Closing—Opening
|
|
|
|
<td><tt class=char lang=ja>〕</tt>+<tt class=char lang=ja>（</tt>
|
|
|
|
<td><tt class=char lang=ja>)<span class=quarter>　</span></tt><tt
|
|
class=char lang=ja><span class=quarter>　</span>(</tt>
|
|
|
|
<tr>
|
|
<td scope=row>Ideographic Space—Opening
|
|
|
|
<td><tt class=char lang=ja> </tt>+<tt class=char lang=ja>（</tt>
|
|
|
|
<td><tt class=char lang=ja> </tt><tt class=char lang=ja>(</tt>
|
|
|
|
<tr>
|
|
<td scope=row>Closing—Closing
|
|
|
|
<td><tt class=char lang=ja>）</tt>+<tt class=char lang=ja>〕</tt>
|
|
|
|
<td><tt class=char lang=ja>)</tt><tt class=char lang=ja>〕</tt>
|
|
|
|
<tr>
|
|
<td scope=row>Closing—Middle Dot
|
|
|
|
<td><tt class=char lang=ja>）</tt>+<tt class=char lang=ja>・</tt>
|
|
|
|
<td><tt class=char lang=ja>)</tt><tt class=char lang=ja>・</tt>
|
|
|
|
<tr>
|
|
<td scope=row>Closing—Ideographic Space
|
|
|
|
<td><tt class=char lang=ja>）</tt>+<tt class=char lang=ja> </tt>
|
|
|
|
<td><tt class=char lang=ja>)</tt><tt class=char lang=ja> </tt>
|
|
</table>
|
|
</div>
|
|
|
|
<h4 id=text-spacing-classes><span class=secno>8.3.2. </span> Text Spacing
|
|
Character Classes</h4>
|
|
|
|
<p>In the context of this property the following definitions apply:
|
|
|
|
<p class=issue>classes and Unicode code point should be reviewed.
|
|
|
|
<dl>
|
|
<dt><dfn id=ideographs>Ideographs</dfn>
|
|
|
|
<dd>Includes all characters listed below:
|
|
<ul>
|
|
<li>All characters in the range of U+3041 to U+30FF, except that belongs
|
|
to Unicode Punctuation [P*] category.
|
|
|
|
<li>CJK Strokes (U+31C0 to U+31EF).
|
|
|
|
<li>Katakana Phonetic Extensions (U+31F0 to U+31FF).
|
|
|
|
<li>All characters that belongs to Han Unicode Script Property <a
|
|
href="#UAX24" rel=biblioentry>[UAX24]<!--{{!UAX24}}--></a>.
|
|
</ul>
|
|
|
|
<dt><dfn id=non-ideographic-letters>Non-ideographic letters</dfn>
|
|
|
|
<dd>Includes all characters that belongs to Unicode Letters [L*] and Mark
|
|
[M*] category, except any of the following conditions are met:
|
|
<ul>
|
|
<li>Is defined as Ideographic letters.
|
|
|
|
<li>Is categorized as East Asian Fullwidth (F) by <a href="#UAX11"
|
|
rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a>.
|
|
|
|
<li>Is upright in vertical text flow using the ‘<code
|
|
class=property>text-orientation</code>’ property or the
|
|
‘<code class=property>text-combine</code>’ property.
|
|
</ul>
|
|
|
|
<dt><dfn id=non-ideographic-numerals>Non-ideographic numerals</dfn>
|
|
|
|
<dd>Includes all characters that belongs to Unicode Number, Decimal Digit
|
|
[Nd] category, except any of the following conditions are met:
|
|
<ul>
|
|
<li>Is categorized as East Asian Fullwidth (F) by <a href="#UAX11"
|
|
rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a>.
|
|
|
|
<li>Is upright in vertical text flow using the ‘<code
|
|
class=property>text-orientation</code>’ property or the
|
|
‘<code class=property>text-combine</code>’ property.
|
|
</ul>
|
|
|
|
<dt id=fullwidth-opening-punctuation><dfn
|
|
id=fullwidth-opening-punctuation0>fullwidth opening punctuation</dfn>
|
|
|
|
<dd>Includes any opening punctuation character (Unicode category
|
|
<code>Ps</code>) that belongs to the <i>CJK Symbols and Punctuation</i>
|
|
block (U+3000–U+303F) or is categorized as <i>East Asian Fullwidth
|
|
(F)</i> by <a href="#UAX11" rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a>.
|
|
Also includes LEFT SINGLE QUOTATION MARK (U+2018) and LEFT DOUBLE
|
|
QUOTATION MARK (U+201C). When trimmed, the left (for horizontal text) or
|
|
top (for vertical text) half is kerned.
|
|
|
|
<dt id=fullwidth-closing-punctuation><dfn
|
|
id=fullwidth-closing-punctuation0>fullwidth closing punctuation</dfn>
|
|
|
|
<dd>Includes any closing punctuation character (Unicode category
|
|
<code>Pe</code>) that belongs to the <i>CJK Symbols and Punctuation</i>
|
|
block (U+3000–U+303F) or is categorized as <i>East Asian Fullwidth
|
|
(F)</i> by <a href="#UAX11" rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a>.
|
|
Also includes RIGHT SINGLE QUOTATION MARK (U+2019) and RIGHT DOUBLE
|
|
QUOTATION MARK (U+201D). May also include fullwidth colon punctuation
|
|
and/or fullwidth dot punctuation (see below). When trimmed, the right
|
|
(for horizontal text) or bottom (for vertical text) half is kerned.
|
|
|
|
<dt id=fullwidth-middle-dot-punctuation><dfn
|
|
id=fullwidth-middle-dot-punctuation0>fullwidth middle dot
|
|
punctuation</dfn>
|
|
|
|
<dd>Includes MIDDLE DOT (U+00B7), HYPHENATION POINT (U+2027), and KATAKANA
|
|
MIDDLE DOT (U+30FB). May also include fullwidth colon punctuation and/or
|
|
fullwidth dot punctuation (see below).
|
|
|
|
<dt id=fullwidth-colon-punctuation><dfn
|
|
id=fullwidth-colon-punctuation0>fullwidth colon punctuation</dfn>
|
|
|
|
<dd>Includes FULLWIDTH COLON (U+FF1A) and FULLWIDTH SEMICOLON (U+FF1B).
|
|
|
|
<dt id=fullwidth-dot-punctuation><dfn
|
|
id=fullwidth-dot-punctuation0>fullwidth dot punctuation</dfn>
|
|
|
|
<dd>Includes IDEOGRAPHIC COMMA (U+3001), IDEOGRAPHIC FULL STOP (U+3002),
|
|
FULLWIDTH COMMA (U+FF0C), FULLWIDTH FULL STOP (U+FF0E).
|
|
</dl>
|
|
|
|
<p>Whether fullwidth colon punctuation and fullwidth dot punctuation should
|
|
be considered fullwidth closing punctuation or fullwidth middle dot
|
|
punctuation depends on where in the glyph's box the punctuation is drawn.
|
|
If the punctuation is centered, then it should be considered middle dot
|
|
punctuation. If the punctuation is drawn to one side (left in horizontal
|
|
text, top in vertical text) and the other half is therefore blank then the
|
|
punctuation should be considered closing punctuation and trimmed
|
|
accordingly.
|
|
|
|
<p>The UA must classify fullwidth colon punctuation and fullwidth dot
|
|
punctuation under either the fullwidth closing punctuation category or the
|
|
fullwidth middle dot punctuation category as appropriate. The UA may rely
|
|
on language conventions and the writing mode (horizontal vs. vertical),
|
|
and/or font information to determine this categorization. The UA may also
|
|
add additional characters to any category as appropriate.
|
|
|
|
<div class=note>
|
|
<p>The following informative table summarizes language conventions for
|
|
classifying fullwidth colon and dot punctuation:</p>
|
|
|
|
<table class=data>
|
|
<colgroup class=header></colgroup>
|
|
|
|
<colgroup span=2></colgroup>
|
|
|
|
<thead>
|
|
<tr>
|
|
<td>
|
|
|
|
<th>colon punctuation
|
|
|
|
<th>dot punctuation
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>Simplified Chinese (horizontal)
|
|
|
|
<td>closing
|
|
|
|
<td>closing
|
|
|
|
<tr>
|
|
<th>Simplified Chinese (vertical)
|
|
|
|
<td>closing
|
|
|
|
<td>closing
|
|
|
|
<tr>
|
|
<th>Traditional Chinese
|
|
|
|
<td>middle dot
|
|
|
|
<td>middle dot
|
|
|
|
<tr>
|
|
<th>Korean
|
|
|
|
<td>middle dot
|
|
|
|
<td>closing
|
|
|
|
<tr>
|
|
<th>Japanese
|
|
|
|
<td>middle dot
|
|
|
|
<td>closing
|
|
</table>
|
|
|
|
<p>Note, that for Chinese fonts at least, the author observes that the
|
|
standard convention is often not followed.</p>
|
|
</div>
|
|
|
|
<h2 id=edge-effects><span class=secno>9. </span> Edge Effects</h2>
|
|
|
|
<p>Edge effects control the indentation of lines with respect to other
|
|
lines in the block (‘<a href="#text-indent0"><code
|
|
class=property>text-indent</code></a>’) and how content is aligned
|
|
to the start and end edges of a line (‘<a
|
|
href="#hanging-punctuation0"><code
|
|
class=property>hanging-punctuation</code></a>’, see also ‘<a
|
|
href="#text-spacing"><code class=property>text-spacing</code></a>’).
|
|
|
|
|
|
<div class=example>
|
|
<p>Japanese has three common start-edge typesetting schemes, which are
|
|
distinguished by their handling of opening brackets.
|
|
|
|
<div class=figure>
|
|
<p><img alt="The first scheme aligns opening brackets flush with the
|
|
indent edge on the first line and with the start edge of other lines.
|
|
The second scheme gives the opening bracket its full width, so that it
|
|
is effectively indented half an em from the indent edge and from the
|
|
start edge of other lines. The third scheme aligns the opening brackets
|
|
flush with the start edge of lines, but hangs them inside the indent on
|
|
the first line (resulting in an effective half-em indent instead of the
|
|
full em for paragraphs that begin with an opening bracket)." height=360
|
|
src=opening-brackets-at-line-head.png width=646>
|
|
|
|
<p class=caption>Positioning of opening brackets at line head <a
|
|
href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a></p>
|
|
</div>
|
|
|
|
<p>Assuming a UA style sheet of <code>p { margin: 1em 0; }</code>, CSS can
|
|
achieve the Japanese typesetting styles with the following rules:
|
|
|
|
<ul>
|
|
<li>Brackets flush with indent, flush with other lines (first scheme):
|
|
<pre>p { /* Flush alignment */
|
|
<!-- --> margin: 0;
|
|
<!-- --> text-indent: 1em;
|
|
<!-- --> text-spacing: trim-start;
|
|
<!-- -->}</pre>
|
|
|
|
<li>Brackets preserve fullwidth spacing on all lines (second scheme):
|
|
<pre>p { /* Fullwidth alignment */
|
|
<!-- --> margin: 0;
|
|
<!-- --> text-indent: 1em;
|
|
<!-- --> text-spacing: normal;
|
|
<!-- -->}</pre>
|
|
|
|
<li>Brackets hang in indent, flush with other lines (third scheme):
|
|
<pre>p { /* Hanging alignment */
|
|
<!-- --> margin: 0;
|
|
<!-- --> text-indent: 1em;
|
|
<!-- --> text-spacing: trim-start;
|
|
<!-- --> hanging-punctuation: first;
|
|
<!-- -->}</pre>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3 id=text-indent><span class=secno>9.1. </span> First Line Indentation:
|
|
the ‘<a href="#text-indent0"><code
|
|
class=property>text-indent</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-indent0>text-indent</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[ <span class=value-inst-length><a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-length"><length></a></span>
|
|
| <span class=value-inst-percentage><a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage"><percentage></a></span>
|
|
] && [ hanging || each-line ]?
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>block containers
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>refers to width of containing block
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>the percentage as specified or the absolute length
|
|
</table>
|
|
|
|
<p>This property specifies the indentation applied to lines of inline
|
|
content in a block. The indent is treated as a margin applied to the start
|
|
edge of the line box. Unless otherwise specified via the ‘<code
|
|
class=css>each-line</code>’ and/or ‘<code
|
|
class=css>hanging</code>’ keywords, only lines that are the <a
|
|
href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo">first
|
|
formatted line</a> of an element are affected. For example, the first line
|
|
of an anonymous block box is only affected if it is the first child of its
|
|
parent element.
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css><length></code>’
|
|
|
|
<dd>Gives the amount of the indent as an absolute length.
|
|
|
|
<dt>‘<a href="#ltlengthgt-or-ltpercentagegt"><code
|
|
class=css><percentage></code></a>’
|
|
|
|
<dd>Gives the amount of the indent as a percentage of the containing
|
|
block's logical width.
|
|
|
|
<dt><dfn id=each-line>‘<code class=css>each-line</code>’</dfn>
|
|
|
|
|
|
<dd>Indentation affects the first line of the block container as well as
|
|
each line after a forced line break, but does not affect lines after a
|
|
text wrap break.
|
|
|
|
<dt><dfn id=hanging>‘<code class=css>hanging</code>’</dfn>
|
|
|
|
<dd>Inverts which lines are affected.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>If ‘<a href="#text-align0"><code
|
|
class=property>text-align</code></a>’ is ‘<code
|
|
class=property>start</code>’ and ‘<a
|
|
href="#text-indent0"><code class=property>text-indent</code></a>’
|
|
is ‘<code class=css>5em</code>’ in left-to-right text with no
|
|
floats present, then first line of text will start 5em into the block:</p>
|
|
|
|
<pre><!--
|
|
--> Since CSS1 it has been possible
|
|
<!-- -->to indent the first line of a block
|
|
<!-- -->element using the 'text-indent'
|
|
<!-- -->property.<!--
|
|
--></pre>
|
|
</div>
|
|
|
|
<p class=note>Note that since the ‘<a href="#text-indent0"><code
|
|
class=property>text-indent</code></a>’ property inherits, when
|
|
specified on a block element, it will affect descendant inline-block
|
|
elements. For this reason, it is often wise to specify ‘<code
|
|
class=css>text-indent: 0</code>’ on elements that are specified
|
|
‘<code class=css>display: inline-block</code>’.
|
|
|
|
<h3 id=hanging-punctuation><span class=secno>9.2. </span> Hanging
|
|
Punctuation: the ‘<a href="#hanging-punctuation0"><code
|
|
class=property>hanging-punctuation</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=hanging-punctuation0>hanging-punctuation</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | [ first || [ force-end | allow-end ] ]
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>inline elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property determines whether a punctuation mark, if one is present,
|
|
may be placed outside the line box (or in the indent) at the start or at
|
|
the end of a line of text.
|
|
|
|
<p class=note>Note that if there is not sufficient padding on the block
|
|
container, hanging punctuation can trigger overflow.
|
|
|
|
<p>Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=none5 title="hanging-punctuation:none">‘<code
|
|
class=css>none</code>’</dfn>
|
|
|
|
<dd>No characters can hang.
|
|
|
|
<dt><dfn id=first title="hanging-punctuation:first">‘<code
|
|
class=css>first</code>’</dfn>
|
|
|
|
<dd>An opening bracket or quote at the start of the <a
|
|
href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo">first
|
|
formatted line</a> of an element hangs. This applies to all characters in
|
|
the Unicode categories Ps, Pf, Pi.
|
|
|
|
<dt><dfn id=force-end title="hanging-punctuation:force-end">‘<code
|
|
class=css>force-end</code>’</dfn>
|
|
|
|
<dd>A stop or comma at the end of a line hangs.
|
|
|
|
<dt><dfn id=allow-end0 title="hanging-punctuation:allow-end">‘<code
|
|
class=css>allow-end</code>’</dfn>
|
|
|
|
<dd>A stop or comma at the end of a line hangs if it does not otherwise
|
|
fit prior to justification.
|
|
</dl>
|
|
|
|
<p>When a punctuation mark hangs, it is not considered when measuring the
|
|
line's contents for fit, alignment, or justification. Depending on the
|
|
line's alignment, this can push the mark outside the line box. At most one
|
|
punctuation character may hang outside each edge of the line.
|
|
|
|
<p class=note>A hanging punctuation mark is still enclosed inside its
|
|
inline box and participates in text justification: its character advance
|
|
width is just not measured when determining how much content fits on the
|
|
line, how much the line's contents need to be expanded or compressed for
|
|
justification, or how to position the content within the line box for text
|
|
alignment.
|
|
|
|
<p>Non-zero start and end borders or padding on an inline box are not
|
|
allowed to hang. This can sometimes prevent a hangable punctuation mark
|
|
from hanging: for example, a period at the end of an inline box with end
|
|
padding cannot hang outside the end edge of a line.
|
|
|
|
<p>Stops and commas allowed to hang include: U+002C COMMA, U+002E FULL
|
|
STOP, U+060C ARABIC COMMA, U+06D4 ARABIC FULL STOP, U+3001 IDEOGRAPHIC
|
|
COMMA, U+3002 IDEOGRAPHIC FULL STOP, U+FF0C FULLWIDTH COMMA, U+FF0E
|
|
FULLWIDTH FULL STOP, U+FE50 SMALL COMMA, U+FE51 SMALL IDEOGRAPHIC COMMA,
|
|
U+FE52 SMALL FULL STOP, U+FF61 HALFWIDTH IDEOGRAPHIC FULL STOP, U+FF64
|
|
HALFWIDTH IDEOGRAPHIC COMMA. The UA may include other characters as
|
|
appropriate.
|
|
|
|
<p class=issue>Should other characters be included?
|
|
|
|
<p class=note>The CSS Working Group would appreciate if UAs including other
|
|
characters would <a href="#status">inform the working group</a> of such
|
|
additions.
|
|
|
|
<p>Support for this property is <em>optional</em>. It is recommended for
|
|
UAs that wish to support CJK typography, particularly those in the
|
|
Japanese market.
|
|
|
|
<div class=example>
|
|
<p>The ‘<code class=css>allow-end</code>’ and ‘<code
|
|
class=css>force-end</code>’ are two variations of hanging
|
|
punctuation used in East Asia.</p>
|
|
|
|
<div>
|
|
<div class=sidefigure> <img alt="hanging-punctuation: allow-end"
|
|
height=51 src=hanging-punctuation-allow-end.png width=202></div>
|
|
|
|
<pre><code class=css><!--
|
|
-->p {
|
|
<!-- --> hanging-punctuation: allow-end;
|
|
<!-- -->}
|
|
<!----></code></pre>
|
|
|
|
<div class=sidefigure> <img alt="hanging-punctuation: force-end"
|
|
height=51 src=hanging-punctuation-force-end.png width=202></div>
|
|
|
|
<pre><code class=css><!--
|
|
-->p {
|
|
<!-- --> hanging-punctuation: force-end;
|
|
<!-- -->}
|
|
<!----></code></pre>
|
|
</div>
|
|
|
|
<p>The punctuation at the end of the first line for ‘<code
|
|
class=css>allow-end</code>’ does not hang, because it fits without
|
|
hanging. However, if ‘<code class=css>force-end</code>’ is
|
|
used, it is forced to hang. The justification measures the line without
|
|
the hanging punctuation. Therefore the line is expanded.</p>
|
|
</div>
|
|
|
|
<h2 id=decoration><span class=secno>10. </span> <a
|
|
name=text-decoration>Text Decoration</a></h2>
|
|
|
|
<h3 id=line-decoration><span class=secno>10.1. </span> Line Decoration:
|
|
Underline, Overline, and Strike-Through</h3>
|
|
|
|
<p>The following properties describe line decorations that are added to the
|
|
content of an element. When specified on or propagated to an inline box,
|
|
such decoration affects all the boxes generated by that element, and is
|
|
further propagated to any in-flow block-level boxes that split the inline
|
|
(see <a
|
|
href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">CSS2.1
|
|
section 9.2.1.1</a>) When specified on or propagated to a a block
|
|
container that establishes an inline formatting context, the decorations
|
|
are propagated to an anonymous inline element that wraps all the in-flow
|
|
inline-level children of the block container. For all other elements, the
|
|
decorations are propagated to any in-flow children.
|
|
|
|
<p class=note>Note that text decorations are not propagated to any
|
|
out-of-flow descendants, nor to the contents of atomic inline-level
|
|
descendants such as inline blocks and inline tables.
|
|
|
|
<p>By default underlines, overlines, and line-throughs are applied only to
|
|
text (including white space, letter spacing, and word spacing): margins,
|
|
borders, and padding are skipped. Elements containing no text, such as
|
|
images, are likewise not decorated. The ‘<a
|
|
href="#text-decoration-skip0"><code
|
|
class=property>text-decoration-skip</code></a>’ property can be used
|
|
to modify this behavior, for example allowing inline replaced elements to
|
|
be underlined or requiring that white space be skipped.
|
|
|
|
<p>In determining the position and thickness of text decoration lines, user
|
|
agents may consider the font sizes and dominant baselines of descendants,
|
|
but for a given element's decoration must use the same position and
|
|
thickness throughout each line box. The <a
|
|
href="#text-decoration-color">color</a> and <a
|
|
href="#text-decoration-style">line style</a> of decorations must remain
|
|
the same on all decorations applied by a given element, even if descendant
|
|
elements have different color or line style values.
|
|
|
|
<p class=issue>One use case we would like to support is to <a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0407.html">change
|
|
color and/or style of descendants while keeping the same position and
|
|
thickness</a>.
|
|
|
|
<div class=example>
|
|
<p>The following figure shows the averaging for underline:
|
|
|
|
<p><img alt="In the first rendering of the underlined text '1st a' with
|
|
'st' as a superscript, both the '1st' and the 'a' are rendered in a small
|
|
font. In the second rendering, the 'a' is rendered in a larger font. In
|
|
the third, both '1st' and 'a' are large." height=105
|
|
src=underline-averaging.gif width=326>
|
|
|
|
<p>In the three fragments of underlined text, the underline is drawn
|
|
consecutively lower and thicker as the ratio of large text to small text
|
|
increases.</p>
|
|
</div>
|
|
|
|
<p>Relatively positioning a descendant moves all text decorations affecting
|
|
it along with the descendant's text; it does not affect calculation of the
|
|
decoration's initial position on that line. The ‘<code
|
|
class=property>visibility</code>’ property, filters, and other
|
|
graphical transformations likewise affect text decorations as part of the
|
|
text they're drawn on, even if the decorations were specified on an
|
|
ancestor element.
|
|
|
|
<div class=example>
|
|
<p>In the following style sheet and document fragment:</p>
|
|
|
|
<pre><code class=css>
|
|
<!-- --> blockquote { text-decoration: underline; color: blue; }
|
|
<!-- --> em { display: block; }
|
|
<!-- --> cite { color: fuchsia; }
|
|
<!----></code></pre>
|
|
|
|
<pre class=html><code>
|
|
<!-- --> <blockquote>
|
|
<!-- --> <p>
|
|
<!-- --> <span>
|
|
<!-- --> Help, help!
|
|
<!-- --> <em> I am under a hat! </em>
|
|
<!-- -->
|
|
<!-- --> <cite> —GwieF </cite>
|
|
<!-- --> </span>
|
|
<!-- --> </p>
|
|
<!-- --> </blockquote>
|
|
<!----></code></pre>
|
|
|
|
<p>...the underlining for the blockquote element is propagated to an
|
|
anonymous inline element that surrounds the span element, causing the
|
|
text "Help, help!" to be blue, with the blue underlining from the
|
|
anonymous inline underneath it, the color being taken from the blockquote
|
|
element. The <code><em>text</em></code> in the em block is
|
|
also underlined, as it is in an in-flow block to which the underline is
|
|
propagated. The final line of text is fuchsia, but the underline
|
|
underneath it is still the blue underline from the anonymous inline
|
|
element.</p>
|
|
|
|
<p><img alt="Sample rendering of the above underline example"
|
|
src=underline-example.png></p>
|
|
|
|
<p>This diagram shows the boxes involved in the example above. The rounded
|
|
aqua line represents the anonymous inline element wrapping the inline
|
|
contents of the paragraph element, the rounded blue line represents the
|
|
span element, and the orange lines represent the blocks.</p>
|
|
</div>
|
|
|
|
<h4 id=text-decoration-line><span class=secno>10.1.1. </span> Text
|
|
Decoration Lines: the ‘<a href="#text-decoration-line0"><code
|
|
class=property>text-decoration-line</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-decoration-line0>text-decoration-line</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | [ underline | no-underline | replace-underline ] || [
|
|
overline | no-overline | replace-overline ] || [ line-through |
|
|
no-line-through | replace-line-through ] | remove-all
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no (but see prose)
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>Specifies what line decorations, if any, are added to the element.
|
|
Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=none6 title="text-decoration-line:none">‘<code
|
|
class=css>none</code>’</dfn>
|
|
|
|
<dd>Neither produces nor inhibits text decoration.
|
|
|
|
<dt><dfn id=underline>‘<code class=css>underline</code>’</dfn>
|
|
|
|
|
|
<dd>Each line of text is underlined.
|
|
|
|
<dt><dfn id=no-underline>‘<code
|
|
class=css>no-underline</code>’</dfn>
|
|
|
|
<dd>Inhibits propagated underlines.
|
|
|
|
<dt><dfn id=replace-underline>‘<code
|
|
class=css>replace-underline</code>’</dfn>
|
|
|
|
<dd>Inhibits propagated underlines and produces an underline.
|
|
|
|
<dt><dfn id=overline>‘<code class=css>overline</code>’</dfn>
|
|
|
|
<dd>Each line of text has a line above it (i.e. on the opposite side from
|
|
an underline).
|
|
|
|
<dt><dfn id=no-overline>‘<code
|
|
class=css>no-overline</code>’</dfn>
|
|
|
|
<dd>Inhibits propagated overlines.
|
|
|
|
<dt><dfn id=replace-overline>‘<code
|
|
class=css>replace-overline</code>’</dfn>
|
|
|
|
<dd>Inhibits propagated overlines and produces an overline.
|
|
|
|
<dt><dfn id=line-through>‘<code
|
|
class=css>line-through</code>’</dfn>
|
|
|
|
<dd>Each line of text has a line through the middle.
|
|
|
|
<dt><dfn id=no-line-through>‘<code
|
|
class=css>no-line-through</code>’</dfn>
|
|
|
|
<dd>Inhibits propagated line-throughs.
|
|
|
|
<dt><dfn id=replace-line-through>‘<code
|
|
class=css>replace-line-through</code>’</dfn>
|
|
|
|
<dd>Inhibits propagated line-throughs and produces an line-through.
|
|
|
|
<dt><dfn id=remove-all>‘<code
|
|
class=css>remove-all</code>’</dfn>
|
|
|
|
<dd>Inhibits all propagated text decorations.
|
|
</dl>
|
|
|
|
<h4 id=text-decoration-color><span class=secno>10.1.2. </span> Text
|
|
Decoration Color: the ‘<a href="#text-decoration-color0"><code
|
|
class=property>text-decoration-color</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-decoration-color0>text-decoration-color</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><a href="http://www.w3.org/TR/css3-color/#color0"><span
|
|
class=value-inst-color><color></span></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>currentColor
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>the computed color
|
|
</table>
|
|
|
|
<p>This property specifies the color of text decoration (underlines
|
|
overlines, and line-throughs) set on the element with ‘<a
|
|
href="#text-decoration-line0"><code
|
|
class=property>text-decoration-line</code></a>’.
|
|
|
|
<h4 id=text-decoration-style><span class=secno>10.1.3. </span> Text
|
|
Decoration Style: the ‘<a href="#text-decoration-style0"><code
|
|
class=property>text-decoration-style</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-decoration-style0>text-decoration-style</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>solid | double | dotted | dashed | wavy
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>solid
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property specifies the style of the line(s) drawn for text
|
|
decoration specified on the element. Values have the same meaning as for
|
|
the <a
|
|
href="http://www.w3.org/TR/css3-background/#the-border-style">border-style
|
|
properties</a> <a href="#CSS3BG"
|
|
rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. ‘<code
|
|
class=css>wavy</code>’ indicates a wavy line.
|
|
|
|
<h4 id=text-decoration><span class=secno>10.1.4. </span> Text Decoration
|
|
Shorthand: the ‘<a href="#text-decoration0"><code
|
|
class=property>text-decoration</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-decoration0>text-decoration</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><var><a
|
|
href="#text-decoration-line"><text-decoration-line></a></var> ||
|
|
<var><a
|
|
href="#text-decoration-color"><text-decoration-color></a></var>
|
|
|| <var><a
|
|
href="#text-decoration-style"><text-decoration-style></a></var>
|
|
|| blink
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property is a shorthand for setting ‘<a
|
|
href="#text-decoration-line0"><code
|
|
class=property>text-decoration-line</code></a>’, ‘<a
|
|
href="#text-decoration-color0"><code
|
|
class=property>text-decoration-color</code></a>’, and ‘<a
|
|
href="#text-decoration-style0"><code
|
|
class=property>text-decoration-style</code></a>’ in one declaration.
|
|
Omitted values are set to their initial values. A ‘<a
|
|
href="#text-decoration0"><code
|
|
class=property>text-decoration</code></a>’ declaration that omits
|
|
both the ‘<a href="#text-decoration-color0"><code
|
|
class=property>text-decoration-color</code></a>’ and ‘<a
|
|
href="#text-decoration-style0"><code
|
|
class=property>text-decoration-style</code></a>’ values is
|
|
backwards-compatible with CSS Levels 1 and 2.
|
|
|
|
<p>If the ‘<code class=css>blink</code>’ keyword is specified
|
|
the text blinks (alternates between visible and invisible). Conforming
|
|
user agents may simply not blink the text. Note that not blinking the text
|
|
is one technique to satisfy <a
|
|
href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint
|
|
3.3 of WAI-UAAG</a>.
|
|
|
|
<div class=example>
|
|
<p>The following example underlines unvisited links with a solid blue
|
|
underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p>
|
|
|
|
<pre><code class=css>
|
|
<!-- -->:link {
|
|
<!-- --> color: blue;
|
|
<!-- --> text-decoration: underline;
|
|
<!-- --> text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */
|
|
<!-- -->}
|
|
<!-- --></code></pre>
|
|
</div>
|
|
|
|
<h4 id=text-decoration-skip><span class=secno>10.1.5. </span> Text
|
|
Decoration Line Continuity: the ‘<a
|
|
href="#text-decoration-skip0"><code
|
|
class=property>text-decoration-skip</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-decoration-skip0>text-decoration-skip</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | [ objects || spaces || ink || edges ]
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>objects
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property specifies what parts of the element's content any text
|
|
decoration affecting the element must skip over. It controls all text
|
|
decoration lines drawn by the element and also any text decoration lines
|
|
drawn by its ancestors. Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=none7 title="text-decoration-skip:none">‘<code
|
|
class=css>none</code>’</dfn>
|
|
|
|
<dd>Skip nothing: text-decoration is drawn for all text content and for
|
|
inline replaced elements.
|
|
|
|
<dt><dfn id=objects title="text-decoration-skip:objects">‘<code
|
|
class=css>objects</code>’</dfn>
|
|
|
|
<dd>Skip this element if it is an atomic inline (such as an image or
|
|
inline-block).
|
|
|
|
<dt><dfn id=spaces0 title="text-decoration-skip:spaces">‘<code
|
|
class=css>spaces</code>’</dfn>
|
|
|
|
<dd>Skip white space: this includes regular spaces (U+0020) and tabs
|
|
(U+0009), as well as nbsp (U+00A0), ideographic space (U+3000), all fixed
|
|
width spaces (such as U+2000–U+200A, U+202F and U+205F), and any
|
|
adjacent letter-spacing or word-spacing.
|
|
|
|
<dt><dfn id=ink title="text-decoration-skip:ink">‘<code
|
|
class=css>ink</code>’</dfn>
|
|
|
|
<dd>Skip over where glyphs are drawn: interrupt the decoration line to let
|
|
text show through where the text decoration would otherwise cross over a
|
|
glyph. The UA may also skip a small distance to either side of the glyph
|
|
outline.
|
|
|
|
<dt><dfn id=edges title="text-decoration-skip:edges">‘<code
|
|
class=css>edges</code>’</dfn>
|
|
|
|
<dd>The UA should place the start and end of the line inwards from the
|
|
content edge of the decorating element so that, e.g. two underlined
|
|
elements side-by-side do not appear to have a single underline. (This is
|
|
important in Chinese, where underlining is a form of punctuation.)
|
|
</dl>
|
|
|
|
<p class=issue>Do we need a value that <em>doesn't</em> skip margins and
|
|
padding?
|
|
|
|
<p class=note>Note that this property inherits and that descendant elements
|
|
can have a different setting.
|
|
|
|
<h4 id=text-underline-position><span class=secno>10.1.6. </span> Text
|
|
Underline Position: the ‘<a href="#text-underline-position0"><code
|
|
class=property>text-underline-position</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-underline-position0>text-underline-position</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>auto | alphabetic | below left | below right
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property sets the position of an underline specified on the same
|
|
element: it does not affect underlines specified by ancestor elements.
|
|
Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=auto2>‘<code class=css>auto</code>’</dfn>
|
|
|
|
<dd>The user agent may use any algorithm to determine the underline's
|
|
position; however in vertical typographic mode, if the language of the
|
|
element is set to Japanese or Korean (matches <code>:lang(ja)</code> or
|
|
<code>:lang(ko)</code>) the underline must be drawn on the right side of
|
|
the text as described for ‘<code class=css>below
|
|
right</code>’.
|
|
<p class=note>It is suggested that the underline position be ‘<code
|
|
class=css>alphabetic</code>’ unless it crosses either subscripted
|
|
(or otherwise lowered) text, or it affects characters from Asian scripts
|
|
such as Han or Tibetan, for which an alphabetic underline is too high:
|
|
in such cases, aligning to the em box edge as described for ‘<code
|
|
class=css>below left</code>’ is more appropriate.
|
|
|
|
<dt><dfn id=alphabetic>‘<code
|
|
class=css>alphabetic</code>’</dfn>
|
|
|
|
<dd>The underline is aligned with the alphabetic baseline. In this case
|
|
the underline is likely to cross some descenders.
|
|
|
|
<dt><dfn id=below-left>‘<code class=css>below
|
|
left</code>’</dfn>
|
|
|
|
<dd>The underline is aligned with the under edge of the element's content
|
|
box. In this case the underline usually does not cross the descenders.
|
|
(This is sometimes called "accounting" underline.) If the underline
|
|
affects descendants with a lower content edge, the user agent should
|
|
shift the underline down further to the lowest underlined content box
|
|
edge. The user agent may ignore elements with ‘<code
|
|
class=css>vertical-align</code>’ values given as lengths,
|
|
percentages, ‘<code class=css>top</code>’, or ‘<code
|
|
class=css>bottom</code>’ when making this adjustment. (Note that
|
|
images that are not affected by the underline per ‘<a
|
|
href="#text-decoration-skip0"><code
|
|
class=property>text-decoration-skip</code></a>’ will not affect the
|
|
position of the underline.)
|
|
|
|
<dt><dfn id=below-right>‘<code class=css>below
|
|
right</code>’</dfn>
|
|
|
|
<dd>In horizontal typographic mode, this value is equivalent to
|
|
‘<code class=css>below left</code>’. In vertical typographic
|
|
mode, the underline is aligned as for ‘<code class=css>below
|
|
left</code>’, except it is aligned to the right edge of the text.
|
|
If this causes the underline to be drawn on the "over" side of the text,
|
|
then an overline also switches sides and is drawn on the "under" side.
|
|
</dl>
|
|
|
|
<div class=note>
|
|
<p>In some cases (such as in OpenType) the font format can offer
|
|
information about the appropriate position of an underline. Typically
|
|
this information gives the position of an ‘<code
|
|
class=css>alphabetic</code>’ underline; in some cases (especially
|
|
in CJK fonts), it gives the position of a ‘<code class=css>below
|
|
left</code>’ underline. (In this case, the font's underline metrics
|
|
typically touch the bottom edge of the em box). The UA is encouraged to
|
|
use information (such as the underline thickness, or appropriate
|
|
alphabetic alignment) from the font wherever appropriate.</p>
|
|
</div>
|
|
|
|
<h3 id=emphasis-marks><span class=secno>10.2. </span> Emphasis Marks</h3>
|
|
|
|
<p>East Asian documents traditionally use small symbols next to each glyph
|
|
to emphasize a run of text. For example:
|
|
|
|
<div class=figure>
|
|
<p> <img alt="Example of emphasis in Japanese appearing above the text"
|
|
class=example height=28 src=text-emphasis-ja.gif width=225></p>
|
|
|
|
<p class=caption>Accent emphasis (shown in blue for clarity) applied to
|
|
Japanese text</p>
|
|
</div>
|
|
|
|
<h4 id=text-emphasis-style><span class=secno>10.2.1. </span> Emphasis Mark
|
|
Style: the ‘<a href="#text-emphasis-style0"><code
|
|
class=property>text-emphasis-style</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-emphasis-style0>text-emphasis-style</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | [ [ filled | open ] || [ dot | circle | double-circle |
|
|
triangle | sesame ] ] | <a class=noxref
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"><span
|
|
class=value-inst-string><string></span></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>‘<code class=property>none</code>’, a pair of keywords
|
|
representing the shape and fill, or a string
|
|
</table>
|
|
|
|
<p>This property applies emphasis marks to the element's text. Values have
|
|
the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=none8 title="text-emphasis:none">‘<code
|
|
class=css>none</code>’</dfn>
|
|
|
|
<dd>No emphasis marks.
|
|
|
|
<dt><dfn id=filled title="text-emphasis:filled">‘<code
|
|
class=css>filled</code>’</dfn>
|
|
|
|
<dd>The shape is filled with solid color.
|
|
|
|
<dt><dfn id=open title="text-emphasis:open">‘<code
|
|
class=css>open</code>’</dfn>
|
|
|
|
<dd>The shape is hollow.
|
|
|
|
<dt><dfn id=dot title="text-emphasis:dot">‘<code
|
|
class=css>dot</code>’</dfn>
|
|
|
|
<dd>Display small circles as marks. The filled dot is U+2022 ‘<code
|
|
class=css>•</code>’, and the open dot is U+25E6 ‘<code
|
|
class=css>◦</code>’.
|
|
|
|
<dt><dfn id=circle title="text-emphasis:circle">‘<code
|
|
class=css>circle</code>’</dfn>
|
|
|
|
<dd>Display large circles as marks. The filled circle is U+25CF
|
|
‘<code class=css>●</code>’, and the open circle is
|
|
U+25CB ‘<code class=css>○</code>’.
|
|
|
|
<dt><dfn id=double-circle title="text-emphasis:double-circle">‘<code
|
|
class=css>double-circle</code>’</dfn>
|
|
|
|
<dd>Display double circles as marks. The filled double-circle is U+25C9
|
|
‘<code class=css>◉</code>’, and the open double-circle
|
|
is U+25CE ‘<code class=css>◎</code>’.
|
|
|
|
<dt><dfn id=triangle title="text-emphasis:triangle">‘<code
|
|
class=css>triangle</code>’</dfn>
|
|
|
|
<dd>Display triangles as marks. The filled triangle is U+25B2 ‘<code
|
|
class=css>▲</code>’, and the open triangle is U+25B3
|
|
‘<code class=css>△</code>’.
|
|
|
|
<dt><dfn id=sesame title="text-emphasis:sesame">‘<code
|
|
class=css>sesame</code>’</dfn>
|
|
|
|
<dd>Display sesames as marks. The filled sesame is U+FE45 ‘<code
|
|
class=css>﹅</code>’, and the open sesame is U+FE46
|
|
‘<code class=css>﹆</code>’.
|
|
|
|
<dt><dfn id=ltstringgt0 title="text-emphasis:sesame">‘<code
|
|
class=css><var><string></var></code>’</dfn>
|
|
|
|
<dd>Display the given string as marks. Authors should not specify more
|
|
than one <a href="#character"><i>character</i></a> in <string>. The
|
|
UA may truncate or ignore strings consisting of more than one grapheme
|
|
cluster.
|
|
</dl>
|
|
|
|
<p>If a shape keyword is specified but neither of ‘<code
|
|
class=css>filled</code>’ nor ‘<code
|
|
class=css>open</code>’ is specified, ‘<code
|
|
class=css>filled</code>’ is assumed. If only ‘<code
|
|
class=css>filled</code>’ or ‘<code
|
|
class=css>open</code>’ is specified, the shape keyword computes to
|
|
‘<code class=css>circle</code>’ in horizontal writing mode and
|
|
‘<code class=css>sesame</code>’ in vertical writing mode.
|
|
|
|
<p>The marks should be drawn using the element's font settings with its
|
|
size scaled down to 50%. However, not all fonts have all these glyphs, and
|
|
some fonts use inappropriate sizes for emphasis marks in these code
|
|
points. The UA may opt to use a font known to be good for emphasis marks,
|
|
or the marks may instead be synthesized by the UA. Marks must remain
|
|
upright in vertical typographic modes: like CJK characters, they do not
|
|
rotate to match the writing mode.
|
|
|
|
<div class=example>
|
|
<p>One example of good fonts for emphasis marks is Adobe's opensource
|
|
project, <a href="http://sourceforge.net/adobe/kenten-generic/">Kenten
|
|
Generic OpenType Font</a>, which is specially designed for the emphasis
|
|
marks.</p>
|
|
</div>
|
|
|
|
<p>The marks are drawn once for each <a
|
|
href="#character"><i>character</i></a>. However, emphasis marks are not
|
|
drawn for characters that are:
|
|
|
|
<ul>
|
|
<li><a href="#word-separator">Word separators</a> or that belong to the
|
|
Unicode separator classes (Z*). (But note that emphasis marks
|
|
<em>are</em> drawn for a space that combines with any combining
|
|
characters.)
|
|
|
|
<li>Characters belonging to the Unicode classes for control codes and
|
|
unassigned characters (Cc, Cf, Cn).
|
|
|
|
<li>Characters designated by ‘<a href="#text-emphasis-skip0"><code
|
|
class=property>text-emphasis-skip</code></a>’.
|
|
</ul>
|
|
|
|
<p>If emphasis marks are drawn for characters for which ruby is drawn in
|
|
the same position as the emphasis mark, the ruby should be stacked between
|
|
the emphasis marks and the base text. In this case, the position of the
|
|
emphasis marks for a given element should be determined as if all
|
|
characters have ruby boxes of the same height as the highest ruby box in
|
|
the element. If the UA is not capable of drawing ruby and emphasis marks
|
|
on the same side, the UA may hide ruby and draw only emphasis marks.
|
|
|
|
<div class=figure>
|
|
<p><img alt="Example of emphasis marks applied to 4 characters, and ruby
|
|
to 2 of them" height=50 src=text-emphasis-ruby.png width=134></p>
|
|
|
|
<p class=caption>Emphasis marks applied to 4 characters, and ruby to 2 of
|
|
them</p>
|
|
</div>
|
|
|
|
<p class=note>A future level of CSS may define controls to specify what to
|
|
do when emphasis marks and ruby text coincide.
|
|
|
|
<h4 id=text-emphasis-color><span class=secno>10.2.2. </span> Emphasis Mark
|
|
Color: the ‘<a href="#text-emphasis-color0"><code
|
|
class=property>text-emphasis-color</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-emphasis-color0>text-emphasis-color</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><color>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>currentcolor
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property describes the foreground color of the emphasis marks.
|
|
|
|
<h4 id=text-emphasis><span class=secno>10.2.3. </span> Emphasis Mark
|
|
Shorthand: the ‘<a href="#text-emphasis0"><code
|
|
class=property>text-emphasis</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-emphasis0>text-emphasis</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>‘<code class=css><<a
|
|
href="#text-emphasis-style">text-emphasis-style</a>></code>’
|
|
|| ‘<code class=css><<a
|
|
href="#text-emphasis-color">text-emphasis-color</a>></code>’
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>see individual properties
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>This property is a shorthand for setting ‘<a
|
|
href="#text-emphasis-style0"><code
|
|
class=property>text-emphasis-style</code></a>’ and ‘<a
|
|
href="#text-emphasis-color0"><code
|
|
class=property>text-emphasis-color</code></a>’ in one declaration.
|
|
Omitted values are set to their initial values.
|
|
|
|
<p class=note>Note that ‘<a href="#text-emphasis-position0"><code
|
|
class=property>text-emphasis-position</code></a>’ is not reset in
|
|
this shorthand. This is because typically the shape and color vary, but
|
|
the position is consistent for a particular language throughout the
|
|
document. Therefore the position should inherit independently.
|
|
|
|
<h4 id=text-emphasis-position><span class=secno>10.2.4. </span> Emphasis
|
|
Mark Position: the ‘<a href="#text-emphasis-position0"><code
|
|
class=property>text-emphasis-position</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-emphasis-position0>text-emphasis-position</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[ above | below ] && [ right | left ]
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>above right
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property describes where emphasis marks are drawn at. The values
|
|
have following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=above title="text-emphasis:above">‘<code
|
|
class=css>above</code>’</dfn>
|
|
|
|
<dd>Draw marks over the text in horizontal typographic mode.
|
|
|
|
<dt><dfn id=below title="text-emphasis:below">‘<code
|
|
class=css>below</code>’</dfn>
|
|
|
|
<dd>Draw marks under the text in horizontal typographic mode.
|
|
|
|
<dt><dfn id=right0 title="text-emphasis:right">‘<code
|
|
class=css>right</code>’</dfn>
|
|
|
|
<dd>Draw marks to the right of the text in vertical typographic mode.
|
|
|
|
<dt><dfn id=left0 title="text-emphasis:left">‘<code
|
|
class=css>left</code>’</dfn>
|
|
|
|
<dd>Draw marks to the left of the text in vertical typographic mode.
|
|
</dl>
|
|
|
|
<p>Emphasis marks are drawn exactly as if each character was assigned the
|
|
mark as its ruby annotation text with the ruby position given by ‘<a
|
|
href="#text-emphasis-position0"><code
|
|
class=property>text-emphasis-position</code></a>’ and the ruby
|
|
alignment as centered.
|
|
|
|
<p>The effect of emphasis marks on the line height is the same as for ruby
|
|
text.
|
|
|
|
<div class=note>
|
|
<p>Note, the preferred position of emphasis marks depends on the language.
|
|
In Japanese for example, the preferred position is ‘<code
|
|
class=css>above right</code>’. In Chinese, on the other hand, the
|
|
preferred position is ‘<code class=css>below right</code>’.
|
|
The informative table below summarizes the preferred emphasis mark
|
|
positions for Chinese and Japanese:</p>
|
|
|
|
<table class=data>
|
|
<caption>Preferred emphasis mark and ruby position</caption>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th rowspan=2 scope=col>Language
|
|
|
|
<th colspan=2 scope=col>Preferred mark position
|
|
|
|
<th colspan=2 rowspan=2 scope=col>Illustration
|
|
|
|
<tr>
|
|
<th>Horizontal
|
|
|
|
<th>Vertical
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td scope=row>Japanese
|
|
|
|
<td>above
|
|
|
|
<td>right
|
|
|
|
<td> <img alt="Emphasis marks appear above each emphasized character in
|
|
horizontal Japanese text." height=28 src=text-emphasis-ja.gif
|
|
title="Emphasis (shown in blue for clarity) applied above a fragment
|
|
of Japanese text" width=225>
|
|
|
|
<td rowspan=2> <img alt="Emphasis marks appear on the right of each
|
|
emphasized character in vertical Japanese text." height=89
|
|
src=text-emphasis-v.gif title="Emphasis applied on the right of a
|
|
fragment of Japanese text" width=34>
|
|
</tr>
|
|
<!--
|
|
<tr>
|
|
<td scope="row">Mongolian</td>
|
|
<td><span class="issue">?</span></td>
|
|
<td>right</td>
|
|
</tr>
|
|
-->
|
|
|
|
<tr>
|
|
<td scope=row>Chinese
|
|
|
|
<td>below
|
|
|
|
<td>right
|
|
|
|
<td> <img alt="Emphasis marks appear below each emphasized character in
|
|
horizontal Simplified Chinese text." height=28
|
|
src=text-emphasis-zh.gif title="Emphasis (shown in blue for clarity)
|
|
applied below a fragment of Chinese text" width=133>
|
|
</table>
|
|
</div>
|
|
|
|
<h4 id=text-emphasis-skip><span class=secno>10.2.5. </span> Emphasis Mark
|
|
Skip: the ‘<a href="#text-emphasis-skip0"><code
|
|
class=property>text-emphasis-skip</code></a>’ property</h4>
|
|
|
|
<p class=issue>This section is under brainstorming.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-emphasis-skip0>text-emphasis-skip</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>spaces || punctuation || symbols || narrow
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>spaces
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property describes for which characters marks are drawn. The values
|
|
have following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=spaces1 title="text-emphasis-skip:spaces">‘<code
|
|
class=css>spaces</code>’</dfn>
|
|
|
|
<dd>Skip <a href="#word-separator">Word separators</a> or characters
|
|
belonging to the Unicode separator category (Z*). (But note that emphasis
|
|
marks <em>are</em> drawn for a space that combines with any combining
|
|
characters.)
|
|
|
|
<dt><dfn id=punctuation0
|
|
title="text-emphasis-skip:punctuation">‘<code
|
|
class=css>punctuation</code>’</dfn>
|
|
|
|
<dd>Skip punctuation. Punctuation in this definition includes characters
|
|
belonging to the Unicode Pc, Pd, Ps, Pe, Pi, or Pf categories. It also
|
|
includes characters where the Unicode category is Po and the
|
|
Sentence_Break property <a href="#UAX29"
|
|
rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a> of the Unicode database <a
|
|
href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a> is ATerm,
|
|
Close, SContinue, or STerm.
|
|
|
|
<dt><dfn id=symbols title="text-emphasis-skip:symbols">‘<code
|
|
class=css>symbols</code>’</dfn>
|
|
|
|
<dd>Skip symbols. Symbols in this definition includes characters belonging
|
|
to the Unicode S* category. It also includes the Unicode Po category that
|
|
are not defined as ‘<code
|
|
class=css><a>punctuation</a></code>’ above.
|
|
|
|
<dt><dfn id=narrow title="text-emphasis-skip:narrow">‘<code
|
|
class=css>narrow</code>’</dfn>
|
|
|
|
<dd>Skip characters where the East_Asian_Width property <a href="#UAX11"
|
|
rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a> of the Unicode database <a
|
|
href="#UAX44" rel=biblioentry>[UAX44]<!--{{!UAX44}}--></a> is not F
|
|
(Fullwidth) or W (Wide).
|
|
</dl>
|
|
|
|
<p>Characters belonging to the Unicode classes for control codes and
|
|
unassigned characters (Cc, Cf, Cn) are skipped regardless of the value of
|
|
this property.
|
|
|
|
<p class=issue>This syntax requires UA to implement drawing marks for
|
|
spaces. Is there any use case for doing so? If not, should we modify the
|
|
syntax not to allow drawing marks for spaces?
|
|
|
|
<h3 id=text-shadow><span class=secno>10.3. </span> Text Shadows: the
|
|
‘<a href="#text-shadow0"><code
|
|
class=property>text-shadow</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=text-shadow0>text-shadow</dfn>
|
|
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>none | [<a href="#ltshadowgt"><var><shadow></var></a>, ] * <a
|
|
href="#ltshadowgt"><var><shadow></var></a>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>a color plus three absolute <length>s
|
|
</table>
|
|
|
|
<p>This property accepts a comma-separated list of shadow effects to be
|
|
applied to the text of the element. <dfn
|
|
id=ltshadowgt><shadow></dfn> is the same as defined for the
|
|
‘<code class=property>box-shadow</code>’ property except that
|
|
the ‘<code class=css>inset</code>’ keyword is not allowed. The
|
|
shadow is applied to all of the element's text as well as any text
|
|
decorations it specifies.
|
|
|
|
<p>The shadow effects are applied front-to-back: the first shadow is on
|
|
top. The shadows may thus overlay each other, but they never overlay the
|
|
text itself. The shadow must be painted at a stack level between the
|
|
element's border and/or background, if present, and the elements text and
|
|
text decoration. UAs should avoid painting text shadows over text in
|
|
adjacent elements belonging to the same stack level and stacking context.
|
|
(This may mean that the exact stack level of the shadows depends on
|
|
whether the element has a border or background: the exact stacking
|
|
behavior of text shadows is thus UA-defined.)
|
|
|
|
<p>Unlike ‘<code class=property>box-shadow</code>’, text
|
|
shadows are not clipped to the shadowed shape and may show through if the
|
|
text is partially-transparent. Like ‘<code
|
|
class=property>box-shadow</code>’, text shadows do not influence
|
|
layout, and do not trigger scrolling or increase the size of the
|
|
scrollable area.
|
|
|
|
<p class=note>The painting order of shadows defined here is the opposite of
|
|
that defined in the 1998 <a
|
|
href="http://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2
|
|
Recommendation</a>.
|
|
|
|
<p>The ‘<a href="#text-shadow0"><code
|
|
class=css>text-shadow</code></a>’ property applies to both the
|
|
<code>::first-line</code> and <code>::first-letter</code> pseudo-elements.
|
|
|
|
<h2 id=conformance><span class=secno>11. </span> Conformance</h2>
|
|
|
|
<h3 id=conventions><span class=secno>11.1. </span> Document Conventions</h3>
|
|
|
|
<p>Conformance requirements are expressed with a combination of descriptive
|
|
assertions and RFC 2119 terminology. The key words “MUST”, “MUST
|
|
NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
|
|
“SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
|
|
normative parts of this document are to be interpreted as described in RFC
|
|
2119. However, for readability, these words do not appear in all uppercase
|
|
letters in this specification.
|
|
|
|
<p>All of the text of this specification is normative except sections
|
|
explicitly marked as non-normative, examples, and notes. <a
|
|
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
|
|
|
|
<p>Examples in this specification are introduced with the words “for
|
|
example” or are set apart from the normative text with
|
|
<code>class="example"</code>, like this:
|
|
|
|
<div class=example>
|
|
<p>This is an example of an informative example.</p>
|
|
</div>
|
|
|
|
<p>Informative notes begin with the word “Note” and are set apart from
|
|
the normative text with <code>class="note"</code>, like this:
|
|
|
|
<p class=note>Note, this is an informative note.
|
|
|
|
<h3 id=conformance-classes><span class=secno>11.2. </span> Conformance
|
|
Classes</h3>
|
|
|
|
<p>Conformance to CSS Text Level 3 is defined for three conformance
|
|
classes:
|
|
|
|
<dl>
|
|
<dt><dfn id=style-sheet title="style sheet!!as conformance class">style
|
|
sheet</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
|
|
style sheet</a>.
|
|
|
|
<dt><dfn id=renderer>renderer</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
|
|
that interprets the semantics of a style sheet and renders documents that
|
|
use them.
|
|
|
|
<dt><dfn id=authoring-tool>authoring tool</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
|
|
that writes a style sheet.
|
|
</dl>
|
|
|
|
<p>A style sheet is conformant to CSS Text Level 3 if all of its
|
|
declarations that use properties defined in this module have values that
|
|
are valid according to the generic CSS grammar and the individual grammars
|
|
of each property as given in this module.
|
|
|
|
<p>A renderer is conformant to CSS Text Level 3 if, in addition to
|
|
interpreting the style sheet as defined by the appropriate specifications,
|
|
it supports all the features defined by CSS Text Level 3 by parsing them
|
|
correctly and rendering the document accordingly. However, the inability
|
|
of a UA to correctly render a document due to limitations of the device
|
|
does not make the UA non-conformant. (For example, a UA is not required to
|
|
render color on a monochrome monitor.)
|
|
|
|
<p>An authoring tool is conformant to CSS Text Level 3 if it writes style
|
|
sheets that are syntactically correct according to the generic CSS grammar
|
|
and the individual grammars of each feature in this module, and meet all
|
|
other conformance requirements of style sheets as described in this
|
|
module.
|
|
|
|
<h3 id=partial><span class=secno>11.3. </span> Partial Implementations</h3>
|
|
|
|
<p>So that authors can exploit the forward-compatible parsing rules to
|
|
assign fallback values, CSS renderers <strong>must</strong> treat as
|
|
invalid (and <a
|
|
href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
|
|
appropriate</a>) any at-rules, properties, property values, keywords, and
|
|
other syntactic constructs for which they have no usable level of support.
|
|
In particular, user agents <strong>must not</strong> selectively ignore
|
|
unsupported component values and honor supported values in a single
|
|
multi-value property declaration: if any value is considered invalid (as
|
|
unsupported values must be), CSS requires that the entire declaration be
|
|
ignored.
|
|
|
|
<h3 id=experimental><span class=secno>11.4. </span> Experimental
|
|
Implementations</h3>
|
|
|
|
<p>To avoid clashes with future CSS features, the CSS2.1 specification
|
|
reserves a <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
|
|
syntax</a> for proprietary and experimental extensions to CSS.
|
|
|
|
<p>Prior to a specification reaching the Candidate Recommendation stage in
|
|
the W3C process, all implementations of a CSS feature are considered
|
|
experimental. The CSS Working Group recommends that implementations use a
|
|
vendor-prefixed syntax for such features, including those in W3C Working
|
|
Drafts. This avoids incompatibilities with future changes in the draft.
|
|
|
|
<h3 id=testing><span class=secno>11.5. </span>Non-Experimental
|
|
Implementations</h3>
|
|
|
|
<p>Once a specification reaches the Candidate Recommendation stage,
|
|
non-experimental implementations are possible, and implementors should
|
|
release an unprefixed implementation of any CR-level feature they can
|
|
demonstrate to be correctly implemented according to spec.
|
|
|
|
<p>To establish and maintain the interoperability of CSS across
|
|
implementations, the CSS Working Group requests that non-experimental CSS
|
|
renderers submit an implementation report (and, if necessary, the
|
|
testcases used for that implementation report) to the W3C before releasing
|
|
an unprefixed implementation of any CSS features. Testcases submitted to
|
|
W3C are subject to review and correction by the CSS Working Group.
|
|
|
|
<p>Further information on submitting testcases and implementation reports
|
|
can be found from on the CSS Working Group's website at <a
|
|
href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
|
|
Questions should be directed to the <a
|
|
href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
|
|
mailing list.
|
|
|
|
<h3 id=cr-exit-criteria><span class=secno>11.6. </span> CR Exit Criteria</h3>
|
|
|
|
<p> For this specification to be advanced to Proposed Recommendation, there
|
|
must be at least two independent, interoperable implementations of each
|
|
feature. Each feature may be implemented by a different set of products,
|
|
there is no requirement that all features be implemented by a single
|
|
product. For the purposes of this criterion, we define the following
|
|
terms:
|
|
|
|
<dl>
|
|
<dt>independent
|
|
|
|
<dd>each implementation must be developed by a different party and cannot
|
|
share, reuse, or derive from code used by another qualifying
|
|
implementation. Sections of code that have no bearing on the
|
|
implementation of this specification are exempt from this requirement.
|
|
|
|
<dt>interoperable
|
|
|
|
<dd>passing the respective test case(s) in the official CSS test suite,
|
|
or, if the implementation is not a Web browser, an equivalent test. Every
|
|
relevant test in the test suite should have an equivalent test created if
|
|
such a user agent (UA) is to be used to claim interoperability. In
|
|
addition if such a UA is to be used to claim interoperability, then there
|
|
must one or more additional UAs which can also pass those equivalent
|
|
tests in the same way for the purpose of interoperability. The equivalent
|
|
tests must be made publicly available for the purposes of peer review.
|
|
|
|
<dt>implementation
|
|
|
|
<dd>a user agent which:
|
|
<ol class=inline>
|
|
<li>implements the specification.
|
|
|
|
<li>is available to the general public. The implementation may be a
|
|
shipping product or other publicly available version (i.e., beta
|
|
version, preview release, or “nightly build”). Non-shipping product
|
|
releases must have implemented the feature(s) for a period of at least
|
|
one month in order to demonstrate stability.
|
|
|
|
<li>is not experimental (i.e., a version specifically designed to pass
|
|
the test suite and is not intended for normal usage going forward).
|
|
</ol>
|
|
</dl>
|
|
|
|
<p>The specification will remain Candidate Recommendation for at least six
|
|
months.
|
|
|
|
<h2 class=no-num id=acknowledgements> Appendix A: Acknowledgements</h2>
|
|
|
|
<p>This specification would not have been possible without the help from:
|
|
Ayman Aldahleh, Bert Bos, Tantek Çelik, Stephen Deach, John Daggett,
|
|
Martin Dürst, Laurie Anna Edlund, Ben Errez, Yaniv Feinberg, Arye
|
|
Gittelman, Ian Hickson, Martin Heijdra, Richard Ishida, Masayasu Ishikawa,
|
|
Michael Jochimsen, Eric LeVine, Ambrose Li, Håkon Wium Lie, Chris Lilley,
|
|
Ken Lunde, Nat McCully, Shinyu Murakami, Paul Nelson, Chris Pratley,
|
|
Marcin Sawicki, Arnold Schrijver, Rahul Sonnad, Michel Suignard, Takao
|
|
Suzuki, Frank Tang, Chris Thrasher, Etan Wexler, Chris Wilson, Masafumi
|
|
Yabe and Steve Zilles.
|
|
|
|
<h2 class=no-num id=appendix-b-references>Appendix B: References</h2>
|
|
|
|
<h3 class=no-num id=normative-ref>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
|
|
2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
|
|
|
|
<dd>Elika J. Etemad; Koji Ishii; Shinyu Murakami. <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/"><cite>CSS
|
|
Writing Modes Module Level 3.</cite></a> 31 May 2011. W3C Working Draft.
|
|
(Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/">http://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3BG>[CSS3BG]
|
|
|
|
<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
|
|
href="http://www.w3.org/TR/2011/CR-css3-background-20110215"><cite>CSS
|
|
Backgrounds and Borders Module Level 3.</cite></a> 15 February 2011. W3C
|
|
Candidate Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/CR-css3-background-20110215">http://www.w3.org/TR/2011/CR-css3-background-20110215</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3FONT>[CSS3FONT]
|
|
|
|
<dd>John Daggett. <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324"><cite>CSS Fonts
|
|
Module Level 3.</cite></a> 24 March 2011. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324">http://www.w3.org/TR/2011/WD-css3-fonts-20110324</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=RFC2119>[RFC2119]
|
|
|
|
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
|
|
words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
|
|
RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX11>[UAX11]
|
|
|
|
<dd>Asmus Freytag. <a
|
|
href="http://www.unicode.org/unicode/reports/tr11/tr11-8.html"><cite>East
|
|
Asian Width.</cite></a> 23 March 2001. Unicode Standard Annex #11. URL:
|
|
<a
|
|
href="http://www.unicode.org/unicode/reports/tr11/tr11-8.html">http://www.unicode.org/unicode/reports/tr11/tr11-8.html</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX14>[UAX14]
|
|
|
|
<dd>Asmus Freytag. <a
|
|
href="http://www.unicode.org/unicode/reports/tr14/tr14-17.html"><cite>Line
|
|
Breaking Properties.</cite></a> 29 March 2005. Unicode Standard Annex
|
|
#14. URL: <a
|
|
href="http://www.unicode.org/unicode/reports/tr14/tr14-17.html">http://www.unicode.org/unicode/reports/tr14/tr14-17.html</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX24>[UAX24]
|
|
|
|
<dd>Mark Davis; Ken Whistler. <a
|
|
href="http://www.unicode.org/reports/tr24/"><cite>Unicode Script
|
|
Property.</cite></a> 27 September 2010. Unicode Standard Annex #24. URL:
|
|
<a
|
|
href="http://www.unicode.org/reports/tr24/">http://www.unicode.org/reports/tr24/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX29>[UAX29]
|
|
|
|
<dd>Mark Davis. <a
|
|
href="http://www.unicode.org/reports/tr29/tr29-17.html"><cite>Unicode
|
|
Text Segmentation.</cite></a> 8 October 2010. Unicode Standard Annex #29.
|
|
URL: <a
|
|
href="http://www.unicode.org/reports/tr29/tr29-17.html">http://www.unicode.org/reports/tr29/tr29-17.html</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX44>[UAX44]
|
|
|
|
<dd>Mark Davis; Ken Whistler. <a
|
|
href="http://www.unicode.org/reports/tr44/tr44-6.html"><cite>Unicode
|
|
Character Database.</cite></a> 8 October 2010. Unicode Standard Annex
|
|
#44. URL: <a
|
|
href="http://www.unicode.org/reports/tr44/tr44-6.html">http://www.unicode.org/reports/tr44/tr44-6.html</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UNICODE>[UNICODE]
|
|
|
|
<dd>The Unicode Consortium. <a
|
|
href="http://www.unicode.org/unicode/standard/versions/enumeratedversions.html"><cite>The
|
|
Unicode Standard.</cite></a> 2003. Defined by: The Unicode Standard,
|
|
Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated
|
|
from time to time by the publication of new versions URL: <a
|
|
href="http://www.unicode.org/unicode/standard/versions/enumeratedversions.html">http://www.unicode.org/unicode/standard/versions/enumeratedversions.html</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=informative-ref>Informative references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS3COLOR>[CSS3COLOR]
|
|
|
|
<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
|
|
href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
|
|
Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3LIST>[CSS3LIST]
|
|
|
|
<dd>Tab Atkins Jr. <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-lists-20110524"><cite>CSS Lists
|
|
and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft.
|
|
(Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=JIS4051>[JIS4051]
|
|
|
|
<dd><cite>Formatting rules for Japanese documents
|
|
(『日本語文書の組版方法』).</cite>
|
|
Japanese Standards Association. 2004. JIS X 4051:2004. In Japanese</dd>
|
|
<!---->
|
|
|
|
<dt id=JLREQ>[JLREQ]
|
|
|
|
<dd>Yasuhiro Anan; et al. <a
|
|
href="http://www.w3.org/TR/2009/NOTE-jlreq-20090604/"><cite>Requirements
|
|
for Japanese Text Layout.</cite></a> 4 June 2009. W3C Working Group Note.
|
|
URL: <a
|
|
href="http://www.w3.org/TR/2009/NOTE-jlreq-20090604/">http://www.w3.org/TR/2009/NOTE-jlreq-20090604/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=ZHMARK>[ZHMARK]
|
|
|
|
<dd><cite>标点符号用法 (Punctuation
|
|
Mark Usage).</cite> 1995.
|
|
中华人民共和国国家标准
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=changes>Appendix C: Changes</h2>
|
|
|
|
<h3 class=no-num id=recent-changes> Changes from the <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-text-20110412/">April 2011 CSS3
|
|
Text <abbr title="Working Draft">WD</abbr></a></h3>
|
|
|
|
<p>Major changes include:
|
|
|
|
<ul>
|
|
<li>Renamed ‘<code class=property>bikeshedding</code>’ to
|
|
‘<a href="#text-space-collapse"><code
|
|
class=property>text-space-collapse</code></a>’.
|
|
|
|
<li>Removed ‘<code class=property>hyphenate-resource</code>’
|
|
property / ‘<code class=css>@hyphenate-resource</code>’ rule.
|
|
|
|
|
|
<li>Merged ‘<code class=property>text-trim</code>’ and
|
|
‘<code class=property>text-autospace</code>’ into ‘<a
|
|
href="#text-spacing"><code class=property>text-spacing</code></a>’.
|
|
|
|
|
|
<li>Renamed ‘<code class=css>fullwidth</code>’ and
|
|
‘<code class=css>fullsize-kana</code>’ to ‘<code
|
|
class=css>full-width</code>’ and ‘<code
|
|
class=css>full-size-kana</code>’ to match values in ‘<code
|
|
class=property>font-variant-width</code>’. <a href="#CSS3FONT"
|
|
rel=biblioentry>[CSS3FONT]<!--{{!CSS3FONT}}--></a>
|
|
|
|
<li>Added ‘<code class=css><length></code>’ values to
|
|
‘<a href="#tab-size0"><code
|
|
class=property>tab-size</code></a>’ (at-risk).
|
|
|
|
<li>Removed ‘<code class=css>all</code>’ value of ‘<a
|
|
href="#hyphens0"><code class=property>hyphens</code></a>’ property.
|
|
|
|
|
|
<li>Renamed ‘<code class=property>word-wrap</code>’ to
|
|
‘<a href="#overflow-wrap0"><code
|
|
class=property>overflow-wrap</code></a>’.
|
|
|
|
<li>Changed ‘<a href="#text-decoration-line0"><code
|
|
class=property>text-decoration-line</code></a>’ value syntax for
|
|
cancelling ancestor text decorations.
|
|
|
|
<li>Removed suggestion to inset decorations from the content box edges in
|
|
favor of an explicit ‘<code class=css>edges</code>’ value for
|
|
‘<a href="#text-decoration-skip0"><code
|
|
class=property>text-decoration-skip</code></a>’.
|
|
|
|
<li>Added ‘<a href="#text-decoration-skip0"><code
|
|
class=property>text-decoration-skip</code></a>’ property.
|
|
|
|
<li>Removed ‘<code class=property>text-outline</code>’
|
|
property.
|
|
</ul>
|
|
|
|
<p>Significant details updated:
|
|
|
|
<ul>
|
|
<li>More precise definition of a "character"/grapheme cluster and its
|
|
properties.
|
|
|
|
<li>Specified order of text operations.
|
|
|
|
<li>Added more details on case mapping, fullwidth mapping, and small kana
|
|
mapping.
|
|
|
|
<li>Removed interaction of white space collapsing and ‘<code
|
|
class=property>text-autospace</code>’.
|
|
|
|
<li>Cleaned up details on ‘<a href="#line-break0"><code
|
|
class=property>line-break</code></a>’.
|
|
|
|
<li>Significant tweaking to ‘<a href="#text-justify0"><code
|
|
class=property>text-justify</code></a>’ prose to make it clearer
|
|
and more coherent.
|
|
|
|
<li>Replaced parts of ‘<a href="#text-shadow0"><code
|
|
class=property>text-shadow</code></a>’ description with pointer to
|
|
‘<code class=property>box-shadow</code>’.
|
|
</ul>
|
|
|
|
<h2 class=no-num id=default-stylesheet>Appendix D: Default UA Stylesheet</h2>
|
|
|
|
<p>This appendix is informative, and is to help UA developers to implement
|
|
default stylesheet, but UA developers are free to ignore or change.
|
|
|
|
<div class=example>
|
|
<pre><code class=css>
|
|
<!-- -->/* make list items align together */
|
|
<!-- -->li { text-align: match-parent; }
|
|
<!-- -->/* disable inheritance of text-emphasis marks to ruby text:
|
|
<!-- --> emphasis marks should only apply to base text */
|
|
<!-- -->rt { text-emphasis: none; }
|
|
<!-- -->
|
|
<!-- -->:root:lang(zh), [lang|=zh] {
|
|
<!-- -->/* default emphasis mark position is 'under' for Chinese */
|
|
<!-- --> text-emphasis-position: under;
|
|
<!-- -->}
|
|
</code></pre>
|
|
</div>
|
|
|
|
<p class=issue>If you find any issues, recommendations to add, or
|
|
corrections, please send the information to <a
|
|
href="mailto:www-style@w3.org">www-style@w3.org</a> with
|
|
<kbd>[css3-text]</kbd> in the subject line.
|
|
|
|
<h2 class=no-num id=script-groups>Appendix E: Scripts and Spacing</h2>
|
|
|
|
<p><em>This appendix is informative (non-normative).</em>
|
|
|
|
<p>Typographic behavior varies somewhat by language, but varies drastically
|
|
by writing system. This appendix categorizes some common scripts in
|
|
Unicode 6.0 according to their justification and spacing behavior.
|
|
Category descriptions are descriptive, not prescriptive; the determining
|
|
factor is the prioritization of <a
|
|
href="#expansion-opportunities"><i>expansion opportunities</i></a>.
|
|
|
|
<dl>
|
|
<dt id=block-scripts><dfn id=block-scripts0>block scripts</dfn>
|
|
|
|
<dd>CJK and by extension all Wide characters. (See <a href="#UAX11"
|
|
rel=biblioentry>[UAX11]<!--{{!UAX11}}--></a>) The following scripts are
|
|
included: Bopomofo, Han, Hangul, Hiragana, Katakana, Yi
|
|
|
|
<dt id=clustered-scripts><dfn id=clustered-scripts0>clustered
|
|
scripts</dfn>
|
|
|
|
<dd>Scripts that have discrete units but do not use spaces between words,
|
|
such as many Southeast Asian systems. The following scripts are included:
|
|
Khmer, Lao, Myanmar, Thai, <span class=issue>This list is likely
|
|
incomplete. What else fits here?</span>
|
|
|
|
<dt id=connected-scripts><dfn id=connected-scripts0>connected
|
|
scripts</dfn>
|
|
|
|
<dd>Devanagari, Ogham, and other scripts that use spaces between words and
|
|
baseline connectors within words. By extension this category also
|
|
includes any other Indic scripts whose typographic behavior is similar to
|
|
Devanagari. The following scripts are included: Bengali, Brahmi,
|
|
Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Oriya?, Ogham,
|
|
Tamil?, Telugu
|
|
|
|
<dt id=cursive-scripts><dfn id=cursive-scripts0>cursive scripts</dfn>
|
|
|
|
<dd>Arabic and similar inherently cursive scripts. The following scripts
|
|
are included: Arabic, Mongolian, N'Ko?, Phags Pa?, Syriac
|
|
|
|
<dt id=discrete-scripts><dfn id=discrete-scripts0>discrete scripts</dfn>
|
|
|
|
<dd>Scripts that use spaces or visible word-separating punctuation between
|
|
words and have discrete, unconnected (in print) units within words. The
|
|
following scripts are included: Armenian, Bamum?, Braille, Canadian
|
|
Aboriginal, Cherokee, Coptic, Cyrillic, Deseret, Ethiopic Greek, Hebrew,
|
|
Kharoshthi, Latin, Lisu, Osmanya, Shavian, Tifinagh, Vai?
|
|
</dl>
|
|
|
|
<p>UAs should treat unrecognized scripts as <i>discrete</i>.
|
|
|
|
<p class=issue>This listing should ideally be exhaustive wrt Unicode.
|
|
Please <a href="#status">send</a> suggestions and corrections to the CSS
|
|
Working Group.
|
|
|
|
<div class=note>
|
|
<p>Guidelines for classification consider letter-spacing and
|
|
justification:
|
|
|
|
<ol>
|
|
<li>If the script is cursive and may expand cursively but must not space
|
|
between letters, it is <i>cursive</i>.
|
|
|
|
<li>If the script primarily flexes word separators, it is either
|
|
<i>discrete</i> or <i>connected</i>. <i>Discrete</i> scripts can space
|
|
between letters. <i>Connected</i> scripts must not space between letters
|
|
(typically because that would break the connections or otherwise look
|
|
bad).
|
|
|
|
<li>If the script primarily expands equally between its "letters" in
|
|
native typesettings, it is either <i>block</i> or <i>clustered</i>. The
|
|
exact classification depends on whether it always spaces when mixed with
|
|
CJK and sometimes stays together when mixed with Thai and related
|
|
scripts (<i>block</i>) or sometimes spaces when mixed with CJK and
|
|
always spaces with Thai (<i>clustered</i>).
|
|
</ol>
|
|
</div>
|
|
|
|
<h2 class=no-num id=small-kana>Appendix F: Small Kana Mappings</h2>
|
|
|
|
<table class=data>
|
|
<caption>Small Kana Map to Normal Kana</caption>
|
|
|
|
<colgroup span=2></colgroup>
|
|
|
|
<colgroup span=2></colgroup>
|
|
|
|
<colgroup span=2></colgroup>
|
|
|
|
<colgroup span=2></colgroup>
|
|
|
|
<colgroup span=2></colgroup>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th colspan=2>A
|
|
|
|
<th colspan=2>I
|
|
|
|
<th colspan=2>U
|
|
|
|
<th colspan=2>E
|
|
|
|
<th colspan=2>O
|
|
|
|
<tr>
|
|
<th scope=col>small
|
|
|
|
<th scope=col>normal
|
|
|
|
<th scope=col>small
|
|
|
|
<th scope=col>normal
|
|
|
|
<th scope=col>small
|
|
|
|
<th scope=col>normal
|
|
|
|
<th scope=col>small
|
|
|
|
<th scope=col>normal
|
|
|
|
<th scope=col>small
|
|
|
|
<th scope=col>normal
|
|
|
|
<tbody>
|
|
<tr><!-- Vowels (Hiragana) -->
|
|
|
|
<td>ぁ U+3041
|
|
|
|
<td> あ U+3042
|
|
|
|
<td>ぃ U+3043
|
|
|
|
<td> い U+3044
|
|
|
|
<td>ぅ U+3045
|
|
|
|
<td> う U+3046
|
|
|
|
<td>ぇ U+3047
|
|
|
|
<td> え U+3048
|
|
|
|
<td>ぉ U+3049
|
|
|
|
<td> お U+304A
|
|
|
|
<tr><!-- Consonant K (Hiragana) -->
|
|
|
|
<td>ゕ U+3095
|
|
|
|
<td> か U+304B
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ゖ U+3096
|
|
|
|
<td> け U+3051
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<tr><!-- Consonant T (Hiragana) -->
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>っ U+3063
|
|
|
|
<td> つ U+3064
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<tr><!-- Consonant Y (Hiragana) -->
|
|
|
|
<td>ゃ U+3083
|
|
|
|
<td> や U+3084
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ゅ U+3085
|
|
|
|
<td> ゆ U+3086
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ょ U+3087
|
|
|
|
<td> よ U+3088
|
|
|
|
<tr><!-- Consonant W (Hiragana) -->
|
|
|
|
<td>ゎ U+308E
|
|
|
|
<td> わ U+308F
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<tbody>
|
|
<tr><!-- Vowels (Katakana) -->
|
|
|
|
<td>ァ U+30A1
|
|
|
|
<td> ア U+30A2
|
|
|
|
<td>ィ U+30A3
|
|
|
|
<td> イ U+30A4
|
|
|
|
<td>ゥ U+30A5
|
|
|
|
<td> ウ U+30A6
|
|
|
|
<td>ェ U+30A7
|
|
|
|
<td> エ U+30A8
|
|
|
|
<td>ォ U+30A9
|
|
|
|
<td> オ U+30AA
|
|
|
|
<tr><!-- Consonant K (Katakana) -->
|
|
|
|
<td>ヵ U+30F5
|
|
|
|
<td> カ U+30AB
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ㇰ U+31F0
|
|
|
|
<td> ク U+30AF
|
|
|
|
<td>ヶ U+30F6
|
|
|
|
<td> ケ U+30B1
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<tr><!-- Consonant S (Katakana) -->
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ㇱ U+31F1
|
|
|
|
<td> シ U+30B7
|
|
|
|
<td>ㇲ U+31F2
|
|
|
|
<td> ス U+30B9
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<tr><!-- Consonant T (Katakana) -->
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ッ U+30C3
|
|
|
|
<td> ツ U+30C4
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ㇳ U+31F3
|
|
|
|
<td> ト U+30C8
|
|
|
|
<tr><!-- Consonant N (Katakana) -->
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ㇴ U+31F4
|
|
|
|
<td> ヌ U+30CC
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<tr><!-- Consonant H (Katakana) -->
|
|
|
|
<td>ㇵ U+31F5
|
|
|
|
<td> ハ U+30CF
|
|
|
|
<td>ㇶ U+31F6
|
|
|
|
<td> ヒ U+30D2
|
|
|
|
<td>ㇷ U+31F7
|
|
|
|
<td> フ U+30D5
|
|
|
|
<td>ㇸ U+31F8
|
|
|
|
<td> ヘ U+30D8
|
|
|
|
<td>ㇹ U+31F9
|
|
|
|
<td> ホ U+30DB
|
|
|
|
<tr><!-- Consonant M (Katakana) -->
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ㇺ U+31FA
|
|
|
|
<td> ム U+30E0
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<tr><!-- Consonant Y (Katakana) -->
|
|
|
|
<td>ャ U+30E3
|
|
|
|
<td> ヤ U+30E4
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ュ U+30E5
|
|
|
|
<td> ユ U+30E6
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ョ U+30E7
|
|
|
|
<td> ヨ U+30E8
|
|
|
|
<tr><!-- Consonant R (Katakana) -->
|
|
|
|
<td>ㇻ U+31FB
|
|
|
|
<td> ラ U+30E9
|
|
|
|
<td>ㇼ U+31FC
|
|
|
|
<td> リ U+30EA
|
|
|
|
<td>ㇽ U+31FD
|
|
|
|
<td> ル U+30EB
|
|
|
|
<td>ㇾ U+31FE
|
|
|
|
<td> レ U+30EC
|
|
|
|
<td>ㇿ U+31FF
|
|
|
|
<td> ロ U+30ED
|
|
|
|
<tr><!-- Consonant W (Katakana) -->
|
|
|
|
<td>ヮ U+30EE
|
|
|
|
<td> ワ U+30EF
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<tbody>
|
|
<tr><!-- Vowels (hwid) -->
|
|
|
|
<td>ｧ U+FF67
|
|
|
|
<td> ｱ U+FF71
|
|
|
|
<td>ｨ U+FF68
|
|
|
|
<td> ｲ U+FF72
|
|
|
|
<td>ｩ U+FF69
|
|
|
|
<td> ｳ U+FF73
|
|
|
|
<td>ｪ U+FF6A
|
|
|
|
<td> ｴ U+FF74
|
|
|
|
<td>ｫ U+FF6B
|
|
|
|
<td> ｵ U+FF75
|
|
|
|
<tr><!-- Consonant T (hwid Katakana) -->
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ｯ U+FF6F
|
|
|
|
<td> ﾂ U+FF82
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<tr><!-- Consonant Y (hwid Katakana) -->
|
|
|
|
<td>ｬ U+FF6C
|
|
|
|
<td> ﾔ U+FF94
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ｭ U+FF6D
|
|
|
|
<td> ﾕ U+FF95
|
|
|
|
<td>
|
|
|
|
<td>
|
|
|
|
<td>ｮ U+FF6E
|
|
|
|
<td> ﾖ U+FF96
|
|
</table>
|
|
|
|
<h2 class=no-num id=appendix-g-text-processing-order-of-oper>Appendix G:
|
|
Text Processing Order of Operations</h2>
|
|
|
|
<p>The following list defines the order of text operations.
|
|
(Implementations are not bound to this order as long as the resulting
|
|
layout is the same.)
|
|
|
|
<ol>
|
|
<li><a
|
|
href="http://www.w3.org/TR/css3-writing-modes/#text-combine-horizontal">text
|
|
combination</a> <a href="#CSS3-WRITING-MODES"
|
|
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
|
|
|
|
<li><a href="#white-space-rules">white space processing</a> part I
|
|
(pre-wrapping)
|
|
|
|
<li><a href="#text-transform">text transformation</a>
|
|
|
|
<li><a href="#spacing">default spacing</a>
|
|
|
|
<li><a href="#wrapping">text wrapping</a> while applying per line:
|
|
<ol>
|
|
<li><a href="#white-space-rules">white space processing</a> part II
|
|
|
|
<li><a href="#text-indent">indentation</a>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/css3-writing-modes/#text-direction">bidirectional
|
|
reordering</a> <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> / <a
|
|
href="#CSS3-WRITING-MODES"
|
|
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/css3-writing-modes/#text-orientation">text
|
|
orientation</a> <a href="#CSS3-WRITING-MODES"
|
|
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
|
|
|
|
<li><a href="http://www.w3.org/TR/css3-fonts/">font/glyph selection and
|
|
kerning</a> <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> / <a href="#CSS3FONT"
|
|
rel=biblioentry>[CSS3FONT]<!--{{!CSS3FONT}}--></a>
|
|
|
|
<li><a href="#hanging-punctuation">hanging punctuation</a>
|
|
</ol>
|
|
|
|
<li><a href="#justification">justification</a> (which may affect glyph
|
|
selection and/or text wrapping, looping back into that step)
|
|
|
|
<li><a href="#text-align">text alignment</a>
|
|
|
|
<li><a href="#decoration">text decoration</a>
|
|
</ol>
|
|
|
|
<h2 class=no-num id=appendix-h-full-property-index>Appendix H: Full
|
|
Property Index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th><a class=property
|
|
href="#hanging-punctuation0">hanging-punctuation</a>
|
|
|
|
<td>none | [ first || [ force-end | allow-end ] ]
|
|
|
|
<td>none
|
|
|
|
<td>inline elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#hyphenate-character0">hyphenate-character</a>
|
|
|
|
<td>auto | <string>
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#hyphenate-limit-chars">hyphenate-limit-chars</a>
|
|
|
|
<td>auto | <integer>{1,3}
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#hyphenate-limit-last">hyphenate-limit-last</a>
|
|
|
|
<td>none | always | column | page | spread
|
|
|
|
<td>none
|
|
|
|
<td>block containers
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#hyphenate-limit-lines">hyphenate-limit-lines</a>
|
|
|
|
<td>no-limit | <integer>
|
|
|
|
<td>no-limit
|
|
|
|
<td>block containers
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#hyphenate-limit-zone">hyphenate-limit-zone</a>
|
|
|
|
<td><percentage> | <length>
|
|
|
|
<td>0
|
|
|
|
<td>block containers
|
|
|
|
<td>yes
|
|
|
|
<td>refers to width of the line box
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#hyphens0">hyphens</a>
|
|
|
|
<td>none | manual | auto
|
|
|
|
<td>manual
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#letter-spacing0">letter-spacing</a>
|
|
|
|
<td><spacing-limit>{1,3}
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>refers to width of space (U+0020) glyph
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#line-break0">line-break</a>
|
|
|
|
<td>auto | loose | normal | strict
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#overflow-wrap0">overflow-wrap</a>
|
|
|
|
<td>normal | [ break-word || hyphenate ]
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#tab-size0">tab-size</a>
|
|
|
|
<td><integer> | <length>
|
|
|
|
<td>8
|
|
|
|
<td>block containers
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-align0">text-align</a>
|
|
|
|
<td>[ start | <string> ]? [ start | end | left | right | center |
|
|
justify | match-parent ]
|
|
|
|
<td>start
|
|
|
|
<td>block containers
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-align-last0">text-align-last</a>
|
|
|
|
<td>auto | start | end | left | right | center | justify
|
|
|
|
<td>auto
|
|
|
|
<td>block containers
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-decoration0">text-decoration</a>
|
|
|
|
<td><text-decoration-line> || <text-decoration-color> ||
|
|
<text-decoration-style> || blink
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#text-decoration-color0">text-decoration-color</a>
|
|
|
|
<td><color>
|
|
|
|
<td>currentColor
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#text-decoration-line0">text-decoration-line</a>
|
|
|
|
<td>none | [ underline | no-underline | replace-underline ] || [
|
|
overline | no-overline | replace-overline ] || [ line-through |
|
|
no-line-through | replace-line-through ] | remove-all
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no (but see prose)
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#text-decoration-skip0">text-decoration-skip</a>
|
|
|
|
<td>none | [ objects || spaces || ink || edges ]
|
|
|
|
<td>objects
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#text-decoration-style0">text-decoration-style</a>
|
|
|
|
<td>solid | double | dotted | dashed | wavy
|
|
|
|
<td>solid
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-emphasis0">text-emphasis</a>
|
|
|
|
<td>‘<text-emphasis-style>’ ||
|
|
‘<text-emphasis-color>’
|
|
|
|
<td>see individual properties
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#text-emphasis-color0">text-emphasis-color</a>
|
|
|
|
<td><color>
|
|
|
|
<td>currentcolor
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#text-emphasis-position0">text-emphasis-position</a>
|
|
|
|
<td>[ above | below ] && [ right | left ]
|
|
|
|
<td>above right
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-emphasis-skip0">text-emphasis-skip</a>
|
|
|
|
<td>spaces || punctuation || symbols || narrow
|
|
|
|
<td>spaces
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#text-emphasis-style0">text-emphasis-style</a>
|
|
|
|
<td>none | [ [ filled | open ] || [ dot | circle | double-circle |
|
|
triangle | sesame ] ] | <string>
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-indent0">text-indent</a>
|
|
|
|
<td>[ <length> | <percentage> ] && [ hanging || each-line ]?
|
|
|
|
<td>0
|
|
|
|
<td>block containers
|
|
|
|
<td>yes
|
|
|
|
<td>refers to width of containing block
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-justify0">text-justify</a>
|
|
|
|
<td>auto | none | inter-word | inter-ideograph | inter-cluster |
|
|
distribute | kashida
|
|
|
|
<td>auto
|
|
|
|
<td>block containers and, optionally, inline elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-shadow0">text-shadow</a>
|
|
|
|
<td>none | [<shadow>, ] * <shadow>
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#text-space-collapse">text-space-collapse</a>
|
|
|
|
<td>collapse | discard | [ [preserve | preserve-breaks] && [ trim-inner
|
|
|| consume-before || consume-after ]
|
|
|
|
<td>collapse
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-spacing">text-spacing</a>
|
|
|
|
<td>normal | none | [ trim-start | space-start ] || [ trim-end |
|
|
space-end | allow-end ] || [ trim-adjacent | space-adjacent ] ||
|
|
no-compress || ideograph-alpha || ideograph-numeric || punctuation
|
|
|
|
<td>normal
|
|
|
|
<td>block containers
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-transform0">text-transform</a>
|
|
|
|
<td>none | [ [ capitalize | uppercase | lowercase ] || full-width ||
|
|
full-size-kana ]
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#text-underline-position0">text-underline-position</a>
|
|
|
|
<td>auto | alphabetic | below left | below right
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#text-wrap0">text-wrap</a>
|
|
|
|
<td>normal | none | avoid
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#white-space0">white-space</a>
|
|
|
|
<td>normal | pre | nowrap | pre-wrap | pre-line
|
|
|
|
<td>not defined for shorthand properties
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#word-break0">word-break</a>
|
|
|
|
<td>normal | keep-all | break-all
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#word-spacing0">word-spacing</a>
|
|
|
|
<td><spacing-limit> {1,3}
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>refers to width of space (U+0020) glyph
|
|
|
|
<td>visual
|
|
</table>
|
|
<!--end-properties-->
|
|
<!--
|
|
<h2 class="no-num" id="index">Appendix I:
|
|
Index</h2>
|
|
index-->
|
|
|
|
<h2 class=no-num id=traditions>Appendix J: Cultural Correlations</h2>
|
|
|
|
<p><em>This section is non-normative.</em>
|
|
|
|
<p>Some features are more important in some typographic traditions than in
|
|
others. This table summarizes which typographic traditions these features
|
|
were designed for. Parentheses indicates traditions for which the feature
|
|
is particularly significant. This table should be considered incomplete
|
|
and non-exhaustive.
|
|
|
|
<table class=data>
|
|
<thead>
|
|
<tr>
|
|
<th>Feature
|
|
|
|
<th>Typographic Tradition
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>‘<a href="#hanging-punctuation0"><code
|
|
class=property>hanging-punctuation</code></a>’
|
|
|
|
<td>CJK
|
|
|
|
<tr>
|
|
<td>‘<a href="#hyphens0"><code
|
|
class=property>hyphens</code></a>’
|
|
|
|
<td>Western, South Asian
|
|
|
|
<tr>
|
|
<td>‘<a href="#hyphenate-character0"><code
|
|
class=property>hyphenate-character</code></a>’
|
|
|
|
<td>Western, South Asian
|
|
|
|
<tr>
|
|
<td>‘<a href="#hyphenate-limit-chars"><code
|
|
class=property>hyphenate-limit-chars</code></a>’
|
|
|
|
<td>Western, South Asian
|
|
|
|
<tr>
|
|
<td>‘<a href="#hyphenate-limit-last"><code
|
|
class=property>hyphenate-limit-last</code></a>’
|
|
|
|
<td>Western, South Asian
|
|
|
|
<tr>
|
|
<td>‘<a href="#hyphenate-limit-lines"><code
|
|
class=property>hyphenate-limit-lines</code></a>’
|
|
|
|
<td>Western, South Asian
|
|
|
|
<tr>
|
|
<td>‘<a href="#hyphenate-limit-zone"><code
|
|
class=property>hyphenate-limit-zone</code></a>’
|
|
|
|
<td>Western, South Asian
|
|
|
|
<tr>
|
|
<td>‘<a href="#line-break0"><code
|
|
class=property>line-break</code></a>’
|
|
|
|
<td>CJK (Japanese)
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-decoration-skip0"><code
|
|
class=property>text-decoration-skip</code></a>’: ‘<code
|
|
class=css>edges</code>’
|
|
|
|
<td>CJK
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-justify0"><code
|
|
class=property>text-justify</code></a>’: ‘<code
|
|
class=css>inter-cluster</code>’
|
|
|
|
<td>Southeast Asian
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-justify0"><code
|
|
class=property>text-justify</code></a>’: ‘<code
|
|
class=css>inter-ideograph</code>’, ‘<code
|
|
class=css>distribute</code>’
|
|
|
|
<td>CJK
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-justify0"><code
|
|
class=property>text-justify</code></a>’: ‘<code
|
|
class=css>inter-word</code>’
|
|
|
|
<td>Western, African, Middle-Eastern, Indic
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-justify0"><code
|
|
class=property>text-justify</code></a>’: ‘<code
|
|
class=css>kashida</code>’
|
|
|
|
<td>Arabic
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-emphasis-style0"><code
|
|
class=property>text-emphasis-style</code></a>’
|
|
|
|
<td>CJK
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-emphasis-color0"><code
|
|
class=property>text-emphasis-color</code></a>’
|
|
|
|
<td>CJK
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-emphasis-position0"><code
|
|
class=property>text-emphasis-position</code></a>’
|
|
|
|
<td>CJK
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-emphasis-skip0"><code
|
|
class=property>text-emphasis-skip</code></a>’
|
|
|
|
<td>CJK
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-spacing"><code
|
|
class=property>text-spacing</code></a>’
|
|
|
|
<td>CJK
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-spacing"><code
|
|
class=property>text-spacing</code></a>’: ‘<code
|
|
class=css>punctuation</code>’
|
|
|
|
<td>European (French)
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-transform0"><code
|
|
class=property>text-transform</code></a>’: ‘<code
|
|
class=css>capitalize</code>’, ‘<code
|
|
class=css>uppercase</code>’, ‘<code
|
|
class=css>lowercase</code>’
|
|
|
|
<td>Western
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-transform0"><code
|
|
class=property>text-transform</code></a>’: ‘<code
|
|
class=css>full-width</code>’, ‘<code
|
|
class=css>full-size-kana</code>’
|
|
|
|
<td>CJK
|
|
|
|
<tr>
|
|
<td>‘<a href="#text-underline-position0"><code
|
|
class=property>text-underline-position</code></a>’: ‘<code
|
|
class=css>auto</code>’
|
|
|
|
<td>CJK
|
|
|
|
<tr>
|
|
<td>‘<a href="#word-break0"><code
|
|
class=property>word-break</code></a>’
|
|
|
|
<td>CJK (Korean)
|
|
|
|
<tr>
|
|
<td>‘<a href="#word-spacing0"><code
|
|
class=property>word-spacing</code></a>’
|
|
|
|
<td>Western, African, Middle-Eastern, Indic
|
|
</table>
|
|
|
|
<p class=issue>Additional information / corrections on this table are
|
|
welcome.
|