html formatting question

[Nate the great]

The ebook I'm working on right now was written in 1996. The formatting is so horrendously awful that it's beyond description.

Fortunately the bad html has presented me with an opportunity. From what I can tell only tag used is the opening <p> tag, not div, span. There are no </p> tags. This means that I can replace the tag with whatever I want and not mess up the formatting.

What tag should I use, div, p, span, or some combination of the above? I will be using classes, of course.

[nrapallo]

The <p> alone is not a bad thing....

MobiPerl code strips all ending </p>'s when converting from .mobi to .html. I see the same thing when my Mobi2IMP program converts .mobi/.prc to .imp as the intermediary .html is left exploded with images.

For example, here is just the .html file (without images) extracted from my Moonport.prc and notice that it is ONE .html as well!!!

I know calibre adds </p> to .html files that get converted to .epub so as to comply with XHTML 1.1 Strict (every tag needs a terrminator tag). So perhaps feed it to calibre and take the resulting (x)html. You can even tell calibre to not-split the files based on page-breaks and/or 300K chunk size!

Can you give a sample of that BAD code?

[Nate the great]

That's all well and good, but I'd really prefer for the pages to leave my hand somewhat closer to xhtml compliant.

[HarryT]

One thing to consider is that, for a Mobi book, using "<p>" leaves a small gap between the paragraphs, whereas using "<div>" does not.

[AlexBell]

Originally Posted by HarryT

One thing to consider is that, for a Mobi book, using "<p>" leaves a small gap between the paragraphs, whereas using "<div>" does not.

I'm certainly not an HTML/CSS expert, but I think you'll find that the differences between <div> and <p> go much further than that. From memory, since I don't have the time at the moment to check my favourite book 'HTML, XHTML, & CSS' by Elizabeth Castro
- <div></div> is used for divisions of the document (hence the name)
- <p></p> is used for paragraphs (hence the name) which are usually much smaller sections - one can have many paragraphs within a division.
Both div and p are block level elements, so that the display starts a new line after the closing tag. They can be set to be inline if necessary by display :inline;
- <span></span> is used for smaller sections - eg when one wants to put one word of an sentence in italics. Span is an inline element and does not cause a new line after the closing </span>.

Could I suggest, Harry, that if you don't want a blank line between paragraphs that is better to have something like p {margin: 0;} in your CSS than to use divs? I think your advice would make a website designer sneer.

I know that we are designing ebooks, not websites. But I'd rather make the HTML I use compliant to W3C standards than use the horrible mish-mash which is Mobipocket so that in the future, when ePub is still more highly accepted, my ebooks will still look good.

Regards, Alex

[Terisa de morgan]

If you want to make paragraphs, I think the right thing is <p>. <span>can be used for some special characteristics, not in general, as I've seen. And <div>, well, I think you can do it very well without them. I you use <p> and <h?> for chapters, you can obtain quite a good format and, with css, you can change all the characteristics you want for these tags (I've done it and works quite nicely).

I don't know about MOBI/ePub formats difference but with very simple tags you can make a very good e-book.

[zelda_pinwheel]

Originally Posted by AlexBell

I'm certainly not an HTML/CSS expert, but I think you'll find that the differences between <div> and <p> go much further than that. From memory, since I don't have the time at the moment to check my favourite book 'HTML, XHTML, & CSS' by Elizabeth Castro
- <div></div> is used for divisions of the document (hence the name)
- <p></p> is used for paragraphs (hence the name) which are usually much smaller sections - one can have many paragraphs within a division.
Both div and p are block level elements, so that the display starts a new line after the closing tag. They can be set to be inline if necessary by display :inline;
- <span></span> is used for smaller sections - eg when one wants to put one word of an sentence in italics. Span is an inline element and does not cause a new line after the closing </span>.

Could I suggest, Harry, that if you don't want a blank line between paragraphs that is better to have something like p {margin: 0;} in your CSS than to use divs? I think your advice would make a website designer sneer.

I know that we are designing ebooks, not websites. But I'd rather make the HTML I use compliant to W3C standards than use the horrible mish-mash which is Mobipocket so that in the future, when ePub is still more highly accepted, my ebooks will still look good.

Regards, Alex

Alex is absolutely right. you should always use semantically appropriate html markup, this means using the p (or "paragraph") tag for paragraphs, the h (or "heading") tags for chapter / book headings (titles), and "span" elements for short inline text styling. that's what it's for. if you don't want any space between your paragraphs, simply define that in the css. speaking as a web designer (and fully understanding that an ebook is not a website, but it is nonetheless the same code), i implore you, don't monkey around with invalid markup just because at first glance it seems to give the effect you're looking for. there is plenty of info to be found about html / css markup on the web, starting with the obvious place which would be the Webstandards Consortium or W3C. here are the start pages for their sections about css and html. plenty more info can be found via a quick google search, or even here.

[zelda_pinwheel]

oh, one last thing, all tags which are opened : <p> must be closed also : </p>. this is true for p, div, span, h, etc. the only "sort of" exceptions are the "self-closing" tags in xhtml such as : <br /> or <img /> ; these have their closing tags combined into the opening tags.

[Jellby]

For normal paragraphs, use <p></p>. Mobipocket displays them indented and with a little vertical space, but that should be customizable in the viewer (even if often it is not). It can be overriden, anyway, with (in mobipocket pseudo-HTML) <p width=0 height=0>.

Use <div></div> for other blocks, such as epitaphs or newspaper titles displayed in the text.

In XHTML (and maybe in HTML, I don't know), <p> elements cannot contain other block elements (like <p>, <div>, <blockquote>), but <div> can.

[HarryT]

Originally Posted by AlexBell

Could I suggest, Harry, that if you don't want a blank line between paragraphs that is better to have something like p {margin: 0;} in your CSS than to use divs? I think your advice would make a website designer sneer.

Oh, I have no particular preference for using <div> rather than <p>. It's just that that's what my favourite book creation tool, Book Designer, produces.

[AlexBell]

Originally Posted by zelda_pinwheel

you should always use semantically appropriate html markup

Thanks, Zelda. One of the problems of course, especially with Mobipocket, is some ebook formats simply don't recognise valid HTML.

For example Mobipocket does not recognise margin-left, margin-right, or margin: auto. I have been trying for days to workout the HTML/CSS which will enable me to have a TOC list centered on a page but with the items of the list left aligned. It's a trivial design problem for a web browser, but I don't know how to do it for an ebook.

I appreciate you giving the references for W3C HTML and CSS; can you point me to a site or sites which discusses valid HTML/CSS for ebooks? The people who post on the c.i.w.a.h. usenet group have been helpful, but I'm sure they are not impressed by the limitations of ebook formats.

Regards, Alex

[zelda_pinwheel]

Originally Posted by AlexBell

Thanks, Zelda. One of the problems of course, especially with Mobipocket, is some ebook formats simply don't recognise valid HTML.

For example Mobipocket does not recognise margin-left, margin-right, or margin: auto. I have been trying for days to workout the HTML/CSS which will enable me to have a TOC list centered on a page but with the items of the list left aligned. It's a trivial design problem for a web browser, but I don't know how to do it for an ebook.

I appreciate you giving the references for W3C HTML and CSS; can you point me to a site or sites which discusses valid HTML/CSS for ebooks? The people who post on the c.i.w.a.h. usenet group have been helpful, but I'm sure they are not impressed by the limitations of ebook formats.

Regards, Alex

thus my preference for epub.

more seriously, if you want to learn about epub there are a whole host of sites which can help you, starting with idpf of course (International digital publishing forum, epub equivalent of w3c). there are also good tutorials to be found ; this one was very helpful to me : http://www.hxa.name/articles/content...7241_2007.html
here's another one : http://www.epubbooks.com/blog/200809...epub-document/
and here's one from teleread : http://www.teleread.org/2007/10/31/e...epub-creation/
but a quick google will turn up plenty more.

don't forget about the epub forum here ; i am constantly amazed and impressed by the mad skillz of various forum members and i am pretty sure that you'll get an answer to any question you can come up with.

i can't help you personally with mobipocket ; i abhor nonstandard code and my very first experiments with mobipocket (long before i realised just how nonstandard it is...) were disappointing enough to make me lose all interest in pursuing the matter. you can see the results in these photos : https://www.mobileread.com/forums/sho...d.php?p=214111
my goodness that was a long time ago. i wasn't even thinking much about epub yet, apparently. however, just as with epub, i am sure there are lots of people here who can help you with mobipocket ; don't hesitate to post your questions ! i think you'll find they're generally stunningly patient.

[Jellby]

My advice with mobipocket is just forget about standard HTML and what the "mobipocket creator" understands or not. Instead, use only the particular flavour of HTML used by mobipocket. Don't try to control every aspect of formatting, you can only change alignment, indent and top spacing (and font size and style, blockquotes... little else).

[AlexBell]

Thanks, Zelda. That's very useful information.

I'll be changing to epub myself as soon as Bookeen releases the new firmware and I get my first Cybook back from them.

Regards, Alex

[Nate the great]

Originally Posted by Jellby

My advice with mobipocket is just forget about standard HTML and what the "mobipocket creator" understands or not. Instead, use only the particular flavour of HTML used by mobipocket. Don't try to control every aspect of formatting, you can only change alignment, indent and top spacing (and font size and style, blockquotes... little else).

But MobiCreator will recognize and properly use the correct html for the above. Why not use it, and avoid the crap that Mobipocket suggests?