- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 29 Mar 2011 23:16:26 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-text
In directory hutz:/tmp/cvs-serv17958
Modified Files:
Overview.html Overview.src.html default.css
Log Message:
Add example of Japanese line head alignment from JLREQ.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-text/Overview.html,v
retrieving revision 1.80
retrieving revision 1.81
diff -u -d -r1.80 -r1.81
--- Overview.html 29 Mar 2011 21:43:29 -0000 1.80
+++ Overview.html 29 Mar 2011 23:16:24 -0000 1.81
@@ -89,7 +89,7 @@
<dt>This version:
<dd><a href="http://dev.w3.org/csswg/css3-text/Overview.html">$Date:
- 2011/03/29 21:40:41 $ (CVS $Revision$)</a> <!--
+ 2011/03/29 21:43:29 $ (CVS $Revision$)</a> <!--
<dd><a href="http://www.w3.org/TR/2011/WD-css3-text-20110329/">http://www.w3.org/TR/2011/WD-css3-text-20110329/</a></dd>
-->
@@ -4049,6 +4049,61 @@
<h2 id=edge-effects><span class=secno>10. </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-trim"><code class=property>text-trim</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-trim: force-start;
+<!-- -->}</pre>
+
+ <li>Brackets preserve fullwidth spacing on all lines (second scheme):
+ <pre>p { /* Fullwidth alignment */
+<!-- --> margin: 0;
+<!-- --> text-indent: 1em;
+<!-- --> text-trim: normal;
+<!-- -->}</pre>
+
+ <li>Brackets hang in indent, flush with other lines (third scheme):
+ <pre>p { /* Hanging alignment */
+<!-- --> margin: 0;
+<!-- --> text-indent: 1em;
+<!-- --> text-trim: force-start;
+<!-- --> hanging-punctuation: first;
+<!-- -->}</pre>
+ </ul>
+ </div>
+
<h3 id=text-indent><span class=secno>10.1. </span> First Line Indentation:
the ‘<a href="#text-indent0"><code
class=property>text-indent</code></a>’ property</h3>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-text/Overview.src.html,v
retrieving revision 1.178
retrieving revision 1.179
diff -u -d -r1.178 -r1.179
--- Overview.src.html 29 Mar 2011 21:43:29 -0000 1.178
+++ Overview.src.html 29 Mar 2011 23:16:24 -0000 1.179
@@ -2977,6 +2977,54 @@
<h2 id="edge-effects">
Edge Effects</h2>
+ <p>Edge effects control the indentation of lines with respect to other lines
+ in the block ('text-indent') and how content is aligned to the start and
+ end edges of a line ('hanging-punctuation', see also 'text-trim').
+
+ <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 src="opening-brackets-at-line-head.png"
+ width="646" height="360"
+ 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).">
+ <p class="caption">Positioning of opening brackets at line head [[JLREQ]]</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-trim: force-start;
+<!-- -->}</pre>
+ <li>Brackets preserve fullwidth spacing on all lines (second scheme):
+ <pre>p { /* Fullwidth alignment */
+<!-- --> margin: 0;
+<!-- --> text-indent: 1em;
+<!-- --> text-trim: normal;
+<!-- -->}</pre>
+ <li>Brackets hang in indent, flush with other lines (third scheme):
+ <pre>p { /* Hanging alignment */
+<!-- --> margin: 0;
+<!-- --> text-indent: 1em;
+<!-- --> text-trim: force-start;
+<!-- --> hanging-punctuation: first;
+<!-- -->}</pre>
+ </ul>
+ </div>
+
<h3 id="text-indent">
First Line Indentation: the 'text-indent' property</h3>
Index: default.css
===================================================================
RCS file: /sources/public/csswg/css3-text/default.css,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- default.css 3 Mar 2011 08:22:41 -0000 1.3
+++ default.css 29 Mar 2011 23:16:24 -0000 1.4
@@ -123,7 +123,7 @@
position: absolute;
top: -0.6em;
left: -2.5em;
- width: 7.5em;
+ min-width: 7.5em;
text-align: center;
line-height: 1em;
color: #FFF8DD;
@@ -140,7 +140,7 @@
position: absolute;
top: -0.6em;
left: -2.5em;
- width: 7.5em;
+ min-width: 7.5em;
text-align: center;
line-height: 1em;
color: #FFF8DD;
Received on Tuesday, 29 March 2011 23:16:28 UTC