View Full Version : Fixed spacing in HTML/CSS without tables


ink-sniffer
08-11-2012, 09: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:
http://www.designhofmann.de/userdata/tab_problem.png

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? :bookworm:

Toxaris
08-11-2012, 09: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, 09: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, 09: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 :D) Maybe W3C should work on this issue for their next CSS/HTML standards…

Jellby
08-11-2012, 10: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:

div {display: table-row}
span.one {display: table-cell; min-width: 4.5em}
span.two {display: table-cell; padding-left: 0.5em}

<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, 12: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 (http://matt.garrish.ca/epub3/compendium/), 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, 12:43 PM
What kind of markup would you like to have? Maybe the CSS selectors can be adapted to that.

SBT
08-14-2012, 04:13 AM
This also seems to do what you want:
<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, 05: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, 06:37 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).

That's right

So my solution would be:

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

democrite
08-17-2012, 12: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.

http://img850.imageshack.us/img850/8683/heideggercss.png

.p55{margin-left:3em;text-indent:0}
.chapnum { text-indent: -3em;float: left }
.chappage { float: right }

<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, 05:01 AM
Try including the space inside the span, like this:

5. </span>L&rsquo;analytique

democrite
08-17-2012, 05:30 AM
Thanks Jellby. But that doesn't seem to do it.

Jellby
08-17-2012, 05:54 AM
Maybe you'll have to go for something more aggressive:

.p55 { margin-left: 3em; text-indent: -3em }
.chapnum { display: block; width: 3em; float: left }

democrite
08-17-2012, 06: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.

.p6{margin-left:5em;text-indent:-5em}
.sectnum {display:block;width:5em;float:left;text-indent:-1.5em}
http://img819.imageshack.us/img819/9263/heideggercss2.png

mmat1
08-17-2012, 01:00 PM
Anyway, Digital Editions (and thus readers) don't like any of this very much so maybe I do have to restort to a table.


I'm sorry, but i made a mistake with my suggestion.

It should read:
.label { margin-left: -3em; float: left }
This should work with multiline.

Concerning your right aligned numbers to the right:
.lineno { float: right; text-align: right; }

democrite
08-17-2012, 06:36 PM
Thanks mmat1. ADE likes that much better. Though the page numbers still don't work too well. Not as much of a big deal. It's possible having them in a separate floating paragraph might work but I haven't tried that yet.

doubleshuffle
04-02-2014, 09:45 AM
OK, I'm probably insane, but I'd still like to know if there is any reasonable to way to get something like this (see attached pic) in epub. It's Coleridge's Rime of the Ancient Mariner, and it has got all those little sidenotes on the left that explain what's going on for those who can't be bothered to read the poem proper. Anyway, it looks very neat on the printed page.

The problem with coding it in epub is the varying length of those sidenotes. Some of them run for longer than a stanza, others are shorter.

In the earlier posts in this thread I have found two basic patterns for coding something like this, let's call them the float- and the table-approach. I've tried both, and have run into different kinds of problems with both:

- using the float-approach, it is impossible to get a regular straight left edge of the poem proper; lines will start too far to the left when the left-floating span is short, or too far to the right when it is long and gets close to the next one. I fiddled with inserted line breaks to adjust the length of the span, but the effect of course breaks down immediately if you change the font-size.

- the table approach (or the "fake table" Jellby suggested in post #5) works beautifully regarding the edges, but I have to start a new table with each new sidenote (or in the end for each stanza probably), and ADE starts a new page after each one, which of course I don't want. So it would solve all my problems if there was a way to tell ADE not to do that.

I know there are some real experts here - can it be done?

DaleDe
04-02-2014, 12:52 PM
Does ADE always start a new page, or only when the next table will not fit on the current page? If the latter then simply make smaller tables.

what does you code look like for the first solution?

Dale

mmat1
04-02-2014, 01:04 PM
OK, I'm probably insane, but I'd still like to know if there is any reasonable to way to get something like this (see attached pic) in epub. It's Coleridge's Rime of the Ancient Mariner, and it has got all those little sidenotes on the left that explain what's going on for those who can't be bothered to read the poem proper. Anyway, it looks very neat on the printed page.

The problem with coding it in epub is the varying length of those sidenotes. Some of them run for longer than a stanza, others are shorter.

In the earlier posts in this thread I have found two basic patterns for coding something like this, let's call them the float- and the table-approach. I've tried both, and have run into different kinds of problems with both:

- using the float-approach, it is impossible to get a regular straight left edge of the poem proper; lines will start too far to the left when the left-floating span is short, or too far to the right when it is long and gets close to the next one. I fiddled with inserted line breaks to adjust the length of the span, but the effect of course breaks down immediately if you change the font-size.

- the table approach (or the "fake table" Jellby suggested in post #5) works beautifully regarding the edges, but I have to start a new table with each new sidenote (or in the end for each stanza probably), and ADE starts a new page after each one, which of course I don't want. So it would solve all my problems if there was a way to tell ADE not to do that.

I know there are some real experts here - can it be done?

You might try Pynch's method used in Joyce, Finnigans Wake Chapter 3

RbnJrg
04-02-2014, 01:57 PM
OK, I'm probably insane, but I'd still like to know if there is any reasonable to way to get something like this (see attached pic) in epub. It's Coleridge's Rime of the Ancient Mariner, and it has got all those little sidenotes on the left that explain what's going on for those who can't be bothered to read the poem proper. Anyway, it looks very neat on the printed page.

The problem with coding it in epub is the varying length of those sidenotes. Some of them run for longer than a stanza, others are shorter.

In the earlier posts in this thread I have found two basic patterns for coding something like this, let's call them the float- and the table-approach. I've tried both, and have run into different kinds of problems with both:

- using the float-approach, it is impossible to get a regular straight left edge of the poem proper; lines will start too far to the left when the left-floating span is short, or too far to the right when it is long and gets close to the next one. I fiddled with inserted line breaks to adjust the length of the span, but the effect of course breaks down immediately if you change the font-size.

- the table approach (or the "fake table" Jellby suggested in post #5) works beautifully regarding the edges, but I have to start a new table with each new sidenote (or in the end for each stanza probably), and ADE starts a new page after each one, which of course I don't want. So it would solve all my problems if there was a way to tell ADE not to do that.

I know there are some real experts here - can it be done?

I think a two columns layout could solve your issues. And it works in ADE (except ADE 2.0), iPad and with the modern Kindle devices (those who support the .kf8 format, since you can't use this technique with K1 and K2).

In your .css stylesheet write the following:


h1 {
clear: both;
font-size: 1.4em;
font-family: sans-serif;
margin: 0;
padding: 1em 0;
text-align: center;
}

p {
font-size: 1em;
text-align: left;
font-family: serif;
margin: 0;
padding-bottom: 1em;
}

.col1 {
clear: both;
float: left;
width: 20%; /* of course, you can change the width here */
}

.col2 {
float: left;
width: 80%; /* of course, you can change the width here */
}

div.col1 p {
margin-left:0;
margin-right: 0.75em;
font-size: 0.8em;
font-style: italic;
}

div.col2 p {
margin-left: 0.75em;
margin-right: 0;
}


And in your .html file write something like:


<body>
<h1>PART THE FIRST</h1>

<div class="col1">
<p>This is the first side note, in this case a short one.</p>
</div>

<div class="col2">
<p>It is an ancient Mariner,<br />
And he stoppeth one of three.<br />
“By thy long grey beard and glittering eye,<br />
Now wherefore stopp'st thou me?</p>

<p>“The Bridegroom's doors are opened wide,<br />
And I am next of kin;<br />
The guests are met, the feast is set:<br />
May'st hear the merry din.”</p>
</div>

<div class="col1">
<p>This is the second side note; this is a larger side note than the first one and in this case also larger than one stanza.</p>
</div>

<div class="col2">
<p>He holds him with his skinny hand,<br />
“There was a ship,” quoth he.<br />
“Hold off! unhand me, grey-beard loon!”<br />
Eftsoons his hand dropt he.</p>

<p>He holds him with his glittering eye—<br />
The Wedding-Guest stood still,<br />
And listens like a three years child:<br />
The Mariner hath his will.</p>
</div>
</body>


This is how it looks in Sigil:

121158

And this is how the epub looks in ADE:

121156

You must enclose your side notes in a <div class="col1"> tag and your stanzas in a <div class="col2">. That's all. Below you can see the respective .epub and you'll be able to understand better what I want to say :)

Regards
Rubén

Jellby
04-02-2014, 02:57 PM
- using the float-approach, it is impossible to get a regular straight left edge of the poem proper; lines will start too far to the left when the left-floating span is short, or too far to the right when it is long and gets close to the next one.

Isn't that fixed by setting a width for the float? I think that's basically what Rubén's solution boils down to.

doubleshuffle
04-02-2014, 03:44 PM
Wow, thanks guys for all the suggestions. I'll fiddle on a bit and report the results.

And I DID set a width for the float, Jellby; fully expected it to work, but it didn't. I only floated the sidenotes, though, not the body of the poem.

Jellby
04-02-2014, 03:56 PM
And I DID set a width for the float, Jellby; fully expected it to work, but it didn't. I only floated the sidenotes, though, not the body of the poem.

Did you set them as <div>s or as <span>s? If I remember correctly, inline elements (<span>s by default) don't take a width.

doubleshuffle
04-02-2014, 04:06 PM
Did you set them as <div>s or as <span>s?

Tried both. Neither worked. Ruben's solution seems to work nicely. I'll test the other suggestions (Dale's shorter - which would mean single stanza - tables, and whatever Pynch did in Finnegans Wake) an report back; not tonight though...

pynch
04-03-2014, 03:08 AM
The thing that did the trick for the Wake chapter is easy to miss in the css: I gave the body a left margin, and then set the left margin of the floating span to the negative value of that.