Chapter 14

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>