View Full Version : Line indents using "<div>" tags


HarryT
04-26-2009, 10:56 AM
Book Designer, my preferred tool for creating books, produces HTML that uses <div> rather than <p> to define paragraphs.

I know that there are Mobi-specific parameters that one can add to a <p> tag to define the indentation of the line, but is there any equivalent (eg inline CSS) that can be used to achieve the same thing with a <div> tag?

My aim here is to be able to specify additional indentation for specific lines of poetry.

Thanks!

Nate the great
04-26-2009, 11:45 AM
Here are 2 examples of the div tag that I got from Mobipocket. The style attribute works even though it's not listed as supported attribute.

<div style="border: 1px solid black; background-color: gray;"> </div>
<div align="center" bgcolor="#FFEBD6"> </div>

Here is a link to info on the div tag (not all will work in Mobipocket):
http://www.w3schools.com/tags/tag_DIV.asp

I think it might be best to put each line of poetry in its own set of tags. If you need more indentation, I would recommend using &nbsp; (the non breaking space character). This will adjust better when changing the font size.

JSWolf
04-26-2009, 11:54 AM
Create the CSS and use <div class="classname">text</div>

Nate the great
04-26-2009, 12:01 PM
I'd also recommend that you not try anything too complicated. Tag support is hit or miss in Mobipocket-particularly the older versions.

I'd be willing to test it for you if you want.

JSWolf
04-26-2009, 12:05 PM
I'd also recommend that you not try anything too complicated. Tag support is hit or miss in Mobipocket-particularly the older versions.

I'd be willing to test it for you if you want.
Mobipocket Creator (publisher edition) will convert the CSS and tags into it's normal mess.

Nate the great
04-26-2009, 12:07 PM
Mobipocket Creator (publisher edition) will convert the CSS and tags into it's normal mess.

I meant to say Mobipocket Reader. Thanks for catching it.

Jellby
04-26-2009, 12:38 PM
I know that there are Mobi-specific parameters that one can add to a <p> tag to define the indentation of the line, but is there any equivalent (eg inline CSS) that can be used to achieve the same thing with a <div> tag?

Doesn't width="2em" work with <div> as well as with <p>? I know the "height" attribute for vertical spacing works with <div>, <blockquote>, <hX>, etc. (Note this is not standard HTML, but specific mobipocket code).

Personally, I use <p> for poetry lines (as for normal paragraphs). For each line I have <p height="0em" width="2em">, and I change the 0 and 2 if needed.

HarryT
04-27-2009, 02:26 AM
Thanks to all for the suggestions.

Presumably it would be best to use an "em" spacing, since this should scale with the font size, whereas "px" or "pt" won't?

I'll do some experiments and see what works best.

HarryT
04-27-2009, 03:07 AM
Using <div width="1em"> works beautifully! Thanks very much for the assistance.

Jellby
04-27-2009, 05:59 AM
My pleasure. Now you can get rid of all the &nbsp; for indents ;)

nrapallo
04-29-2009, 10:10 PM
My pleasure. Now you can get rid of all the &nbsp; for indents ;)

Oh, that's just a BD affliction... :rolleyes:

JSWolf
04-29-2009, 10:18 PM
The eBook I converted to ePub today uses a hanging indent and it works very well.

.calibre_class_17 {
margin-top: 0%;
text-indent: -3%;
margin-left: 3%
}