Fixed spacing in HTML/CSS without tables

ink-sniffer · 08-11-2012, 10:05 AM

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?

Toxaris · 08-11-2012, 10:25 AM

If the indent is equal across, you can use a negative text-indent together with a positive padding-left.

Jellby · 08-11-2012, 10:26 AM

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.

ink-sniffer · 08-11-2012, 10:47 AM

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…

Jellby · 08-11-2012, 11:17 AM

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.

ink-sniffer · 08-11-2012, 01:05 PM

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.

Jellby · 08-11-2012, 01:43 PM

What kind of markup would you like to have? Maybe the CSS selectors can be adapted to that.

SBT · 08-14-2012, 05:13 AM

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>

Jellby · 08-14-2012, 06:38 AM

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).

mmat1 · 08-14-2012, 07:37 AM

Quote:

Originally Posted by Jellby

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:

democrite · 08-17-2012, 01:19 AM

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>

Jellby · 08-17-2012, 06:01 AM

Try including the space inside the span, like this:

Code:

5. </span>L&rsquo;analytique

democrite · 08-17-2012, 06:30 AM

Thanks Jellby. But that doesn't seem to do it.

Jellby · 08-17-2012, 06:54 AM

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 }

democrite · 08-17-2012, 07:35 AM

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}

08-11-2012, 10:05 AM	#1
ink-sniffer Junior Member 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 10:07 AM.

08-17-2012, 01:19 AM	#11
democrite Evangelist Posts: 440 Karma: 77256 Join Date: Sep 2011 Device: none	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’analytique ontologique du <span class="t1">Dasein </span>comme libération de l’horizon pour une interprétation de l’être en général <span class="chappage">[15]</span></p> Last edited by democrite; 08-17-2012 at 01:30 AM.

08-17-2012, 06:01 AM	#12
Jellby frumious Bandersnatch Posts: 7,540 Karma: 19001081 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Try including the space inside the span, like this: Code: 5. </span>L’analytique

08-17-2012, 06:54 AM	#14
Jellby frumious Bandersnatch Posts: 7,540 Karma: 19001081 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	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 }

08-17-2012, 07:35 AM	#15
democrite Evangelist Posts: 440 Karma: 77256 Join Date: Sep 2011 Device: none	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 07:38 AM.

08-11-2012, 10:25 AM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	If the indent is equal across, you can use a negative text-indent together with a positive padding-left.

08-11-2012, 10:26 AM	#3
Jellby frumious Bandersnatch Posts: 7,540 Karma: 19001081 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	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.

08-11-2012, 10:47 AM	#4
ink-sniffer Junior Member 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…

08-11-2012, 01:05 PM	#6
ink-sniffer Junior Member 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.

08-11-2012, 01:43 PM	#7
Jellby frumious Bandersnatch Posts: 7,540 Karma: 19001081 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	What kind of markup would you like to have? Maybe the CSS selectors can be adapted to that.

08-14-2012, 06:38 AM	#9
Jellby frumious Bandersnatch Posts: 7,540 Karma: 19001081 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	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).

08-17-2012, 06:30 AM	#13
democrite Evangelist Posts: 440 Karma: 77256 Join Date: Sep 2011 Device: none	Thanks Jellby. But that doesn't seem to do it.

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

Advert

Advert