[css-exclusions] start/end consistency (bug 16437)
authorAlan Stearns <stearns@adobe.com>
Mon, 21 Jan 2013 17:02:00 -0800
changeset 7201f0fc441a0906
parent 7200 863756af5435
child 7202 ff122f7bc4c0
[css-exclusions] start/end consistency (bug 16437)
css3-exclusions/Exclusions.src.html
css3-exclusions/Overview.html
css3-exclusions/examples/exclusion-writing-modes.html
css3-exclusions/images/exclusion-writing-modes.png
     1.1 --- a/css3-exclusions/Exclusions.src.html	Mon Jan 21 16:13:22 2013 -0800
     1.2 +++ b/css3-exclusions/Exclusions.src.html	Mon Jan 21 17:02:00 2013 -0800
     1.3 @@ -257,13 +257,6 @@
     1.4          </tr>
     1.5      </table>
     1.6  
     1.7 -    <div class="issue-marker" data-bug_id="16437" data-bug_status="ASSIGNED">
     1.8 -      <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16437">Issue-16437</a>
     1.9 -      <div class="issue-details">
    1.10 -          <p class="short-desc">Consistent use of start/end/top/bottom</p>
    1.11 -      </div>  
    1.12 -    </div>
    1.13 -
    1.14      <p>The values of this property have the following meanings:</p>
    1.15      <dl>
    1.16          <dt><dfn title="'wrap-flow'!!'auto'">auto</dfn></dt>
    1.17 @@ -279,31 +272,48 @@
    1.18          </dd>
    1.19          <dt><dfn title="'wrap-flow'!!'start'">start</dfn></dt>
    1.20          <dd>
    1.21 -            Inline flow content can flow before the start edge of the <span>exclusion area</span> but 
    1.22 -            must leave the area after the end edge of the exclusion empty.
    1.23 +            Inline flow content can flow 
    1.24 +            around the start edge 
    1.25 +            of the <span>exclusion area</span> 
    1.26 +            but must leave the area 
    1.27 +            next to the end edge 
    1.28 +            of the exclusion empty.
    1.29          </dd>
    1.30          <dt><dfn title="'wrap-flow'!!'end'">end</dfn></dt>
    1.31          <dd>
    1.32 -            Inline flow content can flow after the end edge of the <span>exclusion area</span> but 
    1.33 -            must leave the area before the start edge of the exclusion empty.
    1.34 +            Inline flow content can flow 
    1.35 +            around the end edge 
    1.36 +            of the <span>exclusion area</span> 
    1.37 +            but must leave the area 
    1.38 +            next to the start edge 
    1.39 +            of the exclusion empty.
    1.40          </dd>
    1.41          <dt><dfn title="'wrap-flow'!!'minimum'">minimum</dfn></dt>
    1.42          <dd>
    1.43 -            Inline flow content can flow on the edge of the exclusion with the smallest 
    1.44 -            available space within its containing block, and must leave the other edge 
    1.45 +            Inline flow content can flow 
    1.46 +            around the edge of the exclusion 
    1.47 +            with the smallest available space 
    1.48 +            within the flow content's containing block, 
    1.49 +            and must leave the other edge
    1.50              of the exclusion empty.
    1.51          </dd>
    1.52          <dt><dfn title="'wrap-flow'!!'maximum'">maximum</dfn></dt>
    1.53          <dd>
    1.54 -            Inline flow content can flow on the edge of the exclusion with the largest 
    1.55 -            available space within its containing block, and must leave the other edge 
    1.56 +            Inline flow content can flow 
    1.57 +            around the edge of the exclusion 
    1.58 +            with the largest available space 
    1.59 +            within the flow content's containing block, 
    1.60 +            and must leave the other edge
    1.61              of the exclusion empty.
    1.62          </dd>
    1.63          <dt><dfn title="'wrap-flow'!!'clear'">clear</dfn></dt>
    1.64          <dd>
    1.65 -            Inline flow content can only flow on top and bottom edges of the exclusion 
    1.66 -            and must leave the areas before the start and after the end edges of the 
    1.67 -            exclusion empty.
    1.68 +            Inline flow content can only flow 
    1.69 +            before and after the exclusion 
    1.70 +            in the flow content's block direction 
    1.71 +            and must leave the areas 
    1.72 +            next to the start and end edges 
    1.73 +            of the exclusion empty.
    1.74          </dd>
    1.75      </dl>
    1.76  
    1.77 @@ -318,6 +328,13 @@
    1.78          <span>wrapping context</span>, causing the containing block's descendants to wrap around 
    1.79          its <span>exclusion area</span>.
    1.80      </p>
    1.81 +
    1.82 +    <div class="figure">
    1.83 +        <img alt="LTR text wrapping on left edge, RTL text wrapping on right edge, and vertical text wrapping on top edge." src="images/exclusion-writing-modes.png" width="70%" />
    1.84 +        <p class="caption">Exclusion with 'wrap-flow: start' interacting with various writing modes.</p>
    1.85 +    </div>
    1.86 +
    1.87 +    <p>Determining the relevant edges of the exclusion depends on the <a href="http://www.w3.org/TR/css3-writing-modes/#text-flow">writing mode</a> [[!CSS3-WRITING-MODES]] of the content wrapping around the <span>exclusion area</span>.
    1.88      
    1.89      <p>An <span>exclusion element</span> establishes a 
    1.90          new <a href="">block formatting context</a> (see [[!CSS21]]) for its content.</p>
    1.91 @@ -328,18 +345,25 @@
    1.92      </div>
    1.93      
    1.94      <p>
    1.95 -        The above figure illustrates how exclusions are combined. The outermost box represents
    1.96 -        an element's content box. The A, B, C and D darker gray boxes represent exclusions
    1.97 -        in the element's <span>wrapping context</span>. A, B, C and D have their respective 'wrap-flow'
    1.98 -        computed to 'both', 'start', 'end' and 'clear' respectively. The lighter gray areas show
    1.99 -        the additional areas that are excluded for inline layout as a result of the 'wrap-flow'
   1.100 -        value. For example, the area to the right of 'B' cannot be used for inline layout
   1.101 +        The above figure illustrates how exclusions are combined. 
   1.102 +        The outermost box represents an element's content box. 
   1.103 +        The A, B, C and D darker gray boxes represent exclusions 
   1.104 +        in the element's <span>wrapping context</span>. 
   1.105 +        A, B, C and D have their respective 'wrap-flow' 
   1.106 +        computed to 'both', 'start', 'end' and 'clear' respectively. 
   1.107 +        The lighter gray areas show the additional areas 
   1.108 +        that are excluded for inline layout 
   1.109 +        as a result of the 'wrap-flow'value. 
   1.110 +        For example, the area to the right of 'B' 
   1.111 +        cannot be used for inline layout 
   1.112 +        of left-to-right writing mode content 
   1.113          because the 'wrap-flow' for 'B' is 'start'.
   1.114      </p>
   1.115      <p>
   1.116 -        The background 'blue' area shows what areas are available for the element's inline content layout.
   1.117 -        All areas represented with a light or dark shade of gray are not available for inline
   1.118 -        content layout.
   1.119 +        The background 'blue' area shows what areas are available 
   1.120 +        for a left-to-right writing mode element's inline content layout. 
   1.121 +        All areas represented with a light or dark shade of gray 
   1.122 +        are not available for (left-to-right writing mode) inline content layout.
   1.123      </p>
   1.124      
   1.125  <div class="issue-marker wrapper">
   1.126 @@ -1615,33 +1639,33 @@
   1.127      </div>
   1.128  
   1.129      <p>Overflow content can overlap 
   1.130 -        the bottom edge of a shape, 
   1.131 +        the after edge of a shape, 
   1.132          and overflow content can be displayed 
   1.133          below the content area defined by shape. 
   1.134          When content overflows in the block direction, 
   1.135          the last line in the content area determines its width(s) 
   1.136          by finding the minimum shape width(s) 
   1.137          in the remaining area 
   1.138 -        between the line's top edge 
   1.139 -        and the shape's bottom edge. 
   1.140 +        between the line's before edge 
   1.141 +        and the shape's after edge. 
   1.142          This can result 
   1.143 -        in the line intersecting the shape's bottom edge, 
   1.144 +        in the line intersecting the shape's after edge, 
   1.145          or a zero-width line 
   1.146 -        if (for instance) the shape's bottom edge 
   1.147 +        if (for instance) the shape's after edge 
   1.148          is a continuous curve. 
   1.149          In degenerate cases, 
   1.150          there may be no content 
   1.151          that fits inside the content area 
   1.152          defined by the shape. 
   1.153          Further overflow is laid out 
   1.154 -        below the bottom edge 
   1.155 +        below the after edge 
   1.156          of the shape's bounding box 
   1.157          as if 'shape-inside' computes to 'auto'.</p>
   1.158  
   1.159      <div class='figure'>
   1.160              <img alt="Overflow interacting with rounded rect" style="display:inline-block;vertical-align:top" src="images/rounded-rect-overflow.png"/>
   1.161              <img alt="Overflow interacting with ellipse" style="display:inline-block;vertical-align:top" src="images/ellipse-overflow.png"/>
   1.162 -        <p class="caption">Overflow interacting with the bottom edge of shapes defined by 'shape-inside' and 'shape-padding'.</p>
   1.163 +        <p class="caption">Overflow interacting with the after edge of shapes defined by 'shape-inside' and 'shape-padding'.</p>
   1.164      </div>
   1.165          
   1.166      <!-- End section "The shape-inside property" -->
   1.167 @@ -2033,6 +2057,7 @@
   1.168            Daniel Glazman,  
   1.169            Arno Gourdol, 
   1.170            Chris Jones, 
   1.171 +          Bem Jones-Bey, 
   1.172            Marcus Mielke, 
   1.173            Alex Mogilevsky, 
   1.174            Hans Muller, 
   1.175 @@ -2074,6 +2099,8 @@
   1.176        
   1.177        <h3>Since <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">May 3rd 2012</a></h3>
   1.178        <ul>
   1.179 +          <li>Defined exclusion edges relative to wrapping content's writing mode</li>
   1.180 +          <li>Made use of start, end, before and after consistent</li>
   1.181            <li>Added interpolation for basic shapes</li>
   1.182            <li>Changed basic shapes to depend on box specified with box-sizing</li>
   1.183            <li>Added overflow behavior for shape-inside.</li>
     2.1 --- a/css3-exclusions/Overview.html	Mon Jan 21 16:13:22 2013 -0800
     2.2 +++ b/css3-exclusions/Overview.html	Mon Jan 21 17:02:00 2013 -0800
     2.3 @@ -13,11 +13,11 @@
     2.4    <meta content="CSS Exclusions and Shapes Module Level 3"
     2.5     name=dcterms.title>
     2.6    <meta content=text name=dcterms.type>
     2.7 -  <meta content=2013-01-15 name=dcterms.issued>
     2.8 +  <meta content=2013-01-22 name=dcterms.issued>
     2.9    <meta content="http://dev.w3.org/csswg/css3-exclusions/"
    2.10     name=dcterms.creator>
    2.11    <meta content=W3C name=dcterms.publisher>
    2.12 -  <meta content="http://www.w3.org/TR/2013/ED-css3-exclusions-20130115/"
    2.13 +  <meta content="http://www.w3.org/TR/2013/ED-css3-exclusions-20130122/"
    2.14     name=dcterms.identifier>
    2.15    <link href="../shared/style/default.css" rel=stylesheet type="text/css">
    2.16    <script defer=defer
    2.17 @@ -55,7 +55,7 @@
    2.18  
    2.19     <h1 id=css-exclusions-module>CSS Exclusions and Shapes Module Level 3</h1>
    2.20  
    2.21 -   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 January
    2.22 +   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 January
    2.23      2013</h2>
    2.24  
    2.25     <dl>
    2.26 @@ -63,7 +63,7 @@
    2.27  
    2.28      <dd><a
    2.29       href="http://dev.w3.org/csswg/css3-exclusions/">http://dev.w3.org/csswg/css3-exclusions/</a></dd>
    2.30 -    <!--<dd><a href="http://www.w3.org/TR/2013/ED-css3-exclusions-20130115/">http://www.w3.org/TR/2013/WD-css3-exclusions-20130115/</a></dd>-->
    2.31 +    <!--<dd><a href="http://www.w3.org/TR/2013/ED-css3-exclusions-20130122/">http://www.w3.org/TR/2013/WD-css3-exclusions-20130122/</a></dd>-->
    2.32  
    2.33      <dt>Latest version:
    2.34  
    2.35 @@ -546,14 +546,6 @@
    2.36        class=property>auto</code>’.
    2.37    </table>
    2.38  
    2.39 -  <div class=issue-marker data-bug_id=16437 data-bug_status=ASSIGNED> <a
    2.40 -   href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16437">Issue-16437</a>
    2.41 -
    2.42 -   <div class=issue-details>
    2.43 -    <p class=short-desc>Consistent use of start/end/top/bottom
    2.44 -   </div>
    2.45 -  </div>
    2.46 -
    2.47    <p>The values of this property have the following meanings:
    2.48  
    2.49    <dl>
    2.50 @@ -571,33 +563,33 @@
    2.51  
    2.52     <dt><dfn id=start title="'wrap-flow'!!'start'">start</dfn>
    2.53  
    2.54 -   <dd> Inline flow content can flow before the start edge of the <a
    2.55 -    href="#exclusion-area">exclusion area</a> but must leave the area after
    2.56 +   <dd> Inline flow content can flow around the start edge of the <a
    2.57 +    href="#exclusion-area">exclusion area</a> but must leave the area next to
    2.58      the end edge of the exclusion empty.
    2.59  
    2.60     <dt><dfn id=end title="'wrap-flow'!!'end'">end</dfn>
    2.61  
    2.62 -   <dd> Inline flow content can flow after the end edge of the <a
    2.63 -    href="#exclusion-area">exclusion area</a> but must leave the area before
    2.64 +   <dd> Inline flow content can flow around the end edge of the <a
    2.65 +    href="#exclusion-area">exclusion area</a> but must leave the area next to
    2.66      the start edge of the exclusion empty.
    2.67  
    2.68     <dt><dfn id=minimum title="'wrap-flow'!!'minimum'">minimum</dfn>
    2.69  
    2.70 -   <dd> Inline flow content can flow on the edge of the exclusion with the
    2.71 -    smallest available space within its containing block, and must leave the
    2.72 -    other edge of the exclusion empty.
    2.73 +   <dd> Inline flow content can flow around the edge of the exclusion with
    2.74 +    the smallest available space within the flow content's containing block,
    2.75 +    and must leave the other edge of the exclusion empty.
    2.76  
    2.77     <dt><dfn id=maximum title="'wrap-flow'!!'maximum'">maximum</dfn>
    2.78  
    2.79 -   <dd> Inline flow content can flow on the edge of the exclusion with the
    2.80 -    largest available space within its containing block, and must leave the
    2.81 -    other edge of the exclusion empty.
    2.82 +   <dd> Inline flow content can flow around the edge of the exclusion with
    2.83 +    the largest available space within the flow content's containing block,
    2.84 +    and must leave the other edge of the exclusion empty.
    2.85  
    2.86     <dt><dfn id=clear title="'wrap-flow'!!'clear'">clear</dfn>
    2.87  
    2.88 -   <dd> Inline flow content can only flow on top and bottom edges of the
    2.89 -    exclusion and must leave the areas before the start and after the end
    2.90 -    edges of the exclusion empty.
    2.91 +   <dd> Inline flow content can only flow before and after the exclusion in
    2.92 +    the flow content's block direction and must leave the areas next to the
    2.93 +    start and end edges of the exclusion empty.
    2.94    </dl>
    2.95  
    2.96    <p> If the property's computed value is ‘<code
    2.97 @@ -616,6 +608,20 @@
    2.98     context</a>, causing the containing block's descendants to wrap around its
    2.99     <a href="#exclusion-area">exclusion area</a>. </span>
   2.100  
   2.101 +  <div class=figure> <img
   2.102 +   alt="LTR text wrapping on left edge, RTL text wrapping on right edge, and vertical text wrapping on top edge."
   2.103 +   src="images/exclusion-writing-modes.png" width="70%">
   2.104 +   <p class=caption>Exclusion with ‘<code class=css>wrap-flow:
   2.105 +    start</code>’ interacting with various writing modes.
   2.106 +  </div>
   2.107 +
   2.108 +  <p>Determining the relevant edges of the exclusion depends on the <a
   2.109 +   href="http://www.w3.org/TR/css3-writing-modes/#text-flow">writing mode</a>
   2.110 +   <a href="#CSS3-WRITING-MODES"
   2.111 +   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a> of
   2.112 +   the content wrapping around the <a href="#exclusion-area">exclusion
   2.113 +   area</a>.
   2.114 +
   2.115    <p>An <a href="#exclusion-element">exclusion element</a> establishes a new
   2.116     <a href="">block formatting context</a> (see <a href="#CSS21"
   2.117     rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) for its content.
   2.118 @@ -636,17 +642,18 @@
   2.119     ‘<code class=property>end</code>’ and ‘<code
   2.120     class=property>clear</code>’ respectively. The lighter gray areas show
   2.121     the additional areas that are excluded for inline layout as a result of
   2.122 -   the ‘<a href="#wrap-flow"><code class=property>wrap-flow</code></a>’
   2.123 -   value. For example, the area to the right of ‘<code
   2.124 -   class=property>B</code>’ cannot be used for inline layout because the
   2.125 -   ‘<a href="#wrap-flow"><code class=property>wrap-flow</code></a>’ for
   2.126 +   the ‘<a href="#wrap-flow"><code
   2.127 +   class=property>wrap-flow</code></a>’value. For example, the area to the
   2.128 +   right of ‘<code class=property>B</code>’ cannot be used for inline
   2.129 +   layout of left-to-right writing mode content because the ‘<a
   2.130 +   href="#wrap-flow"><code class=property>wrap-flow</code></a>’ for
   2.131     ‘<code class=property>B</code>’ is ‘<code
   2.132     class=property>start</code>’.
   2.133  
   2.134    <p> The background ‘<code class=property>blue</code>’ area shows what
   2.135 -   areas are available for the element's inline content layout. All areas
   2.136 -   represented with a light or dark shade of gray are not available for
   2.137 -   inline content layout.
   2.138 +   areas are available for a left-to-right writing mode element's inline
   2.139 +   content layout. All areas represented with a light or dark shade of gray
   2.140 +   are not available for (left-to-right writing mode) inline content layout.
   2.141  
   2.142    <div class="issue-marker wrapper">
   2.143     <div class=issue-marker data-bug_id=15084 data-bug_status=NEW> <a
   2.144 @@ -2106,16 +2113,16 @@
   2.145     <p class=caption>Effect of shape-inside on inline content.
   2.146    </div>
   2.147  
   2.148 -  <p>Overflow content can overlap the bottom edge of a shape, and overflow
   2.149 +  <p>Overflow content can overlap the after edge of a shape, and overflow
   2.150     content can be displayed below the content area defined by shape. When
   2.151     content overflows in the block direction, the last line in the content
   2.152     area determines its width(s) by finding the minimum shape width(s) in the
   2.153 -   remaining area between the line's top edge and the shape's bottom edge.
   2.154 -   This can result in the line intersecting the shape's bottom edge, or a
   2.155 -   zero-width line if (for instance) the shape's bottom edge is a continuous
   2.156 +   remaining area between the line's before edge and the shape's after edge.
   2.157 +   This can result in the line intersecting the shape's after edge, or a
   2.158 +   zero-width line if (for instance) the shape's after edge is a continuous
   2.159     curve. In degenerate cases, there may be no content that fits inside the
   2.160     content area defined by the shape. Further overflow is laid out below the
   2.161 -   bottom edge of the shape's bounding box as if ‘<a
   2.162 +   after edge of the shape's bounding box as if ‘<a
   2.163     href="#shape-inside"><code class=property>shape-inside</code></a>’
   2.164     computes to ‘<code class=property>auto</code>’.
   2.165  
   2.166 @@ -2124,7 +2131,7 @@
   2.167     style="display:inline-block;vertical-align:top"> <img
   2.168     alt="Overflow interacting with ellipse" src="images/ellipse-overflow.png"
   2.169     style="display:inline-block;vertical-align:top">
   2.170 -   <p class=caption>Overflow interacting with the bottom edge of shapes
   2.171 +   <p class=caption>Overflow interacting with the after edge of shapes
   2.172      defined by ‘<a href="#shape-inside"><code
   2.173      class=property>shape-inside</code></a>’ and ‘<a
   2.174      href="#shape-padding"><code class=property>shape-padding</code></a>’.
   2.175 @@ -2570,9 +2577,9 @@
   2.176  
   2.177    <p>This specification is made possible by input from Andrei Bucur,
   2.178     Alexandru Chiculita, Arron Eicholz, Daniel Glazman, Arno Gourdol, Chris
   2.179 -   Jones, Marcus Mielke, Alex Mogilevsky, Hans Muller, Mihnea Ovidenie,
   2.180 -   Virgil Palanciuc, Peter Sorotokin, Bear Travis, Eugene Veselov, Stephen
   2.181 -   Zilles and the CSS Working Group members.
   2.182 +   Jones, Bem Jones-Bey, Marcus Mielke, Alex Mogilevsky, Hans Muller, Mihnea
   2.183 +   Ovidenie, Virgil Palanciuc, Peter Sorotokin, Bear Travis, Eugene Veselov,
   2.184 +   Stephen Zilles and the CSS Working Group members.
   2.185  
   2.186    <h2 class=no-num id=references>References</h2>
   2.187  
   2.188 @@ -2594,6 +2601,16 @@
   2.189     </dd>
   2.190     <!---->
   2.191  
   2.192 +   <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
   2.193 +
   2.194 +   <dd>Elika J. Etemad; Koji Ishii. <a
   2.195 +    href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS
   2.196 +    Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working
   2.197 +    Draft. (Work in progress.) URL: <a
   2.198 +    href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a>
   2.199 +   </dd>
   2.200 +   <!---->
   2.201 +
   2.202     <dt id=CSS3BOX>[CSS3BOX]
   2.203  
   2.204     <dd>Bert Bos. <a
   2.205 @@ -2968,6 +2985,10 @@
   2.206     2012</a></h3>
   2.207  
   2.208    <ul>
   2.209 +   <li>Defined exclusion edges relative to wrapping content's writing mode
   2.210 +
   2.211 +   <li>Made use of start, end, before and after consistent
   2.212 +
   2.213     <li>Added interpolation for basic shapes
   2.214  
   2.215     <li>Changed basic shapes to depend on box specified with box-sizing
     3.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     3.2 +++ b/css3-exclusions/examples/exclusion-writing-modes.html	Mon Jan 21 17:02:00 2013 -0800
     3.3 @@ -0,0 +1,72 @@
     3.4 +<!DOCTYPE html>
     3.5 +<html>
     3.6 +<head>
     3.7 +  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     3.8 +  <title></title>
     3.9 +  <style>
    3.10 +    .ltr {
    3.11 +      position: absolute;
    3.12 +      top: 240px;
    3.13 +      left: 10px;
    3.14 +      width: 190px;
    3.15 +      height: 145px;
    3.16 +      overflow: hidden;
    3.17 +    }
    3.18 +    .ltr > .fake {
    3.19 +      float: right;
    3.20 +      height: 60px;
    3.21 +      width: 90px;
    3.22 +    }
    3.23 +    .rtl {
    3.24 +      position: absolute;
    3.25 +      top: 240px;
    3.26 +      left: 220px;
    3.27 +      width: 190px;
    3.28 +      height: 145px;
    3.29 +      direction: rtl;
    3.30 +      overflow: hidden;
    3.31 +    }
    3.32 +    .rtl > .fake {
    3.33 +      float: left;
    3.34 +      height: 60px;
    3.35 +      width: 90px;
    3.36 +    }
    3.37 +    .ttb {
    3.38 +      position: absolute;
    3.39 +      top: 100px;
    3.40 +      left: 75px;
    3.41 +      height: 160px;
    3.42 +      width: 235px;
    3.43 +      -webkit-writing-mode: vertical-rl;
    3.44 +      writing-mode: tb-rl;
    3.45 +      overflow: hidden;
    3.46 +    }
    3.47 +    .ttb > .fake {
    3.48 +      float: right;
    3.49 +      height: 60px;
    3.50 +      width: 200px;
    3.51 +    }
    3.52 +    .exclusion {
    3.53 +      height: 100px;
    3.54 +      width: 200px;
    3.55 +      border: thin solid red;
    3.56 +      -ms-wrap-flow: start;
    3.57 +      position: absolute;
    3.58 +      top: 200px;
    3.59 +      left: 110px;
    3.60 +    }
    3.61 +  </style>
    3.62 +</head>
    3.63 +<body lang="en">
    3.64 +  <div class="ttb"><div class="fake"></div>
    3.65 +    <p>すべての人は、自己の権利及び義務並びに自己に対する刑事責任が決定されるに当たって、独立の公平な裁判所による公平な公開の審理を受けることについて完全に平等の権利を有する。 </p>
    3.66 +  </div>
    3.67 +  <div class="ltr"><div class="fake"></div>
    3.68 +    <p>Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him. </p>
    3.69 +  </div>
    3.70 +  <div class="rtl"><div class="fake"></div>
    3.71 +    <p>لكل إنسان الحق، على قدم المساواة التامة مع الآخرين، في أن تنظر قضيته أمام محكمة مستقلة نزيهة نظراً عادلاً علنياً للفصل في حقوقه والتزاماته وأية تهمة جنائية توجه إليه.</p>
    3.72 +  </div>
    3.73 +  <div class="exclusion"></div>
    3.74 +</body>
    3.75 +</html>
    3.76 \ No newline at end of file
     4.1 Binary file css3-exclusions/images/exclusion-writing-modes.png has changed