Quote:
Originally Posted by Jellby
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
<title>Testdoc</title>
<style type="text/css">
div.poetry {
margin: 1em 0 1em 2em;
}
div.poetry div.line {
margin: 0;
padding-left: 3em;
text-indent: -3em;
text-align: left;
}
div.poetry div.line:before{
background-color: white;
content: " ";
position: relative;
z-index: -1;
float: left;
width: 4em;
margin-left: -4em;
}
div.poetry span.word:after {
content: "[";
position: relative;
z-index: -2;
float: left;
width: 0;
margin-left: 2.5em;
margin-right: -2.5em;
}
</style>
</head>
<body>
<div class="poetry">
<div class="line"><span class="word">Lorem </span><span class="word">ipsum </span><span class="word">dolor </span><span class="word">sit </span><span class="word">amet, </span><span class="word">consectetur </span><span class="word">adipiscing </span><span class="word">elit.</span></div>
<div class="line"><span class="word">In </span><span class="word">sit </span><span class="word">amet </span><span class="word">orci </span><span class="word">eros.</span></div>
</div>
</body>
</html>
It will not work with ADE, and it's not 100% ePub compliant:
- ADE does not support :before and :after pseudo-elements.
- I'd bet ADE does not support z-index either, which is not a required ePub 2.0.1 property.
It's anyway an ugly and unsatisfactory solution:
|
It's a very nice and elegant solution. We can't get everything and what we can get with your solution is enough for me (and yours is another reason to choose non ADE-based readers
).