Thread: Poetry
View Single Post
Old 02-11-2014, 10:37 AM   #8
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
Quote:
Originally Posted by SBT View Post
Just curious... would it be possible in HTML5/CSS3?
Have to answer my own question, apparently...
This code actually seems to do the trick – in chrome anyway. And only CSS2!

But definitely not according to EPUB2-spec.

Spoiler:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<style>
div.strophe div.strophe2 {
background-color:white;
overflow:hidden;
height:1.3em;
line-height:1.4em;
position:absolute;
z-index:3;
top:0;
text-align:left;
width:100%;
padding-right:0%;
margin-left:-1em;
padding-right:1em
}
div.strophe {
text-align:right;
position:relative;
z-index:2;
}
div.poem {position:relative;width:160px;border-style:dotted;padding:5px;padding-left:1.1em; }
</style>
</head>
<body>
<h2>The Hunting of the Snark</h2>
<div class="poem">
<div class="strophe">"Just the place for a Snark!" the Bellman cried,<div class="strophe2">"Just the place for a Snark!" the Bellman cried,</div></div>
<div class="strophe">As he landed his crew with care;<div class="strophe2">As he landed his crew with care;</div></div>
<div class="strophe">Supporting each man on the top of the tide<div class="strophe2">Supporting each man on the top of the tide</div></div>
<div class="strophe">By a finger entwined in his hair.<div class="strophe2">By a finger entwined in his hair.</div></div>
</div>
</body>
</html>
Attached Thumbnails
Click image for larger version Name: poetry.png Views: 438 Size: 20.4 KB ID: 119051  
Last edited by SBT; 02-13-2014 at 07:24 PM. Reason: Fixed error causing words to disappear
SBT is offline   Reply With Quote