Mercurial > drafts / file diff

     1.1 --- a/css3-overflow/Overview.src.html	Mon Aug 06 18:09:41 2012 -0700
     1.2 +++ b/css3-overflow/Overview.src.html	Mon Aug 06 18:31:23 2012 -0700
     1.3 @@ -39,6 +39,27 @@
     1.4  			background: yellow; color: black;
     1.5  			transform: rotate(3deg);
     1.6  		}
     1.7 +
     1.8 +		.article-max-lines-demo {
     1.9 +			font: 1em/1.25 Times New Roman, Times, serif;
    1.10 +			white-space: nowrap;
    1.11 +		}
    1.12 +		.article-max-lines-demo.one::first-letter {
    1.13 +			font-size: 2em;
    1.14 +			line-height: 0.9;
    1.15 +		}
    1.16 +		.article-max-lines-demo.one {
    1.17 +			font-size: 1.5em;
    1.18 +			width: 16em;
    1.19 +		}
    1.20 +		.article-max-lines-demo.two {
    1.21 +			width: 11.5em;
    1.22 +			float: left; margin-right: 1em;
    1.23 +		}
    1.24 +		.article-max-lines-demo.three {
    1.25 +			width: 11.5em;
    1.26 +			float: left;
    1.27 +		}
    1.28  	</style>
    1.29  </head>
    1.30  
    1.31 @@ -544,9 +565,33 @@
    1.32  <p class="issue">Should this apply to regions overflow only, or also
    1.33  to pagination?</p>
    1.34  
    1.35 -	<p class="issue">
    1.36 -		TODO: ADD EXAMPLE HERE.
    1.37 -	</p>
    1.38 +	<div class="example">
    1.39 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
    1.40 +&lt;style&gt;
    1.41 +  .article {
    1.42 +    overflow: regions;
    1.43 +  }
    1.44 +  .article::first-letter {
    1.45 +    font-size: 2em;
    1.46 +    line-height: 0.9;
    1.47 +  }
    1.48 +  .article::nth-region(1) {
    1.49 +    font-size: 1.5em;
    1.50 +    max-lines: 3;
    1.51 +  }
    1.52 +  .article::nth-region(n+2) {
    1.53 +    /* 2 and up */
    1.54 +    column-count: 2;
    1.55 +  }
    1.56 +&lt;/style&gt;
    1.57 +&lt;div class="article"&gt;
    1.58 +  <i>...</i>
    1.59 +&lt;/div&gt;</pre></td><td>
    1.60 +			<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.61 +			<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.62 +			<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>
    1.63 +		</td></tr></table>
    1.64 +	</div>
    1.65  
    1.66  <h2 id="conformance">
    1.67  Conformance</h2>