Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 08-11-2012, 09:05 AM   #1
ink-sniffer
Junior Member
ink-sniffer began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Aug 2012
Device: iPad
Fixed spacing in HTML/CSS without tables

hi,

I know there was a thread before asking how to do tabs for ePubs, but the answers seemed not quite satisfying to me, since I always try to avoid markup, that is not semantically correct.

I am asking this question because I currently work on an ePub which has a list with a negative indent. That means, there are 1-2 words that need to stand out introducing the text following (hope this is understandable). So the following text in the paragraph needs to be lined up without having varying spaces in the first line. I can better illustrate this with a screenshot:


So is there a better way to have the text lined up as you'd normally do with tabs than by creating a table?
InDesign uses in their ePub-export a the little character code for tabs "& #9;" (without the space in between), but this doesn't seem to work, at least in my browser (safari), and I don't know how to set up a space width for that. Another way would be the <pre> tag, but this is only acceptable for writing code since it uses fixed-lenght fonts.
On my recherche I also stumbled upon a something called the <tab>-tag, but my only source for that is this link: http://www.w3.org/MarkUp/html3/tabs.html which I think may be a little outdated and I don't know if this was ever supported in HTML let alone reading devices.

I'd love to see a better way to handle fixed spacings in CSS/HTML, that is both easy to implement in ePub workflows and also semantically happy. But I kind of gave up hope that there is a perfect solution… maybe you guys have any idea?

Last edited by ink-sniffer; 08-11-2012 at 09:07 AM.
ink-sniffer is offline   Reply With Quote
Old 08-11-2012, 09:25 AM   #2
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 2,748
Karma: 2117329
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
If the indent is equal across, you can use a negative text-indent together with a positive padding-left.
Toxaris is offline   Reply With Quote
Old 08-11-2012, 09:26 AM   #3
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,803
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
I assume you want the words right after the colons to be aligned with the lines below.

Maybe with left margin and floats... But this is a case where a table is justified if can't be satisfied with a hanging indent.
Jellby is offline   Reply With Quote
Old 08-11-2012, 09:47 AM   #4
ink-sniffer
Junior Member
ink-sniffer began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Aug 2012
Device: iPad
Thank you for the answers!

Toxaris, that is exactly what I've done here before. The problem is, that the spacing is not always equal, especially when numbers have more than one position.

Jellby, yep, that was my intention. Your answer is not quite what I hoped for, but it seems there is no other way than using tables. (I don't like floats, they always mess up things ) Maybe W3C should work on this issue for their next CSS/HTML standards…
ink-sniffer is offline   Reply With Quote
Old 08-11-2012, 10:17 AM   #5
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,803
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
If you don't want to use a real table, maybe some use of "display: table-cell" and "display: table-row" in CSS can help:

Code:
div {display: table-row}
span.one {display: table-cell; min-width: 4.5em}
span.two {display: table-cell; padding-left: 0.5em}
Code:
<div>
<span class="one">Task 1:</span>
<span class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel sem tellus. Morbi dignissim cursus neque, sed auctor tellus ultricies non.</span>
</div>

<div>
<span class="one">Task 2:</span>
<span class="two">Nunc porttitor est ac turpis fermentum sollicitudin. Cras scelerisque, arcu ut tempor venenatis, sem enim lobortis orci, a suscipit risus est ac purus.</span>
</div>

<div>
<span class="one">Task 12:</span>
<span class="two">Proin eu consequat purus. Quisque augue diam, dictum non varius eget, ultrices at turpis. Nullam a commodo ante. Nulla porttitor felis a ipsum volutpat tincidunt.</span>
</div>
at least the "table" code is only in the CSS.
Jellby is offline   Reply With Quote
Old 08-11-2012, 12:05 PM   #6
ink-sniffer
Junior Member
ink-sniffer began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Aug 2012
Device: iPad
Thanks a lot, Jellby, this solution works very well for me and I really hope that the display attribute is fully supported by most e-Readers. (it's not clearly forbidden in Accessible EPUB 3 Content Guidelines, so I think it should work) Of course, it's alot more markup than I'd like to have but for now I have to get used to it.
ink-sniffer is offline   Reply With Quote
Old 08-11-2012, 12:43 PM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,803
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
What kind of markup would you like to have? Maybe the CSS selectors can be adapted to that.
Jellby is offline   Reply With Quote
Old 08-14-2012, 04:13 AM   #8
SBT
Evangelist
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: 439
Karma: 560981
Join Date: Sep 2010
Location: Norway
Device: prs-t1, phone/Cool Reader, tablet/BlueFire, Nook Simple
This also seems to do what you want:
Code:
<style type="text/css">
div.indentlist p {
margin-left:3em;
text-indent:-3em;
}

span.label {
display:inline-block;
width:3em;
text-indent:0;}
</style>
</head>
<body>
<div class="indentlist">
<p><span class="label">One:</span>The quick brown fox jumps over the lazy dog is an example of an english sentence with all the letters of the alphabet.BTW, to get this text nicely aligned, you should not have a space after &lt;/span&gt;</p>
<p><span class="label">Two:</span>The Sahara desert contains enough sand to cover almost all of northern Africa. If you put all the salmon fished in Alaska during one season along Route 66, the stink would be simply awful.</p>
</div>
SBT is offline   Reply With Quote
Old 08-14-2012, 05:38 AM   #9
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,803
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
But "inline-block" is not a supported (required) value in the ePub spec, and you need it to apply the width (you can't to an inline element).
Jellby is offline   Reply With Quote
Old 08-14-2012, 06:37 AM   #10
mmat1
Det
mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.mmat1 ought to be getting tired of karma fortunes by now.
 
mmat1's Avatar
 
Posts: 914
Karma: 936586
Join Date: Jan 2012
Location: Zischebattem
Device: Acer Lumiread
Quote:
Originally Posted by Jellby View Post
But "inline-block" is not a supported (required) value in the ePub spec, and you need it to apply the width (you can't to an inline element).
That's right

So my solution would be:
Spoiler:

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
p { margin-left: 3em; text-indent: 0; }
.label { text-indent: -3em; float: left }
/*]]>*/
</style>
</head>

<body>
<p><span class="label">Eins:</span>Fest gemauert in der Erden<br />
Steht die Form aus Lehm gebrannt.<br />
Heute muß die Glocke werden!<br />
Frisch, Gesellen, seid zur Hand!</p>

<p><span class="label">Zwei:</span>Von der Stirne heiß<br />
Rinnen muß der Schweiß,<br />
Soll das Werk den Meister loben;<br />
Doch der Segen kommt von oben.</p>
</body>
mmat1 is offline   Reply With Quote
Old 08-17-2012, 12:19 AM   #11
democrite
Connoisseur
democrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notes
 
Posts: 67
Karma: 24566
Join Date: Sep 2011
Device: Sony PRS-T1, iPad, iPhone
I'm trying to do the same thing with wrapping text. Somehow the first line of text is further indented. Any ideas? It's for a TOC so I've also added right aligned page numbers; that works well.

edit: it displays like that in iBooks but on my Sony Reader it's pretty bad so maybe another way is needed.



Code:
.p55{margin-left:3em;text-indent:0}
.chapnum { text-indent: -3em;float: left }
.chappage { float: right }
Code:
<p class="p55"><span class="chapnum">§ 5.</span> L&rsquo;analytique ontologique du <span class="t1">Dasein </span>comme libération de l&rsquo;horizon pour une interprétation de l&rsquo;être en général <span class="chappage">[15]</span></p>

Last edited by democrite; 08-17-2012 at 12:30 AM.
democrite is offline   Reply With Quote
Old 08-17-2012, 05:01 AM   #12
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,803
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
Try including the space inside the span, like this:

Code:
5. </span>L&rsquo;analytique
Jellby is offline   Reply With Quote
Old 08-17-2012, 05:30 AM   #13
democrite
Connoisseur
democrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notes
 
Posts: 67
Karma: 24566
Join Date: Sep 2011
Device: Sony PRS-T1, iPad, iPhone
Thanks Jellby. But that doesn't seem to do it.
democrite is offline   Reply With Quote
Old 08-17-2012, 05:54 AM   #14
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 5,803
Karma: 4027751
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon
Maybe you'll have to go for something more aggressive:

Code:
.p55 { margin-left: 3em; text-indent: -3em }
.chapnum { display: block; width: 3em; float: left }
Jellby is offline   Reply With Quote
Old 08-17-2012, 06:35 AM   #15
democrite
Connoisseur
democrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notesdemocrite can name that song in three notes
 
Posts: 67
Karma: 24566
Join Date: Sep 2011
Device: Sony PRS-T1, iPad, iPhone
Thanks Jellby. That works great. I tried that with sections and it works well too. The page numbers don't align up on the right, if you have any idea. Anyway, Digital Editions (and thus readers) don't like any of this very much so maybe I do have to restort to a table.

Code:
.p6{margin-left:5em;text-indent:-5em}
.sectnum {display:block;width:5em;float:left;text-indent:-1.5em}

Last edited by democrite; 08-17-2012 at 06:38 AM.
democrite is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Fixed additional CSS to all of recipes ? Filo Recipes 3 03-05-2012 03:39 AM
Fixed additional CSS to all of recipes ? Filo Conversion 0 03-02-2012 01:49 PM
Tables in ePub: CSS virtual_ink ePub 5 02-23-2012 02:51 PM
Fixed Layout Sample ".mobi" file with package(html, css, opf, ncx files). Sushil Kindle Fire 1 01-13-2012 07:16 AM
The Kindle supports html tables? zwandy Amazon Kindle 12 10-01-2010 09:52 AM


All times are GMT -4. The time now is 09:46 AM.


MobileRead.com is a privately owned, operated and funded community.