WARNING! Do not try this at home! Keep out of the reach of children!
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:
- The wrapped part of the line is still not right-aligned, but indented a fixed amount.
- It only works with some specified background: white here, needed to hide the bracket in the first part of the line.
- It requires wrapping every word (or every allowed break point) in a <span>.
- It can still fail in some cases.