|
|
View Full Version : Supported HTML/CSS tags and properties
Jellby 04-26-2008, 09:41 AM Hi all,
I've been playing a bit with HTML files, and converting them to mobipocket format with html2mobi. I've been disappointed by realizing that the Cybook reader (and the PC mobipocket reader) does not support many formatting instructions in HTML and CSS.
I've found this page (http://www.mobipocket.com/dev/article.asp?BaseFolder=prcgen&File=TagRef_OEB.htm), that apparently gives a list of the tags supported by the mobipocket reader, but I wonder if it's really applicable to the Cybook, and to HTML files not converted into mobipocket format. So the question is, is there any resource about which tags and properties are supported by the Cybook?
For instance, I wanted to have some space above headings (H1, H2, etc.), but it seems the Cybook won't recognize STYLE or CLASS attributes, so I'd be left with introducing empty lines, which is generally bad style. Also, can I have an horizontal rule that takes only half of the screen and is not centered? What about a paragraph or DIV with larger margins?
IceHand 04-28-2008, 04:56 AM For instance, I wanted to have some space above headings (H1, H2, etc.), but it seems the Cybook won't recognize STYLE or CLASS attributes, so I'd be left with introducing empty lines, which is generally bad style. Also, can I have an horizontal rule that takes only half of the screen and is not centered? What about a paragraph or DIV with larger margins?
No, the Cybook and Mobipocket do support style and class attributes to some extent, e.g. <h1 style="margin-top:2em;">Header</h1> works fine. How did you try to make margins?
Horizontal rules seem to be always centered, yes.
Paragraph with larger margins: <p style="margin:5%">Text</p> but for some reason this does not affect the right margin.
I don't know if there's a list of all the supported CSS attributes, I always did it with trial and error.
DaleDe 04-28-2008, 08:55 AM No, the Cybook and Mobipocket do support style and class attributes to some extent, e.g. <h1 style="margin-top:2em;">Header</h1> works fine. How did you try to make margins?
Horizontal rules seem to be always centered, yes.
Paragraph with larger margins: <p style="margin:5%">Text</p> but for some reason this does not affect the right margin.
I don't know if there's a list of all the supported CSS attributes, I always did it with trial and error.
Mobipocket has a tutorial and reference section on their site. For example:
http://www.mobipocket.com/dev/article.asp?BaseFolder=prcgen&File=TagRef_OEB.htm
defines the html stuff the format understands and shows where the Style tag works. The tutorial starts at: http://www.mobipocket.com/dev/article.asp?BaseFolder=prcgen
Dale
Jellby 05-01-2008, 04:19 AM No, the Cybook and Mobipocket do support style and class attributes to some extent, e.g. <h1 style="margin-top:2em;">Header</h1> works fine. How did you try to make margins?
Really? It doesn't seem to work for me:
<H2 ALIGN="center"><B>Header 1</B></H2>
<H3 STYLE="margin-top: 1em; page-break-after: avoid">Header 2</H3>
and still the space between both headers is minimal. I tried with padding too, no luck.
Mobipocket has a tutorial and reference section on their site. For example:
http://www.mobipocket.com/dev/article.asp?BaseFolder=prcgen&File=TagRef_OEB.htm
defines the html stuff the format understands and shows where the Style tag works. The tutorial starts at: http://www.mobipocket.com/dev/article.asp?BaseFolder=prcgen
That's the same page I gave in my first post. Yes, it gives some information, but I think it is incomplete (it says nothing about CSS, for instance).
IceHand 05-01-2008, 05:27 AM Really? It doesn't seem to work for me:
<H2 ALIGN="center"><B>Header 1</B></H2>
<H3 STYLE="margin-top: 1em; page-break-after: avoid">Header 2</H3>
and still the space between both headers is minimal. I tried with padding too, no luck.
I found the cause of your problem: html2mobi. I normally use Mobigen (http://www.mobipocket.com/dev/) to create the Mobipocket file, but I just tried html2mobi and had the same problem as you. If you're using Linux: Mobigen works fine with Wine.
DaleDe 05-01-2008, 10:48 AM Really? It doesn't seem to work for me:
<H2 ALIGN="center"><B>Header 1</B></H2>
<H3 STYLE="margin-top: 1em; page-break-after: avoid">Header 2</H3>
and still the space between both headers is minimal. I tried with padding too, no luck.
That's the same page I gave in my first post. Yes, it gives some information, but I think it is incomplete (it says nothing about CSS, for instance).
that is because CSS is not supported in mobipocket at all. many of the items normally found in CSS is supported but the word style usually is not. Mobipocket is a bit of a kludge if you look at the internals of how they do things but it is marketed well. XSL is supported in source files used to conver xml.
Dale
Jellby 05-02-2008, 10:38 AM I found the cause of your problem: html2mobi. I normally use Mobigen (http://www.mobipocket.com/dev/) to create the Mobipocket file, but I just tried html2mobi and had the same problem as you. If you're using Linux: Mobigen works fine with Wine.
I see... Well, I found that, for this particular problem, I could use:
<H1 HEIGHT="2em">Header</H1>
to have some space above the header, it also works with <DIV> and <P> elements. Could you extract the HTML code from the file generated by Mobigen, with mobi2html, for instance? Maybe Mobigen makes some changes in the code, and we could see which attributes actually work...
IceHand 05-02-2008, 11:45 AM Could you extract the HTML code from the file generated by Mobigen, with mobi2html, for instance? Maybe Mobigen makes some changes in the code, and we could see which attributes actually work...Hah, yes, you're absolutely right! The code -
<H2 ALIGN="center"><B>Header 1</B></H2>
<H3 STYLE="margin-top: 1em; page-break-after: avoid">Header 2</H3>
- will be converted to:
<h2 align="center"><b>Header 1</b></h2>
<h3 height="2em">Header 2</h3>
tompe 05-04-2008, 03:55 PM I wonder what the algorithm for these kind of conversions are? I have added a ticket to the MobiPerl trac for this so I can add some transformations sometime.
|