<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 3: Morphing & floating elements — INFO 343 Autumn 2012</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>INFO 343 Lecture 3</h1>
<h2>Morphing & floating elements</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>Morphing & floating elements</h1>
<h3>Lecture 3</h3>
<!-- <h4>Reading: 4.2–4.4; 3.1–3.3</h4> -->
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp, Jessica Miller, Morgan Doocy.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide titleslide">
<h1>1. Element morphing</h1>
<ul>
<li>
<strong>1. Element morphing</strong>
</li>
<li>
2. The <code>float</code> property
</li>
<li>
3. Web typography
</li>
</ul>
</div>
<div class="slide">
<h1>
Recall: The CSS <a href="http://www.w3schools.com/html/default.asp">Box Model</a>
<span class="readingsection">(4.2.1)</span>
</h1>
<div>
<img src="boxmodel.png" alt="box model diagram" style="height: 16em; float: right"/>
</div>
<ul>
<li>for layout, every element is composed of:
<ul>
<li>the actual element's <span class="term">content</span></li>
<li>a <span class="term">border</span> around the element</li>
<li><span class="term">padding</span> between the content and the border (<em>inside</em>)</li>
<li>a <span class="term">margin</span> between the border and other content (<em>outside</em>)</li>
</ul>
</li>
<li>
“overall width” = <code>width</code> + L/R <code>padding</code> & <code>border</code><br />
“overall height” = <code>height</code> + T/B <code>padding</code> & <code>border</code>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug">IE6 doesn't do this right</a></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Recall: Document flow - block and inline elements</h1>
<div><img style="float: right; margin: 0 2em" src="../s5/images/layout3.png" alt="flow" /></div>
<ul>
<li>
<p><em>Block</em> elements are containers for text</p>
<ul>
<li>Take up as much width as possible by default</li>
<li>Height is determined by amount of text inside</li>
<li>Have full CSS box model: <code>margin</code>, <code>padding</code>, <code>border</code></li>
</ul>
</li>
<li>
<p><em>Inline</em> elements flow with text inside a block element</p>
<ul>
<li>Positioned on a line of text</li>
<li>May be split across lines when wrapped</li>
<li>Have partial CSS box model (see next slide)</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Inline-block elements</h1>
<div class="example">
<pre class="examplecode css">
img { background-color: lightgreen; border: dashed 3px red;
height: 1em; padding: .25em; margin: .25em; }
</pre>
<div class="exampleoutput insertoutput">
<p><span style="background-color: yellow">Biodiesel portland mcsweeney's, lomo 3 wolf moon yr narwhal squid flexitarian odd future vegan forage. Mustache <img src="moustache.png" alt="Moustache" style="vertical-align: middle"/> mlkshk art party pour-over vice bicycle rights lo-fi, echo park jean shorts quinoa single-origin coffee fixie gentrify. American apparel photo booth truffaut pour-over high life pop-up.</span></p>
</div>
</div>
<ul>
<li>“Hybrid” of block and inline elements</li>
<li>Have all box model properties, but flow on line with text</li>
</ul>
</div>
<div class="slide">
<h1>The box model for inline elements</h1>
<div class="example">
<pre class="examplecode css">
strong { background-color: lightgreen; border: dashed 3px red;
padding: .25em; <del>height: 100em;</del> <del>width: 100em;</del>
margin-left: .25em; margin-right: .25em;
<del>margin-top: 100em;</del> <del>margin-bottom: 100em;</del> }
</pre>
<div class="exampleoutput">
<p><span style="background-color: yellow">Biodiesel portland mcsweeney's, lomo 3 wolf moon yr narwhal squid flexitarian odd future vegan forage. <strong style="background-color: lightgreen; border: dashed 3px red; height: 100em; width: 100em; padding: .25em; margin: 100em .25em; ">Mustache</strong> mlkshk art party pour-over vice bicycle rights lo-fi, echo park jean shorts quinoa single-origin coffee fixie gentrify. American apparel photo booth truffaut pour-over high life pop-up.</span></p>
</div>
</div>
<p>All box model properties apply to inline elements <strong>except</strong>:</p>
<ul>
<li>dimensions (<code>width</code>, <code>height</code>, <code>min-width</code>, etc.)</li>
<li>vertical margins (<code>margin-top</code>, <code>margin-bottom</code>)</li>
</ul>
</div>
<div class="slide">
<h1>
Element morphing: The <a href="http://www.w3schools.com/css/pr_class_display.asp"><code>display</code></a> property
<span class="readingsection">(4.4.4)</span>
</h1>
<div class="example">
<pre class="examplecode css">
h2 { <em>display: inline;</em> background-color: yellow; }
</pre>
<div class="exampleoutput insertoutput">
<h2>This is was a block-level element!</h2>
<h2>So was this!</h2>
</div>
</div>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>display</code>
</td>
<td>
sets the type of CSS box model an element is displayed with
</td>
</tr>
</table>
<ul>
<li>most common values: <code>inline</code>, <code>block</code>, <code>inline-block</code>
<ul>
<li>inline-block elements (like <code><img/></code>) rest on the baseline of a line of text, but they have a full box model including all margins and width/height</li>
</ul>
</li>
<li>use judiciously, because it can radically alter the page layout</li>
</ul>
</div>
<!-- <div class="slide">
<h1>List-ifying block-level elements</h1>
<div class="example">
<pre class="examplecode html">
<h3>The 'display' property</h3>
</pre>
<pre class="examplecode css">
h3 {
<em>display: list-item;</em>
counter-increment: subsection;
counter-reset: subsubsection;
}
h3:before {
content: counter(section) "." counter(subsection) "." counter(subsubsection) ". ";
}
</pre>
<div class="exampleoutput">
<style type="text/css">
h3#listifying {
display: list-item;
counter-reset: section 9;
counter-reset: subsection 2;
counter-reset: subsubsection 4;
}
h3#listifying:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) "." counter(subsubsection) ". ";
}
</style>
<h3 id="listifying">The 'display' property</h3>
</div>
</div>
<ul>
<li>list items and other block elements can be displayed inline
<ul>
<li>flow left-to-right on same line</li>
<li>width is determined by content (block elements are 100% of page width)</li>
</ul>
</li>
</ul>
</div> -->
<div class="slide">
<h1>Displaying block elements as inline</h1>
<div class="example">
<pre class="examplecode html">
<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</pre>
<pre class="examplecode css">
#topmenu li {
<em>display: inline;</em>
border: 2px solid gray;
margin-right: 1em;
}
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>list-items (<code>li</code>) and other block elements can be displayed inline
<ul>
<li>flow left-to-right on same line</li>
<li>width shrinks to fit content
<ul>
<li>(as opposed to block elements, which expand to fit container)</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Common problem: gap between inline elements</h1>
<div class="example">
<pre class="examplecode html">
<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</pre>
<pre class="examplecode css">
#topmenu li {
display: inline;
background-color: gray;
<em>margin: 0;</em>
}
#topmenu {
background-color: red;
}
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>list-items are now like words on a line — so space between them is like spaces between words
<ul>
<li>imagine the <code>li</code>’s are <code>a</code>’s or <code>em</code>’s; you would expect a space between them</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>No gap between inline elements</h1>
<div class="example">
<pre class="examplecode html">
<ul id="topmenu">
<li>Item 1</<em>li</em>
<em>><li></em>Item 2</<em>li</em>
<em>><li></em>Item 3</li>
</ul>
</pre>
<pre class="examplecode css">
#topmenu li {
display: inline;
background-color: gray;
margin: 0;
}
#topmenu {
background-color: red;
<em>padding-left: 0;</em>
}
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>put whitespace inside tag instead! (ugly, but only way to fix the problem)</li>
<li>also, remove default left padding from <code>ul</code> to remove space on left</li>
</ul>
</div>
<div class="slide">
<h1>Top/bottom margin collapse</h1>
<p class="description" style="float: right; width: 50%; margin-left: 1em;">
<img src="../s5/images/margincollapse2.png" alt="margin collapse" style="width: 100%;"/>
</p>
<ul>
<li>when two block elements appear on top of each other, their margins are collapsed</li>
<li>their shared margin is the larger of the two individual margins</li>
</ul>
<hr style="visibility: hidden" />
<p class="description" style="float: right; width: 50%; margin-left: 1em;">
<img src="../s5/images/margincollapse1.png" alt="margin collapse" style="width: 100%;"/>
</p>
<ul style="margin-top: 2em;">
<li>horizontal margins do not collapse</li>
</ul>
</div>
<div class="slide titleslide">
<h1>2. The <code>float</code> property</h1>
<ul>
<li>
1. Element morphing
</li>
<li>
<strong>2. The <code>float</code> property</strong>
</li>
<li>
3. Web typography
</li>
</ul>
</div>
<div class="slide">
<h1>
The CSS <code><a href="http://www.w3schools.com/css/pr_class_float.asp">float</a></code> property
(<a href="http://www.w3.org/TR/REC-CSS2/visuren.html#floats">reference</a>)
<span class="readingsection">(4.3.1)</span>
</h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>float</code>
</td>
<td>
side to hover on; can be <code>left</code>, <code>right</code>, or <code>none</code> (default)
</td>
</tr>
</table>
<ul>
<li>
<img src="images/float-clipped.png" alt="float" style="float: right; margin-left: 1em" />
a <em class="term">floating</em> element is removed from normal document flow
</li>
<li>
underlying text wraps around it as necessary
</li>
</ul>
</div>
<div class="slide">
<h1>Float example</h1>
<div class="example">
<pre class="examplecode html">
<img src="images/borat.jpg" alt="Borat" class="headericon" />
Borat Sagdiyev (born July 30, 1972) is a ...
</pre>
<pre class="examplecode css">
img.headericon {
<em>float: left;</em>
}
</pre>
<div class="exampleoutput">
<img src="images/borat.jpg" alt="Borat" class="headericon" style="float: left; width: 100px;" />
Borat Sagdiyev (born July 30, 1972) is a fictional Kazakhstani journalist played by British-Jewish comedian Sacha Baron Cohen. He is the main character portrayed in the controversial and successful film Borat: Cultural Learnings of America for Make Benefit Glorious Nation of Kazakhstan ...
</div>
</div>
</div>
<div class="slide">
<h1>Float vs. alignment</h1>
<div style="background-color: #ddd; padding: .25em">
none 1 before
</div>
<div style="background-color: #ddd; padding: .25em">
none 2 before
</div>
<div style="background-color: #bbf; float: right; padding: .25em">
right #1
</div>
<div style="background-color: #fbb; float: right; padding: .25em">
right #2
</div>
<div style="background-color: #bfb; float: left; padding: .25em">
left #1
</div>
<div style="background-color: #ffb; float: left; padding: .25em">
left #2
</div>
<div style="background-color: #ddd; padding: .25em">
none 1 after
</div>
<div style="background-color: #ddd; padding: .25em">
none 2 after
</div>
<ul style="clear: both">
<li>
using Firebug, toggle the above <code>div</code>s from being aligned to floated...
</li>
</ul>
</div>
<div class="slide">
<h1>Common <code>float</code>ing content and width</h1>
<p style="background-color: red;">I am not floating, no width set (typical block-level element)</p>
<p style="float: left; background-color: teal;">I am floating left, no width set</p>
<p style="float: right; background-color: teal;">I am floating right, no width set</p>
<p style="background-color: teal; float: right">I am floating, no width set, but my text is very long so this paragraph doesn't really seem like it's floating at all, darn</p>
<p style="clear: both; float: left; background-color: red; width: 45%">I am not floating, 45% width</p>
<p style="float: right; background-color: teal; width: 45%">I am floating right, 45% width</p>
<ul style="clear: both;">
<li>often floating elements should have a <code>width</code> property value
<ul>
<li>if no <code>width</code> is specified, other content may be unable to wrap around the floating element</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Interactive Example: Content vs. container</h1>
<p id="content_vs_container_p" style="background-color: fuchsia; border: dashed 6px red; margin: 0; padding: .25em">Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce.</p>
<p style="background-color: lightgray; margin: 0">Next level mcsweeney's retro iphone, +1 narwhal, craft beer mustache Austin 8-bit wolf skateboard small batch bicycle rights forage pinterest tofu cardigan. Single-origin coffee scenester umami portland fingerstache letterpress irony american apparel.</p>
<fieldset id="content_vs_container_fieldset" style="width: 60%; margin-left: auto; margin-right: auto; font-size: 80%">
<legend>Interactive Example</legend>
<code>text-align</code>:
<label><input type="radio" name="text_align" value="left" checked="checked" /> <code>left</code> (default)</label>
<label><input type="radio" name="text_align" value="right" /> <code>right</code></label>
<label><input type="radio" name="text_align" value="center" /> <code>center</code></label>
<label><input type="radio" name="text_align" value="justify" /> <code>justify</code></label>
<br/>
<code>width</code>:
<label><input type="radio" name="width" value="auto" checked="checked" /> <code>auto</code> (default)</label>
<label><input type="radio" name="width" value="50%" /> <code>50%</code></label>
<br/>
<code>margin-left</code> and <code>margin-right</code>:
<label><input type="radio" name="margins" value="0" checked="checked" /> <code>0</code> (default)</label>
<label><input type="radio" name="margins" value="50px" /> <code>50px</code></label>
<label><input type="radio" name="margins" value="auto" /> <code>auto</code></label>
<br/>
<code>float</code>:
<label><input type="radio" name="float" value="none" checked="checked" /> <code>none</code> (default)</label>
<label><input type="radio" name="float" value="left" /> <code>left</code></label>
<label><input type="radio" name="float" value="right" /> <code>right</code></label>
<script type="text/javascript">
$$('#content_vs_container_fieldset input[name="float"]').each(function(elem) {
elem.onclick = function() {
$('content_vs_container_p').style.cssFloat = this.value;
}
});
$$('#content_vs_container_fieldset input[name="width"]').each(function(elem) {
elem.onclick = function() {
$('content_vs_container_p').style.width = this.value;
}
});
$$('#content_vs_container_fieldset input[name="text_align"]').each(function(elem) {
elem.onclick = function() {
$('content_vs_container_p').style.textAlign = this.value;
}
});
$$('#content_vs_container_fieldset input[name="margins"]').each(function(elem) {
elem.onclick = function() {
$('content_vs_container_p').style.marginLeft = this.value;
$('content_vs_container_p').style.marginRight = this.value;
}
});
</script>
</fieldset>
<ul style="clear: both;">
<li>apply to the <em>containing block</em> element: <code>width</code>/<code>height</code>, <code>margin</code>, <code>padding</code>, <code>border</code> and <code>float</code></li>
<li>apply to <em>inline content inside</em> the element: <code>text-align</code></li>
<!-- <li>difference between aligning/positioning the content inside the container, and the container itself</li> -->
<!-- <li>centering…
<ul>
<li>content: <code>text-align: center</code></li>
<li>container: auto margins</li>
</ul>
</li>
<li>aligning…
<ul>
<li>content: <code>text-align: left</code>/<code>right</code></li>
<li>container: <code>float: left</code>/<code>right</code></li>
</ul>
</li> -->
</ul>
</div>
<div class="slide">
<h1>
The <code><a href="http://www.w3schools.com/css/pr_class_clear.asp">clear</a></code> property
<span class="readingsection">(4.3.2)</span>
</h1>
<p class="description">Moves this element beneath any floated content.</p>
<pre class="examplecode css">
div#sidebar { float: right; }
p { <em>clear: right;</em> }
</pre>
<div style="float: right; width: 50%">
<img src="clearancebar.jpg" src="Photo of clearance bar" style="width: 85%" />
</div>
<div style="float: left;">
<img src="images/clear.png" alt="float clear" />
</div>
</div>
<div class="slide">
<h1>Clear example</h1>
<div class="example">
<pre class="examplecode css">
p { background-color: fuchsia; }
h2 { <em>clear: right;</em> border: dashed 6px red; background-color: yellow; }
</pre>
<div class="exampleoutput insertoutput">
<p>
<img src="homestarrunner_logo.png" alt="homestar runner logo" style="float: left;" />
<img src="images/homestar_runner.png" alt="homestar runner" style="float: right" />
Homestar Runner is a Flash animated internet cartoon series. It mixes surreal humor with references to retro pop culture, notably video games, classic television, and popular music.
</p>
<h2 id="clear_property_h2">My Homestar Runner Fan Site</h2>
</div>
</div>
<fieldset id="clear_property_fieldset" style="width: 50%; text-align: center; margin-left: auto; margin-right: auto; font-size: 80%">
<legend>Interactive Example</legend>
<code>clear</code>:
<label><input type="radio" name="clear" value="none" /> <code>none</code> (default)</label>
<label><input type="radio" name="clear" value="left" /> <code>left</code></label>
<label><input type="radio" name="clear" value="right" checked="checked"/> <code>right</code></label>
<label><input type="radio" name="clear" value="both" /> <code>both</code></label>
<script type="text/javascript">
$$('#clear_property_fieldset input[name="clear"]').each(function(elem) {
elem.onclick = function() {
$('clear_property_h2').style.clear = this.value;
}
});
</script>
</fieldset>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>clear</code>
</td>
<td>
disallows floating elements from overlapping this element; <br />
can be <code>left</code>, <code>right</code>, <code>both</code>, or <code>none</code> (default)
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>
Common problem: container too short (4.3.3)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<p><img src="images/homestar_runner.png" alt="homestar runner" />
Homestar Runner is a Flash animated internet cartoon series. It mixes surreal humor with
references to retro pop culture …</p>
</pre>
<pre class="examplecode examplecode2 css">
p { border: 6px dashed red; background-color: fuchsia; }
img { float: right; }
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>
Problem: we want the <code>p</code> containing the image to extend downward so that its border encloses the entire image
</li>
</ul>
</div>
<div class="slide">
<h1>
Solution: The <code><a href="http://www.quirksmode.org/css/clearing.html">overflow</a></code> property
<span class="readingsection">(4.3.3)</span>
</h1>
<div class="example">
<pre class="examplecode css">
p { border: 6px dashed red; background-color: fuchsia;
<em>overflow: hidden;</em> }
</pre>
<div class="exampleoutput insertoutput">
<p id="overflow_property_p">
<img src="images/homestar_runner.png" alt="homestar runner" style="float: right" />
Homestar Runner is a Flash animated internet cartoon series. It mixes surreal humor with references to retro pop culture …
</p>
</div>
</div>
<fieldset id="overflow_property_fieldset" style="width: 50%; text-align: center; margin-left: auto; margin-right: auto; font-size: 80%">
<legend>Interactive Example</legend>
<code>overflow</code>:
<label><input type="radio" name="overflow" value="auto" /> <code>auto</code></label>
<label><input type="radio" name="overflow" value="hidden" checked="checked"/> <code>hidden</code></label>
<label><input type="radio" name="overflow" value="visible" /> <code>visible</code> (default)</label>
<label><input type="radio" name="overflow" value="scroll" /> <code>scroll</code></label>
<br/>
<code>height</code>:
<label><input type="radio" name="height" value="auto" checked="checked" /> <code>auto</code> (default)</label>
<label><input type="radio" name="height" value="50px" /> <code>50px</code></label>
<script type="text/javascript">
$$('#overflow_property_fieldset input[name="overflow"]').each(function(elem) {
elem.onclick = function() {
$('overflow_property_p').style.overflow = this.value;
}
});
$$('#overflow_property_fieldset input[name="height"]').each(function(elem) {
elem.onclick = function() {
$('overflow_property_p').style.height = this.value;
}
});
</script>
</fieldset>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>overflow</code>
</td>
<td>
specifies what to do if an element's content is too large; <br />
can be <code>auto</code>, <code>visible</code>, <code>hidden</code>, or <code>scroll</code>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>
Multiple floats
<span class="readingsection">(4.3.4)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<div>
<p>the first paragraph</p>
<p>the second paragraph</p>
<p>the third paragraph</p>
<p>the fourth paragraph</p>
<p>the fifth paragraph</p>
Some other text that is possibly important or maybe not well I dunno
</div>
</pre>
<pre class="examplecode css">
p { float: right; width: 20%; margin: 0.5em;
border: 2px solid black; }
div { border: 3px dotted green; overflow: hidden; }
</pre>
<style type="text/css">
#multiple-floats-example { border: 3px dotted green; overflow: hidden; }
#multiple-floats-example p { float: left; width: 20%; margin: 0.5em;
border: 2px solid black; }
</style>
<div class="exampleoutput">
<div id="multiple-floats-example">
<p>the first paragraph</p>
<p>the second paragraph</p>
<p>the third paragraph</p>
<p>the fourth paragraph</p>
<p>the fifth paragraph</p>
Some other text that is possibly important or maybe not well I dunno
</div>
</div>
<script type="text/javascript">
// $(document).observe('dom:loaded', function() {
// $('multiple-floats-select').observe('change', function() {
// alert('foo!');
// });
// $$('#multiple-floats-select option').each(function(elem) {
// // alert(elem.value);
// elem.observe('click', function(event) {
// alert('foo!');
// });
// });
// });
// $('multiple-floats-select').onchange = function(event) {
// alert('foo!');
// // $$('#multiple-floats-example p').each(function(elem) {
// // elem.style.float = event.element().value;
// // });
// };
// alert($('multiple-floats-select').onchange);
</script>
</div>
</div>
<div class="slide">
<h1>Uses of floats</h1>
<p>Floating is the most commonly-used layout technique on the web. Used for:</p>
<ul>
<li>Auto-wrapping image galleries</li>
<li>Multi-column layouts</li>
<li>Tables, figures, and images with wrap-around text</li>
</ul>
</div>
<div class="slide titleslide">
<h1>3. Web typography</h1>
<ul>
<li>
1. Element morphing
</li>
<li>
2. The <code>float</code> property
</li>
<li>
<strong>3. Web typography</strong>
</li>
</ul>
</div>
<div class="slide">
<h1>Line spacing (“leading”): <a href="http://www.w3schools.com/css/pr_pos_line-height.asp"><code>line-height</code></a></h1>
<div class="example">
<pre class="examplecode css">
p {
font-size: 18px;
<em>line-height: 3em;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p>
<a href="http://en.wikipedia.org/wiki/Lorem_ipsum" style="text-decoration: none">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Proin ut leo enim. Curabitur eleifend interdum enim, mattis dignissim lacus placerat gravida. Donec et eros et leo gravida condimentum et non lorem. Morbi velit quam, imperdiet a sodales in, laoreet in lectus. Vestibulum auctor massa sit amet metus ultricies nec vestibulum lacus adipiscing. Duis hendrerit malesuada diam ac porta.
</p>
</div>
</div>
<ul>
<li>Leading is measured from baseline to baseline.</li>
<li>The longer lines are, the more leading is required for readable text.
<ul>
<li>Rules of thumb: <code>line-height</code> ≈ <var>length of line</var> (in ems) × 5% ≈ <var>size of body font</var> (in ems) × 1.5</li>
</ul>
</li>
<li>Control line length (“measure”) by setting a width on the containing element
<ul>
<li>Good line length: ~28em (25–33 times the base font size)</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>CSS3 web fonts</h1>
<div class="example">
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100italic,700);
</style>
<pre class="examplecode css">
@font-face {
font-family: 'Josefin Sans';
font-style: italic;
font-weight: 100;
src: local('Josefin Sans Thin Italic'), local('JosefinSans-ThinItalic'),
url('http://themes.googleusercontent.com/static/fonts/josefinsans/v1/s7-P1gqRNRNn-YWdOYnAOUU4uDXlcIT8_0bdRGwoYww.woff')
format('woff');
}
h2 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 100;
font-style: italic;
}
</pre>
<div class="exampleoutput insertoutput">
<h2>Sphinx Letterpress</h2>
</div>
</div>
<ul>
<li>Browser compatibility varies; doing this safely is somewhat complicated. (Hint: use <a href="http://www.fontsquirrel.com/">FontSquirrel</a>)</li>
<li>Several web font linking services: <a href="http://typekit.com/">Typekit</a>, <a href="http://kernest.com/">Kernest</a>, <a href="http://www.google.com/webfonts">Google Web Fonts</a>, <a href="http://typotheque.com/">Typotheque</a></li>
</ul>
</div>
<!--#include virtual="../s5/commonbottom.html" -->