View Full Version : html elements in epub


kamwoj
02-09-2012, 04:27 PM
I have some ebooks in html and I am trying to adjust them to convert into epub files using Calibre. I am using FBreader on my Android device and there is a list of text styles in settings.
For now I found out how to reach these elements:

<h1> - header 1
<h2> - header 2
<h3> - header 3
<h4> - header 4
<h5> - header 5
<h6> - header 6
<p> - regular paragraph
<i> - italic
<b> - bold
<strong> - strong

(it was quite easy) but still I don't know how to obtain:

Title,
Section title,
Subtitle,
Annotation,
Epigrapf,
Author,
Poem title,
Stanza,
Verse,
Cite,
Footnote,
Emphasis,
Definition,
Definition description,
Preformated text,
Code.

Do I have to use ID or class?

I would be greatful for your help.

Toxaris
02-10-2012, 02:58 AM
You have a mixture of metadata and structure data, but when I read the whole post I think you mean it all as structure.

I would advise you to look at some tutorials regarding HTML and CSS. Some of the things you request are there (emphasis --> <em>), but for the others no classes exist. You must use existing structure and use CSS to format them.

kamwoj
02-10-2012, 03:31 AM
I really don't need to read tutorials. I just can't found out how to format html to be recognize correctly after conversion to the epub file. For example for "code" I have tried:

<style>
p.code {margin-left:5%}
</style>

<p class="code"></p>

or

<p id="code"></p>

It doesn't work, so that is why I am asking you for help.

Toxaris
02-10-2012, 07:47 AM
<p class="code"> will work if it is specified correctly in a (preferred) external or internal stylesheet. <p id="code"> will of course not work as you know.

The example you give, <p id="code">, strengthens my advice to read some tutorials regarding HTML/CSS.

kamwoj
02-10-2012, 07:55 AM
For now my books have such a structure:
<html>
<head>
<title>Author - Book's Title</title>
<meta name="charset" value="utf-8" />
</head>

<style>
<!--
p.dedication {margin-left:60%; font-style:italic; margin-top:10%;}
p.motto {text-align:justify; font-style:italic; margin-left:10%; margin-right:10%; margin-top:10%;}
h1.act {text-align:center; margin-top:10%; margin-bottom:5%;}
p.act_title {text-align:center; font-weight:bold; margin-bottom:5%;}
h2.chapter {text-align:center; margin-top:10%; margin-bottom:5%;}
p.chapters_title {text-align: center; font-weight:bold;margin-bottom:5%;}
p.localization {margin-left: 10%; margin-right: 40%; margin-top:9%; margin-bottom:3%; font-style:italic; font-weight:bold;}
p.text {text-align:justify;}
p.quote {margin-left:10%; margin-right: 10%; font-style:italic;}
p.image {text-align:center;}
img {max-width: 90%; max-height: 90%;}
-->
</style>

<body>
<p class="dedication">Dedication</p>
<p class="motto">Motto</p>
<h1 class="act">Prologue</h1>
<h1 class="act">Act</h1>
<p class="act_title">Act's title</p>
<h2 class="chapter">Chapter</h2>
<p class="chapters_title">Chapter's Title</p>
<p class="localization">Time, <br>Localization etc.</p>
<p class="text">
Chapter's body
<p class="quote">
Quote inside text
</p>
Chapter's body
<p class="image"><img src="image.jpg"></p>
Chapter's body
</p>
<h1 class="act">Epilogue</h1>
</body>
</html>

On web browser it looks exactly like I want. But after conversion to the epub only h1 - h6 are recognized.

Toxaris
02-10-2012, 02:24 PM
It must be the conversion in Calibre, because when I paste the code in Sigil and change it to xhtml it works fine.

I would still recommend an external stylesheet though....

kamwoj
02-10-2012, 06:27 PM
The problem is on the side of Android applications.
- FBreader has own configuration for styles, so internal ones are ignored and I don't know what to do to use FBreader's styles with my files.
- Cool Reader shows images in wrong way (they are not centered and are smaller then it has to be)
- Moon+ Reader is full of bugs, so I don't wanna use it.

I will work about it.

Toxaris
02-11-2012, 02:57 AM
Some readers act differently. FBreader does support stylesheets. I haven't checked Cool reader yet with regards to images. Aldiko is alright, most of the time.

kamwoj
02-11-2012, 05:43 AM
Ok. I have opened exemplary *.fb2 in Notepad++ and now I know to create fb2 file whch is fully supported by FBreader. The code looks like html, but it has its own tags. For example:

<description></description>
<author><first-name></first-name><last-name></last-name></author>
<title></title>
<code></code>
<subtitle></subtitle>
<empty-line/>


So now I gonna start creating *.fb3 files instead *.epub.