Click and drag to scroll left and right to view all 28 figures.
<!-- figure 14.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body, .author { text-align: center; }
p { text-align: justify; }
</style>
</head>
<body>
<h1>Text alignment</h1>
<p class="author">by James Hart</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum sem,
nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt condimentum quis sit
amet diam. Morbi sed magna odio. Nam non ultricies eros. Cras vehicula lobortis justo.
Ut congue dapibus odio, in cursus nisl consectetur quis. Aenean volutpat volutpat
vehicula. Phasellus tempor purus sed commodo posuere.</p>
</body>
</html>
<!-- figure 14.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { background-color: lightgrey; }
img.baseline { vertical-align: baseline; }
img.bottom { vertical-align: text-bottom; }
img.top { vertical-align: text-top; }
img.middle { vertical-align: middle; }
</style>
</head>
<body>
<h3>Vertical Align</h3>
<p><img class="baseline" src="images/rabbit_white.png" alt="Rabbit"
width="50" height="50">
This image is aligned using the baseline value.</p>
<p><img class="bottom" src="images/rabbit_white.png" alt="Rabbit"
width="50" height="50">
This image is aligned using the text-bottom value.</p>
<p><img class="top" src="images/rabbit_white.png" alt="Rabbit"
width="50" height="50">
This image is aligned using the text-top value.</p>
<p><img class="middle" src="images/rabbit_white.png" alt="Rabbit"
width="50" height="50">
This image is aligned using the middle value.</p>
</body>
</html>
<!-- figure 14.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
h2 { text-align: center; }
p.blocktext {
margin-left: auto;
margin-right: auto;
width: 480px;
}
</style>
</head>
<body>
<h2>Text horizontal centering</h2>
<p class="blocktext ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
rhoncus ipsum sem, nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt
condimentum quis sit amet diam. Morbi sed magna odio. Nam non ultricies eros. Cras
vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl consectetur quis.
Aenean volutpat volutpat vehicula. Phasellus tempor purus sed commodo posuere. Nam
non ultricies eros. Cras vehicula lobortis justo. Ut congue dapibus odio, in cursus
nisl consectetur quis. Aenean volutpat volutpat vehicula. Phasellus tempor purus sed
commodo posuere.</p>
</body>
</html>
<!-- figure 14.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
h2 { text-align: center; }
div {
position: absolute;
top: 50%;
padding: 20px;
transform: translateY(-50%);
}
</style>
</head>
<body>
<h2>Vertical centering</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus
ipsum sem, nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt
condimentum quis sit amet diam. Morbi sed magna odio. Nam non ultricies eros. Cras
vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl consectetur quis.
Aenean volutpat volutpat vehicula. Phasellus tempor purus sed commodo posuere. Nam
non ultricies eros. Cras vehicula lobortis justo. Ut congue dapibus odio, in cursus
nisl consectetur quis. Aenean volutpat volutpat vehicula. Phasellus tempor purus sed
commodo posuere.</div>
</body>
</html>
<!-- figure 14.9 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
h2 { text-align: center; }
div {
position: absolute;
top: 50%;
margin-left: 300px;
margin-right: 300px;
transform: translateY(-50%);
}
</style>
</head>
<body>
<h2>Vertical and horizontal centering</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus
ipsum sem, nec euismod libero porttitor eu. Nulla ut urna a ligula tincidunt
condimentum quis sit amet diam. Morbi sed magna odio. Nam non ultricies eros. Cras
vehicula lobortis justo. Ut congue dapibus odio, in cursus nisl consectetur quis.
Aenean volutpat volutpat vehicula. Phasellus tempor purus sed commodo posuere. Nam
non ultricies eros. Cras vehicula lobortis justo. Ut congue dapibus odio, in cursus
nisl consectetur quis. Aenean volutpat volutpat vehicula. Phasellus tempor purus sed
commodo posuere.</div>
</body>
</html>
<!-- figure 14.11 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.indent { text-indent: 3em; }
p.outdent { text-indent: -3em; margin-left: 3em; }
</style>
</head>
<body>
<h2>Text indent and outdent</h2>
<p>Phasellus sagittis, ipsum sed laoreet fermentum, lacus velit tincidunt lacus, ut
dignissim ipsum tellus nec mi. In neque quam, pretium vitae neque vitae, tincidunt
dignissim augue. Proin dui leo, tempus non nisl nec, maximus pulvinar lorem. Mauris
convallis ipsum ac ullamcorper venenatis. Praesent feugiat varius urna, id
convallis turpis efficitur vel. Integer et ipsum metus. Pellentesque id lectus
rutrum ante bibendum facilisis ut a neque. </p>
<p class="one">Phasellus sagittis, ipsum sed laoreet fermentum, lacus velit tincidunt
lacus, ut dignissim ipsum tellus nec mi. In neque quam, pretium vitae
neque vitae, tincidunt dignissim augue. Proin dui leo, tempus non nisl
nec, maximus pulvinar lorem. Mauris convallis ipsum ac ullamcorper
venenatis. Praesent feugiat varius urna, id convallis turpis efficitur
vel. Integer et ipsum metus. Pellentesque id lectus rutrum ante
bibendum facilisis ut a neque. </p>
<p class="one">Phasellus sagittis, ipsum sed laoreet fermentum, lacus velit tincidunt
lacus, ut dignissim ipsum tellus nec mi. In neque quam, pretium vitae
neque vitae, tincidunt dignissim augue. Proin dui leo, tempus non nisl
nec, maximus pulvinar lorem. Mauris convallis ipsum ac ullamcorper
venenatis. Praesent feugiat varius urna, id convallis turpis efficitur
vel. Integer et ipsum metus. Pellentesque id lectus rutrum ante
bibendum facilisis ut a neque. </p>
</body>
</html>
<!-- figure 14.13 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.letter04em { letter-spacing: 0.4em; }
.letter-05em { letter-spacing: -0.05em; }
.word15px { word-spacing: 15px; }
.word3em { word-spacing: 3em; }
.kerningnormal { font-kerning: normal; }
.kerningnone { font-kerning: none; }
</style>
</head>
<body>
<h3>Text Spacing</h3>
<p>This paragraph has default spacing</p>
<p class="letter04em">This paragraph has 0.4em letter-spacing</p>
<p class="letter-05em">This paragraph has -0.05em letter-spacing</p>
<p class="word15px">This paragraph has 15px word-spacing</p>
<p class="word5em">This paragraph has 5em word-spacing</p>
<p class="kerningnone">AWFULLY AVANT GARDE - normal</p>
<p class="kerningnormal">AWFULLY AVANT GARDE - none</p>
</body>
</html>
<!-- figure 14.15 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div.unit-less { line-height: 1.2; }
div.unit { line-height: 1.2em; }
</style>
</head>
<body>
<div class="unit-less">
<h2>Line-height is applied to the text in this element using unit-less values
(i.e., just numbers)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id gravida justo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Maecenas magna sapien, sodales in pretium at, semper id magna. </p>
</div>
<div class="unit-less">
<h2>Line-height is applied to the text in this element using em unit, which is a
relative unit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id gravida justo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Maecenas magna sapien, sodales in pretium at, semper id magna. </p>
</div>
</body>
</html>
<!-- figure 14.17 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
h1 { text-transform: uppercase; }
h2 { text-transform: capitalize; }
p.paragraph { text-transform: lowercase; }
</style>
</head>
<body>
<h1>text heading</h1>
<h2>text subheading</h2>
<p class="paragraph">THIS IS ALL-UPPERCASE TEXT THAT IS CONVERTED TO ALL-LOWERCASE.
</p>
</body>
</html>
<!-- figure 14.19 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.first { direction: ltr; }
.second { direction: rtl; }
.third { direction: rtl; }
.fourth { direction: ltr; unicode-bidi: bidi-override; }
</style>
</head>
<body>
<h2>Text directionality</h2>
<p>This text uses the default direction value of ltr.</p>
<p class="first">This text uses specified direction value of ltr.</p>
<p class="second">This text uses specified direction value of rtl.</p>
<p>الحياة هي سر W3C!</p>
<p class="third">الحياة هي سر W3C!</p>
<p class="fourth">This text uses specified unicode-bidi and direction value of
rtl.</p>
</body>
</html>
<!-- figure 14.21 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { margin-left: 20px; }
table { border-collapse: collapse; }
td, th { padding: 5px; border: 1px solid black; }
td { width: 70px; height: 120px; vertical-align: top; }
th { text-align: left; border-bottom: 2px solid black; }
tr.dkgrey { background-color: darkgrey; }
.horizontal-tb { writing-mode: horizontal-tb; }
.vertical-lr { writing-mode: vertical-lr; }
.vertical-rl { writing-mode: vertical-rl; }
</style>
</head>
<body>
<h2>Writing Modes</h2>
<table>
<tr class="dkgrey">
<th>Value</th>
<th>Horizontal script</th>
<th>Vertical script</th>
<th>Mixed script</th>
</tr>
<tr>
<td>horizontal-tb</td>
<td class="horizontal-tb">Introduction to Writing Modes</td>
<td class="horizontal-tb">書き込みモードの概要</td>
<td class="horizontal-tb">書き込みモード2016の概要</td>
</tr>
<tr>
<td>vertical-lr</td>
<td class="vertical-lr">Introduction to Writing Modes</td>
<td class="vertical-lr">書き込みモードの概要</td>
<td class="vertical-lr">書き込みモード2016の概要</td>
</tr>
<tr>
<td>vertical-rl</td>
<td class="vertical-rl">Introduction to Writing Modes</td>
<td class="vertical-rl">書き込みモードの概要</td>
<td class="vertical-rl">書き込みモード2016の概要</td>
</tr>
</table>
</body>
</html>
<!-- figure 14.25 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.date { writing-mode: vertical-lr; text-combine-upright: digits2; }
</style>
</head>
<body>
<h3>Text combine upright</h3>
<p class="date">日付は12月31日です</p>
</body>
</html>
<!-- figure 14.27 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.under { text-decoration: underline; }
p.through { text-decoration: line-through solid red; }
p.over { text-decoration: overline blue wavy; }
p.blink { text-decoration: blink; }
p.overunder { text-decoration: overline underline double red; }
p.none { text-decoration: none; }
</style>
</head>
<body>
<h3>Text decoration</h3>
<p>This pararaph has no decoration</p>
<p class="under">This paragraph has underline decoration</p>
<p class="through">This paragraph has line-through decoration</p>
<p class="over">This paragraph has overline decoration</p>
<p class="blink">This paragraph has blink decoration</p>
<p class="overunder">This paragraph has overline and underline decoration</p>
<p><a href="bbc.co.uk" class="none">This link has no underline decoration</a></p>
</body>
</html>
<!-- figure 14.29 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
text-decoration-line: underline;
text-decoration-skip: ink;
}
</style>
</head>
<body>
<h3>Text decoration skip</h3>
<p>In this text, the underline decoration skips all descenders.</p>
</body>
</html>
<!-- figure 14.31 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
h1 { text-decoration: underline; text-underline-position: alphabetic; }
</style>
</head>
<body>
<h1>Underlying Psychology</h1>
<p>Phasellus sagittis, ipsum sed laoreet fermentum, lacus velit tincidunt lacus,
ut...</p>
</body>
</html>
<!-- figure 14.33 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
em:lang(zh) {
font-style: normal;
-webkit-text-emphasis: dot red;
-webkit-text-emphasis-position: over;
}
</style>
</head>
<body>
<h3>Text emphasis</h3>
<p>"The Red Dragon is alive again!" in <em>Traditional Chinese</em> is:
<span lang="zh">红龙<em>是活</em>过来了!</span></p>
</body>
</html>
<!-- figure 14.35 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { font-size: 24px; }
.shadow { text-shadow: 1px 1px 2px black, 0 0 1em grey; color: black; }
</style>
</head>
<body>
<h1>Text shadow</h1>
<p class="no_shadow">em ipsum dolor sit amet, consectetur adipiscing elit. Donec in
ipsum at ex ullamcorper pharetra at at dolor. Integer gravida sollicitudin
consectetur. Etiam fringilla, ligula at tincidunt interdum, metus neque
auctor tellus, feugiat sagittis elit quam et elit. </p>
<p class="shadow">em ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum
at ex ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur.
Etiam fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit. </p>
</body>
</html>
<!-- figure 14.37 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p.button {
font-family: Arial;
font-size: 30px;
font-weight: bold;
width: 67px;
padding: 5px 40px 5px 40px;
border: none;
border-radius: 4px;
background-color: green;
color: black;
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<p class="button">Start</p>
</body>
</html>
<!-- figure 14.39 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { font-family: Times,"Times New Roman" ;}
h3 { font-family: Verdana, Arial, Helvetica, sans-serif; }
p.author { font-family: "Courier New", Courier, monospace; }
p.author::before { content: "<<"; color: red; font-weight: bold }
p.author::after { content: ">>"; color: red; font-weight: bold }
p.cap::first-line { text-transform: uppercase }
p.first::first-letter { color: red; font-size: 150%; }
p.first::-moz-selection { color: gold; background-color: red%; }
p.first::selection { color: gold; background-color: red%; }
</style>
</head>
<body>
<h3>Pseudo-elements World</h3>
<p class="author">by Wu Knows</p>
<p class="cap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="first">Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Maecenas magna sapien, sodales in pretium at, semper id magna.
In pretium placerat euismod. Vivamus quam risus, finibus id placerat vitae, maximus
ut urna. Mauris in orci arcu. Integer sed enim auctor, tempor dolor ac, auctor eros.
Etiam pharetra eleifend felis, quis rutrum dui facilisis in.</p>
</body>
</html>
<!-- figure 14.41 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
body { counter-rest: section; }
h3::before { counter-increment: section;
content: "section " counter(Section) ": "; }
.intro { quotes: "^" "^" }
.intro::before { content: open-quote; }
.intro::after { content: close-quote; }
a::before {
content: url(images/favicon.ico) " TEDCO ";
font: x-small Arial, sans-serif;
color: brown;
}
a::after { content: " (" attr(id) ")": }
</style>
</head>
<body>
<h2>The content property</h2>
<p class="quote">There is nothing fundamentally wrong with building on the
contributions of others.</p>
<h3>Introduction</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quam sapien,
bibendum in enim quis, iaculis vehicula tortor. Proin luctus dapibus eleifend. Donec
sed mollis erat, at elementum libero.</p>
<h3>Discussion</h3>
<p>Duis eget magna ut nisi sollicitudin blandit. Cras nec arcu ipsum. Curabitur
placerat nec ex vel posuere. Vivamus lacus mi, lacinia sed metus et, auctor egestas
dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h3>Conclusion</h3>
<p>Cras purus libero, feugiat ut luctus sed, aliquam in libero. Sed non aliquet
mauris. Donec pretium, mi et euismod fermentum, sem ex pharetra metus, in suscipit
massa erat at odio. </p>
<a id="That's it folks!" href="http://www.example.com">More information</a>
</body>
</html>
<!-- figure 14.43 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
a:link { color: blue; }
a:visited { purple: blue; }
a:hover { font-weight: bold; color: red; }
a:active { color: green; }
</style>
</head>
<body>
<h3>News Outlets</h3>
<div>
<p><a href="">BBC</a></p>
<p><a href="">ITV</a></p>
<p><a href="">Channel 4</a></p>
<p><a href="">Channel 5</a></p>
<p><a href="">ABC</a></p>
<p><a href="">CBS</a></p>
<p><a href="">CNN</a></p>
</div>
</body>
</html>
<!-- figure 14.45 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#extrainfo { display: none; }
#extrainfo:target { display: block; }
</style>
</head>
<body>
<h3>:target</h3>
<p><a href="#extrainfo">Extra Information</a></p>
<div id="extrainfo">
<form>
<p>Please provide additional information:<br>
<textarea rows="4" cols="5" name="info" id="info"></textarea></p>
</form>
</div>
</body>
</html>
<!-- figure 14.47 & figure 14.48 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
#window {
width: 100%;
height: 100%;
background-color: regba(0, 0, 0, 0.7);
position: fixed;
left: 0;
top: 0;
display: none;
}
.box {
width: 300px;
height: 300px;
padding: 15px 20px 0 20px;
position: relative;
top: 25%;
margin: 0 auto;
font-size: 24px;
font-weight: bold;
background-color: white;
text-align: center;
border: 1px solid black;
box-shadow: inset 0 0 1em 0.5em blue, 0 0 1em 0.5em orange;
}
.close {
text-decoration: none;
font-size: 22px;
font-weight: bold;
color: white;
background-color: orange;
border: 1px solid black;
border-radius: 50%;
width: 36px; height: 2px;
padding: 7px 1px 30px 2px;
position: absolute;
top: -16px;
left: 317px;
}
.close:hover { color: black; cursor: pointer; }
#window:target { display: block; }
</style>
</head>
<body>
<h2>Lightbox with :target</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id arcu ut nunc cursus
rutrum sit amet id eros. Nunc iaculis risus lacus, nec malesuada sapien placerat sed.
Maecenas elit urna, euismod at ipsum ut, sagittis fermentum elit. Donec blandit mi
mauris, at iaculis diam gravida sit amet. Nulla vestibulum pulvinar arcu hendrerit
molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut sit amet
magna consectetur, sagittis purus id, tincidunt velit. Donec sed nunc vel metus
consectetur vulputate. Duis semper lacinia posuere. Ut vel tristique mi. Nullam tempor
erat ac vulputate sagittis. Etiam in libero vehicula, venenatis mauris non, faucibus
enim. </p>
<p class="link"><a href="#window">Click to see a lightbox</a></p>
<p>Ut non risus vel ex tincidunt lobortis ut auctor diam. Vestibulum id leo venenatis
nisi posuere bibendum. Nulla tempor eget erat a volutpat. Maecenas at mollis neque, et
ornare risus. Nam sed orci rhoncus, posuere erat in, venenatis nibh. Sed rhoncus elit
et imperdiet semper. Integer massa eros, scelerisque ac arcu et, rhoncus blandit
metus. Nam sit amet dignissim magna. Suspendisse rhoncus porttitor erat in efficitur.
Vestibulum eget ligula sodales eros porta euismod. Curabitur suscipit nulla vitae nisi
volutpat, non sagittis justo sagittis. Nullam et accumsan enim, at aliquet massa. In
nec porttitor massa.</p>
<p>Sed at enim erat. Nulla placerat odio vel finibus pulvinar. In varius, nulla vitae
euismod pharetra, justo ipsum mattis felis, cursus imperdiet dolor quam a arcu. Ut
feugiat varius nunc, nec aliquet nunc porta id. Curabitur id rhoncus lectus, viverra
auctor tellus. In hac habitasse platea dictumst. Aenean sollicitudin augue sed aliquam
feugiat. In dolor justo, blandit id ultricies ac, finibus a diam. </p>
<p>Morbi eget dapibus erat, id pharetra purus. Quisque cursus sed metus ac hendrerit.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Phasellus vitae pretium urna, nec rutrum nulla. Phasellus non sollicitudin elit.
Curabitur id varius felis, vitae vulputate justo. Praesent eget ex non lacus vulputate
sollicitudin. Curabitur quis orci tincidunt, mollis diam et, ullamcorper nisl. Ut
dictum magna at sapien gravida, id egestas est bibendum.</p>
<div class="box">
<div class="window">
<a href="#" class="close">X</a>
<p>This is a basic example of a lightbox display.</p>
<p>This window can contain any media object type, such as image or video.</p>
<p>(Clicking the X closes it.)</p>
</div>
</div>
</body>
</html>
<!-- figure 14.51 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p { padding: 5px; }
p:not(.middle) { background-color: pink; }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum at ex
ullamcorper pharetra at at dolor. Integer gravida sollicitudin consectetur. Etiam
fringilla, ligula at tincidunt interdum, metus neque auctor tellus, feugiat
sagittis elit quam et elit.</p>
<p class="middle">Integer suscipit justo fermentum, elementum purus id, tempus diam.
Vestibulum vehicula tristique consectetur. Cras imperdiet, libero sit amet pharetra
cursus, sapien dui vehicula diam, luctus facilisis justo tellus et massa.</p>
<p>Donec et porta dolor, in sollicitudin nisi. Morbi vulputate augue ac maximus
cursus. Suspendisse bibendum, ipsum nec tincidunt gravida, velit turpis condimentum m
etus, et laoreet dui sem a ipsum. Mauris bibendum turpis a lectus euismod scelerisque.
</p>
</body>
</html>
<!-- figure 14.53 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
p {
height: 75px;
padding: 5px;
background-color: pink;
}
p:empty { background-color: grey; }
</style>
</head>
<body>
<h2>:empty</h2>
<p>Integer suscipit justo fermentum, elementum purus id, tempus diam. Vestibulum
vehicula tristique consectetur. Cras imperdiet, libero sit amet pharetra cursus,
sapien dui vehicula diam, luctus facilisis justo tellus et massa.</p>
<p><!-- This element is empty because comment is not considered content --></p>
<p><!-- This element is not empty because it contains white space --></p>
</body>
</html>
<!-- figure 14.55 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
ruby { ruby-position: under; }
</style>
</head>
<body>
<h3>Ruby text positon</h3>
<ruby>
<rb>红</rb><rb>龙</rb><rb>是</rb><rb>活</rb><rb>过</rb>
<rb>来</rb><rb>了</rb><rb>!</rb>
<rt>紅</rt><rt>龍</rt><rt>是</rt><rt>活</rt><rt>過</rt>
<rt>來</rt><rt>了</rt><rt>!</rt>
</ruby>
</body>
</html>
<!-- figure 14.57 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.start { ruby-align: start; }
.center { ruby-align: center; }
.around { ruby-align: space-around; }
.between { ruby-align: space-between; }
</style>
</head>
<body>
<h3>Ruby text alignment</h3>
<ruby class="start"><rb>World Wide Web</rb><rt>W W W</rt></ruby><br>
<ruby class="center"><rb>World Wide Web</rb><rt>W W W</rt></ruby><br>
<ruby class="around"><rb>World Wide Web</rb><rt>W W W</rt></ruby><br>
<ruby class="between"><rb>World Wide Web</rb><rt>W W W</rt></ruby>
</body>
</html>
<!-- figure 14.59 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.ruby { display: ruby; }
.rb { display: ruby-base; }
.rt { display: ruby-text; }
.rtb { display: ruby-base-container; }
.rtcc { display: ruby-text-container; }
</style>
</head>
<body>
<h3>Ruby display values</h3>
<div>
<span><span>World Wide Web</span></span>
<span><span>WWW</span></span>
</div>
<br>
<div class="ruby">
<span class="rbc"><span class="rb">World Wide Web</span></span>
<span class="rtc"><span class="rt">W W W</span></span>
</div>
</body>
</html>