Mercurial > drafts / changeset

     1.1 --- a/css-overflow/Overview.bs	Tue May 23 10:25:27 2017 +0900
     1.2 +++ b/css-overflow/Overview.bs	Tue May 23 10:44:45 2017 +0900
     1.3 @@ -585,7 +585,8 @@
     1.4  	</p>
     1.5  
     1.6  	<div class="example">
     1.7 -		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
     1.8 +		<table class="source-demo-pair"><tr><td>
     1.9 +<pre><code highlight="html">&lt;!DOCTYPE HTML&gt;
    1.10  &lt;title&gt;Breaking content into
    1.11    equal-sized cards&lt;/title&gt;
    1.12  &lt;style&gt;
    1.13 @@ -612,7 +613,7 @@
    1.14    another one to be created.  The second
    1.15    card is created just like it's the
    1.16    next sibling of the first.
    1.17 -&lt;/div&gt;</pre></td><td>
    1.18 +&lt;/div&gt;</code></pre></td><td>
    1.19  			<div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards.  These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div>
    1.20  			<div class="in-cards-demo">one to be created.  The second<br>card is created just like it's the<br>next sibling of the first.</div>
    1.21  		</td></tr></table>
    1.22 @@ -712,7 +713,8 @@
    1.23  	</p>
    1.24  
    1.25  	<div class="example">
    1.26 -		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
    1.27 +		<table class="source-demo-pair"><tr><td>
    1.28 +<pre><code highlight="html">&lt;!DOCTYPE HTML&gt;
    1.29  &lt;style&gt;
    1.30    .bouncy-columns {
    1.31      continue: fragments;
    1.32 @@ -734,7 +736,7 @@
    1.33  &lt;/style&gt;
    1.34  &lt;div class="bouncy-columns"&gt;
    1.35    <i>...</i>
    1.36 -&lt;/div&gt;</pre></td><td>
    1.37 +&lt;/div&gt;</code></pre></td><td>
    1.38  			<div class="bouncy-columns-demo one">In this<br>example, the<br>text in the div<br>is broken into<br>a series of<br>columns.  The<br>author<br>probably</div>
    1.39  			<div class="bouncy-columns-demo two">intended the<br>text to fill two<br>columns.  But<br>if it happens to<br>fill three<br>columns, the<br>third column is<br>still created.  It</div>
    1.40  			<div class="bouncy-columns-demo">just doesn't<br>have any<br>fragment-specific<br>styling because<br>the author<br>didn't give it<br>any.</div>
    1.41 @@ -810,7 +812,8 @@
    1.42  	</p>
    1.43  
    1.44  	<div class="example">
    1.45 -		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
    1.46 +		<table class="source-demo-pair"><tr><td>
    1.47 +<pre><code highlight="html">&lt;!DOCTYPE HTML&gt;
    1.48  &lt;style&gt;
    1.49    .article {
    1.50      continue: fragments;
    1.51 @@ -827,7 +830,7 @@
    1.52  &lt;/style&gt;
    1.53  &lt;div class="article"&gt;
    1.54    The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
    1.55 -&lt;/div&gt;</pre></td><td>
    1.56 +&lt;/div&gt;</code></pre></td><td>
    1.57  			<div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
    1.58  			<div class="article-font-inherit-demo two">descendants of the fragment.<br>This means that inherited<br>properties can be used<br>reliably on a fragment, as in<br>this example.</div>
    1.59  		</td></tr></table>
    1.60 @@ -884,7 +887,8 @@
    1.61  	</ol>
    1.62  
    1.63  	<div class="example">
    1.64 -		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
    1.65 +		<table class="source-demo-pair"><tr><td>
    1.66 +<pre><code highlight="html">&lt;!DOCTYPE HTML&gt;
    1.67  &lt;style&gt;
    1.68    .dark-columns {
    1.69      continue: fragments;
    1.70 @@ -916,7 +920,7 @@
    1.71  &lt;/style&gt;
    1.72  &lt;div class="dark-columns"&gt;
    1.73    <i>...</i>
    1.74 -&lt;/div&gt;</pre></td><td>
    1.75 +&lt;/div&gt;</code></pre></td><td>
    1.76  			<div class="dark-columns-demo one">In this<br><a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>text flows<br>from one<br>light-colored<br>fragment into<br>another<br>dark-colored</div>
    1.77  			<div class="dark-columns-demo two">fragment.  We<br>therefore want<br>different styles<br>for <a href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>in the different<br>fragments.</div>
    1.78  		</td></tr></table>
    1.79 @@ -999,7 +1003,8 @@
    1.80  that effect.
    1.81  
    1.82  	<div class="example">
    1.83 -		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
    1.84 +		<table class="source-demo-pair"><tr><td>
    1.85 +<pre><code highlight="html">&lt;!DOCTYPE HTML&gt;
    1.86  &lt;style&gt;
    1.87    .article {
    1.88      continue: fragments;
    1.89 @@ -1018,7 +1023,7 @@
    1.90  &lt;/style&gt;
    1.91  &lt;div class="article"&gt;
    1.92    <i>...</i>
    1.93 -&lt;/div&gt;</pre></td><td>
    1.94 +&lt;/div&gt;</code></pre></td><td>
    1.95  			<div class="article-max-lines-demo one">The max-lines property allows<br>authors to use a larger font for the first<br>few lines of an article.  Without the</div>
    1.96  			<div class="article-max-lines-demo two">max-lines property, authors<br>might have to use the<br>'height' property instead, but<br>that would leave a slight gap<br>if the author miscalculated<br>how much height a given<br>number of lines would<br>occupy (which might be</div>
    1.97  			<div class="article-max-lines-demo three">particularly hard if the author<br>didn't know what text would<br>be filling the space, exactly<br>what font would be used, or<br>exactly which platform's font<br>rendering would be used to<br>display the font).</div>