html elements in epub

kamwoj · 02-09-2012, 05: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:

Quote:

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

Quote:

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, 03: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, 04: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:

Code:

<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, 08: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, 08:55 AM

For now my books have such a structure:

Code:

<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, 03: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, 07: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, 03: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, 06: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:

Code:

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

02-10-2012, 04:31 AM	#3
kamwoj Junior Member Posts: 5 Karma: 10 Join Date: Feb 2012 Device: FBReader @ SGS2	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: Code: <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.

02-11-2012, 06:43 AM	#9
kamwoj Junior Member Posts: 5 Karma: 10 Join Date: Feb 2012 Device: FBReader @ SGS2	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: Code: <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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Touch CSS pseudo-elements in an EPUB: Supported?	Benjamin Buford	Kobo Reader	10	07-07-2011 04:08 AM
HTML input -<b> and <i> being converted to block elements?	fluxcore	Conversion	2	02-18-2011 10:36 PM
HTML to ePub?	martienne	ePub	1	08-08-2010 08:05 PM
HTML Book + non HTML TOC to epub	aarcane	Calibre	4	03-02-2010 03:58 AM
ePub elements pulled from the internet?	melisen	ePub	1	12-08-2009 10:59 PM

02-10-2012, 03:58 AM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	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.

02-10-2012, 08:47 AM	#4
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	<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.

02-10-2012, 03:24 PM	#6
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	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....

02-10-2012, 07:27 PM	#7
kamwoj Junior Member Posts: 5 Karma: 10 Join Date: Feb 2012 Device: FBReader @ SGS2	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.

02-11-2012, 03:57 AM	#8
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	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.