Skip to content

Commit 3ebf313

Browse files
ianbjacobsianbjacobs
committed
[css2] Bidi changes, added example of flow vs. text direction, fixed HTML 4.0 and bidi section
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%401045
1 parent 078cad0 commit 3ebf313

1 file changed

Lines changed: 156 additions & 123 deletions

File tree

‎css2/visuren.src‎

Lines changed: 156 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22
<html lang="en">
3-
<!-- $Id: visuren.src,v 2.17 1998-02-20 22:41:30 bbos Exp $ -->
3+
<!-- $Id: visuren.src,v 2.18 1998-02-21 00:25:52 ijacobs Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>Visual rendering model</TITLE>
@@ -165,7 +165,7 @@ please consult the section on <a href="lists.html">lists</a>.
165165
value</span> causes an element to generate <b>no</b> boxes in the <a
166166
href="intro.html#rendering-structure">rendering structure</a> (i.e.,
167167
the element has no effect on layout). Descendant elements do not
168-
generate any boxes either; this behavior <strong>cannot</strong> be
168+
generate any boxes either; this behavior <strong>cannot ever</strong> be
169169
overridden by setting the <span
170170
class="propinst-display">'display'</span> property on the descendants.
171171

@@ -242,17 +242,17 @@ applies if the box behaves like a block-level box.
242242
box</dfn></a></span> behaves as follows:</p>
243243

244244
<ul>
245-
<li>If a <a href="#block-level">block-level</a> box (that does
246-
not float and is not absolutely positioned)
247-
<a href="#following-box">follows</a> the compact box,
248-
the compact box is formatted like a one-line inline box. If
245+
<li>If a <a href="#block-level">block-level</a> box (that does not
246+
float and is not absolutely positioned) <a
247+
href="#following-box">follows</a> the compact box, the compact box is
248+
formatted like a one-line inline box. If
249249
the resulting <a href="#the-box-width">box width</a> is less
250-
than or equal to the left margin of the block-level box, the inline
250+
than or equal to the near margin of the block-level box, the inline
251251
box is positioned in the margin as described immediately below.
252-
If the writing direction of the following block-level box is right-to-left
253-
(the <span class="propinst-direction">'direction'</span>
254-
property value is 'rtl'), the inline box
255-
is placed in the right margin.
252+
The placement of the compact box (left or right margin) is determined
253+
by the <span class="propinst-direction">'direction'</span> specified
254+
for the element producing the <a href="visudet.html#containing-block">
255+
containing block</a> for the compact box and following box.
256256
<li>Otherwise, the compact box behaves like a block-level box.
257257
</ul>
258258

@@ -786,15 +786,16 @@ boxes act like inline boxes. However, they may act like block-level
786786
boxes if context demands (e.g., an inline <a href="#run-in">run-in</a>
787787
box that behaves like a block-level box). Decisions about the
788788
construction of anonymous inline boxes depend on many factors
789-
(language, hyphenation, etc.) and lie outside the scope of this
790-
specification.
789+
(language, <a href="#direction">text direction</a>, hyphenation, etc.)
790+
and lie outside the scope of this specification.
791791

792792
<h3><a name="block-formatting">Block formatting context</a></h3>
793793

794794
<P>In a block formatting context, boxes are laid out one after the
795-
other, vertically. The vertical distance between two sibling boxes is
796-
determined by the <span class="propinst-margin">'margin'</span>
797-
properties. Vertical margins between adjacent block-level boxes <a
795+
other, vertically, beginning at the top of a containing block. The
796+
vertical distance between two sibling boxes is determined by the <span
797+
class="propinst-margin">'margin'</span> properties. Vertical margins
798+
between adjacent block-level boxes <a
798799
href="./visudet.html#collapsing-margins">collapse</a>.
799800

800801
<!-- Add a statement/link here about bottom-up height calc? -IJ -->
@@ -811,12 +812,16 @@ page breaks</a>.
811812
<H3><a name="inline-formatting">Inline formatting context</a></H3>
812813

813814
<P>In an inline formatting context, boxes are laid out horizontally,
814-
one after the other. Horizontal margins, borders, and padding are
815-
respected between these boxes. They may be aligned vertically in
816-
different ways: their bottoms or tops may be aligned, or the baselines
817-
of text within them may be aligned. The rectangular area that contains
818-
the boxes that form a line is called a <span class="index-def"
819-
title="line box"><a name="line-box"><dfn>line box</dfn></a></span>.
815+
one after the other, beginning at the top of a containing
816+
block. Horizontal margins, borders, and padding are respected between
817+
these boxes. They may be aligned vertically in different ways: their
818+
bottoms or tops may be aligned, or the baselines of text within them
819+
may be aligned. The rectangular area that contains the boxes that form
820+
a line is called a <span class="index-def" title="line box"><a
821+
name="line-box"><dfn>line box</dfn></a></span>. The margin between
822+
the first inline box in a line box and the near line box edge is respected;
823+
the same holds for the last inline box and the opposite line box
824+
edge.
820825

821826
<P>The width of a line box is determined by a <A
822827
HREF="visudet.html#containing-block">containing block</A>. The height of a line
@@ -852,10 +857,14 @@ inline boxes as well.
852857
split into several boxes and these boxes distributed across several
853858
line boxes. When a box is split, margins, borders, and padding have no
854859
visual effect at the end of the first line box or at the beginning of
855-
the next line box.
860+
the next line box.
861+
862+
<P>Inline boxes may also be split into several boxes <em>in the same
863+
line box</em> due to <a href="#direction">bidirectional text
864+
processing</a>.
856865

857866
<div class="html-example"><P>
858-
For example, the following paragraph
867+
Here is an example of inline box construction. The following paragraph
859868
(created by the HTML block-level element P) contains anonymous text
860869
interspersed with the elements EM and STRONG:
861870

@@ -950,16 +959,20 @@ dashed border is rendered on three sides in each case.
950959
<P>Note that with a small line height, the padding and borders
951960
around text in different lines may overlap.
952961

953-
<h3><a name="direction">Writing and flow direction</a></h3>
962+
<h3><a name="direction">Text direction:</a>
963+
the <span class="propinst-direction">'direction'</span>
964+
and <span class="propinst-unicode-bidi">'unicode-bidi'</span>
965+
properties
966+
</h3>
954967

955968
<P>The characters in certain scripts are written from right to left.
956969
In some languages, in particular those written with the Arabic or
957970
Hebrew script, and in some mixed-language contexts, text in a single
958971
(visually displayed) block can therefore appear with mixed
959972
directionality. This phenomenon is called <span class="index-def"
960-
title="bidirectionality (bidi)"> bidirectionality</span>, or "bidi"
961-
for short. For an introduction to bidirectionality issues, please
962-
consult the HTML 4.0 specification ([[HTML40]], section 8.2).
973+
title="bidirectionality (bidi)"><dfn>bidirectionality</dfn></span>, or
974+
"bidi" for short. For an introduction to bidirectionality issues,
975+
please consult the HTML 4.0 specification ([[HTML40]], section 8.2).
963976

964977
<P>The Unicode ([[UNICODE]]) specification assigns directionality to
965978
characters and defines a (complex) algorithm for determining the
@@ -993,96 +1006,23 @@ class="propinst-unicode-bidi">'unicode-bidi'</span> properties in
9931006
author and user style sheets but must behave as if they used the style
9941007
sheet fragment given <a href="#html40-bidi">below</a>.
9951008

996-
<!-- Martin suggests removing: However, user
997-
agents must not skip the <span
998-
class="propinst-direction">'direction'</span> property when it applies
999-
to table direction. -IJ -->
1000-
10011009
<!-- #include src=properties/direction.srb -->
10021010

1011+
<P>This property specifies the direction of inline box flow, embedded
1012+
text direction (see <span
1013+
class="propinst-unicode-bidi">'unicode-bidi'</span>), <a
1014+
href="tables.html">table</a> column layout, and content <a
1015+
href="visufx.html#overflow">overflow</a>.
1016+
10031017
<P>Values for this property have the following meanings:</P>
10041018

10051019
<dl>
10061020
<dt><strong>ltr</strong>
1007-
<dd>Left-to-right flow.
1021+
<dd>Left-to-right direction.
10081022
<dt><strong>rtl</strong>
1009-
<dd> Right-to-left flow.
1023+
<dd> Right-to-left direction.
10101024
</dl>
10111025

1012-
<P>This property determines the direction of several types of
1013-
flow:</p>
1014-
1015-
<ol>
1016-
<li>When set for an <a href="#inline">inline</a>
1017-
element or <a href="#block-level">block-level</a> element,
1018-
it specifies the base writing direction of inline
1019-
text generated by the element.
1020-
<li>When set for an <a href="#inline">inline</a>
1021-
element, it specifies the direction that generated inline
1022-
boxes will flow into line boxes.
1023-
<li>When set for a <a href="#block-level">block-level</a>
1024-
element, it specifies the direction that descendant
1025-
inline and anonymous boxes will flow into line boxes.
1026-
<li>When set for a <a href="tables.html">table</a>
1027-
element, it specifies the direction of table layout.
1028-
<li>It specifies the direction that a <a
1029-
href="visudet.html#containing-block">containing block</a> will grow
1030-
in certain cases of content <a href="visufx.html#overflow">overflow</a>.
1031-
</ol>
1032-
1033-
<div class="under-construction">
1034-
<P><em>===This section is under construction===</em></p>
1035-
<P>In order to ensure the proper application of the bidirectional
1036-
algorithm, all of the above must ultimately be subject to the base
1037-
writing direction of text in a block. If a user agent applies the
1038-
bidirectional algorithm while formatting a block or a table (see the
1039-
above conditions for application), the base direction for all of the
1040-
above flow types except writing direction must be the same for the
1041-
entire block or table. Thus, inline boxes either flow only
1042-
left-to-right or right-to-left in a block of text. Similarly, table
1043-
columns are laid out either left-to-right or right-to-left, but
1044-
not both.
1045-
1046-
<!-- What about embedded direction changes then? -IJ -->
1047-
1048-
<div class="example"><P>
1049-
Consider the following example of a paragraph of Hebrew text:</p>
1050-
1051-
<PRE class="html-example">
1052-
&lt;P lang="he"&gt;<em>...Hebrew text...</em>&lt;/&gt;
1053-
</PRE>
1054-
1055-
<P>with this style sheet:</p>
1056-
1057-
<PRE>
1058-
P { display: block; direction: ltr}
1059-
</PRE>
1060-
1061-
<P>Despite the value of 'ltr' for the <span
1062-
class="propinst-direction">'direction'</span> property,
1063-
the inline boxes generated by this paragraph of Hebrew text
1064-
will flow right-to-left, as they are subject to the
1065-
base writing direction when the Unicode bidi algorithm
1066-
is applied (which is the case here).
1067-
</div>
1068-
<P><em>===End under construction===</em></p>
1069-
</div>
1070-
1071-
1072-
<!-- Add examples here -IJ -->
1073-
1074-
<P>For a left-to-right <a href="#inline-formatting">inline formatting
1075-
context</a>, the horizontal distance between the right side of a box
1076-
and the left side of the <a href="#following-box">following box</a>
1077-
(or right side of the parent box if no following box exists) is
1078-
determined by the source element's <span
1079-
class="propinst-margin">'margin'</span> properties. For right-to-left
1080-
flow, the horizontal distance between the left side of a box and the
1081-
right side of the <a href="#preceding-box">preceding box</a> (or left
1082-
side of the parent box is no preceding box exists) is similarly
1083-
determined by the source element's <span
1084-
class="propinst-margin">'margin'</span> properties.
1085-
10861026
<!-- #include src=properties/unicode-bidi.srb -->
10871027

10881028
<P>The writing direction of text within an inline box depends on two
@@ -1092,7 +1032,9 @@ factors:</p>
10921032
<li>The directionality of the characters, as specified in
10931033
the Unicode specification ([[UNICODE]]).
10941034
<li>The value of the <span
1095-
class="propinst-unicode-bidi">'unicode-bidi'</span> property.
1035+
class="propinst-unicode-bidi">'unicode-bidi'</span> property
1036+
(in conjunction with the value of the <span
1037+
class="propinst-direction">'direction'</span> property).
10961038
</ol>
10971039

10981040
<P>User agents following the bidirectional algorithm will display
@@ -1228,28 +1170,119 @@ versa.
12281170

12291171
</div><!-- example -->
12301172

1231-
<h4><a name="html40-bidi">Bidirectionality in HTML 4.0</a></h4>
1173+
<h4>Interaction between inline flow and text direction</h4>
12321174

1233-
<P>The following style sheet accurately expresses the behavior of
1234-
HTML as described in the HTML 4.0 specification ([[HTML40]]).
1175+
<P>The <span class="propinst-direction">'direction'</span> property
1176+
determines the direction of several types of flow:</p>
1177+
1178+
<ol>
1179+
<li>When set for an <a href="#inline">inline</a>
1180+
element or <a href="#block-level">block-level</a> element,
1181+
it specifies the base writing direction of inline
1182+
text generated by the element.
1183+
<li>When set for an <a href="#inline">inline</a>
1184+
element, it specifies the direction that generated inline
1185+
boxes will flow into line boxes.
1186+
<li>When set for a <a href="#block-level">block-level</a>
1187+
element, it specifies the direction that descendant
1188+
inline and anonymous boxes will flow into line boxes.
1189+
<li>When set for a <a href="tables.html">table</a>
1190+
element, it specifies the direction of table layout.
1191+
<li>It specifies the direction that a <a
1192+
href="visudet.html#containing-block">containing block</a> will grow
1193+
in certain cases of content
1194+
</ol>
1195+
1196+
<P>In order to ensure the proper application of the bidirectional
1197+
algorithm, all inline boxes within the same containing block must flow
1198+
in the same direction (be that left-to-right or right-to-left). Even
1199+
if a block of text contains text in both directions, inline boxes flow
1200+
in the direction specified for the containing block. In an inline
1201+
formatting context, non-textual entities such as images are treated as
1202+
neutral characters, unless they are included by an element whose <span
1203+
class="propinst-unicode-bidi">'unicode-bidi'</span> property has a
1204+
value other than 'normal', in which case they are treated as strong
1205+
characters in the <span class="propinst-direction">'direction'</span>
1206+
specified for the element.
1207+
1208+
1209+
<div class="bidi-example"><P>
1210+
For instance, suppose that in the middle
1211+
of a paragraph of Hebrew (right-to-left) text, we
1212+
embed an English quotation:</p>
1213+
1214+
<pre class="html-example">
1215+
&lt;P lang="he"&gt;WERBEH WERBEH WERBEH WERBEH WERBEH
1216+
WERBEH WERBEH WERBEH WERBEH WERBEH
1217+
WERBEH WERBEH WERBEH &lt;SPAN lang="en"&gt;English
1218+
quote here&lt;/SPAN&gt; WERBEH WERBEH&lt;/&gt;
1219+
</pre>
1220+
1221+
<P>The right-to-left flow of Hebrew
1222+
text stops at the asterisk (*) in the following diagram:</p>
1223+
1224+
<PRE>
1225+
WERBEH WERBEH WERBEH WERBEH WERBEH
1226+
WERBEH WERBEH WERBEH WERBEH WERBEH
1227+
*WERBEH WERBEH WERBEH
1228+
</PRE>
1229+
1230+
<P>While inline flow continues right-to-left after the asterisk,
1231+
the English text is laid out left-to-right. Thus, successive
1232+
letters will fill in the available space as follows:</p>
12351233

1236-
<div class="example"><P>
12371234
<PRE>
1238-
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
1239-
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
1235+
E *WERBEH WERBEH WERBEH
1236+
En *WERBEH WERBEH WERBEH
1237+
Eng *WERBEH WERBEH WERBEH
1238+
Engl *WERBEH WERBEH WERBEH
1239+
Engli *WERBEH WERBEH WERBEH
1240+
Englis *WERBEH WERBEH WERBEH
1241+
</PRE>
12401242

1241-
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
1242-
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
1243+
<P>Etc., onto the following line:</p>
12431244

1244-
/* Block-level elements open a new embedding */
1245-
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT,
1246-
FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6,
1247-
IFRAME, NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL,
1248-
APPLET, CENTER, DIR, HR, MENU, PRE { unicode-bidi: embed }
1245+
<PRE>
1246+
English quote *WERBEH WERBEH WERBEH
1247+
h
1248+
1249+
English quote *WERBEH WERBEH WERBEH
1250+
he
1251+
1252+
English quote *WERBEH WERBEH WERBEH
1253+
her
1254+
1255+
English quote *WERBEH WERBEH WERBEH
1256+
here
12491257
</PRE>
1258+
1259+
<P>Hebrew text continues to flow right-to-left at the
1260+
end of the English text.
12501261
</div>
12511262

1263+
<h4><a name="html40-bidi">Bidirectionality in HTML 4.0</a></h4>
1264+
1265+
<P>In order to preserve the expected behavior of HTML 4.0 elements,
1266+
their bidirectionality must be preserved <em>however they are
1267+
rendered</em>. For example, people expect paragraphs to behave like a
1268+
block with respect to bidirectionality, so even if a paragraph is
1269+
displayed as an 'inline' element, it must introduce a new level of
1270+
bidi embedding. To achieve this, all HTML 4.0 ([[HTML40]])
1271+
block elements must behave as though they had a value of 'embed'
1272+
for <span class="propinst-unicode-bidi">'unicode-bidi'</span>,
1273+
whatever the value of the <span
1274+
class="propinst-display">'display'</span> property.
1275+
1276+
<P>The following rules capture the remaining bidi semantics
1277+
of HTML 4.0:</p>
1278+
1279+
<PRE class="example">
1280+
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
1281+
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
12521282

1283+
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
1284+
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
1285+
</PRE>
12531286

12541287
<H3><a name="relative-positioning">Relative positioning</a></H3>
12551288

0 commit comments

Comments
 (0)