My first EPUB! Need advice on best practices - Page 2

theducks · 05-01-2017, 01:27 AM

Quote:

Originally Posted by fluoresce

Thanks for the help, guys.

I have a large EPUB, with lots of internal links. I need to clean up some tags using regex (delete lots of redundant classes). I merged all of the HTML files so that I can run regex for each fix just once instead of having to repeat it on each page individually. The problem is that when I split the files back up, many of the internal links stopped working! Why do the internal links not automatically update?

As I was splitting the files back up, I got a warning like this:

That Anchor ID is not there
IMHO there is no need for an id if the link just hits the TOP-o-file

JSWolf · 05-01-2017, 04:17 AM

Quote:

Originally Posted by dwig

All of the advice so far about margins should be taken to refer to page/screen level tags (e.g. <body>, ...), other that the good advise to not use the shorthand notation.

Margins applied to Heading tags (e.g. <h1>, ...) and containers such as <div> and <p> are another matter. With these, margin-top and margin-bottom are excellent way to insert vertical space, if you use em units, though added space is best (IMO) left to special cases with <p> and <div> tags (eg. <p class="section" where the section class has a margin-top of perhaps 1em).

If by <p class="section"> you are referring to a section break, that's not correct. A 1em space is not enough.

<p class="sectionbreak">Some text for the first paragraph after the section break</p>

.sectionbreak {
padding-top: 2em;
text-indent: 0
}

That's what works best for a screen be it eInk, a phone, or tablet. By using padding-top, you don't lose the section break space when it occurs at the bottom of the page.

fluoresce · 05-01-2017, 09:35 AM

Quote:

Originally Posted by Turtle91

Hi flouresce, welcome to MR!

There is no need to merge your html pages to run regex on all of them. All you need to do is select "All HTML Files" instead of "Current File" in the regex mode selector at the bottom.

Cheers!

Thanks, Turtle91! Saved me. Added to your rep.

I thank you all for your help. If I understand you all correctly, here's what I think I must do . . .

Keep formatting to a minimum.
Use only the most basic HTML elements and CSS styles.
Avoid shorthand CSS properties and values (e.g. margin: 2em 0).
Use relative values (e.g. ems) instead of absolute.
Avoid @page because it could cause problems with old readers.

It would help to know what readers are the most popular. The Kindle is the most popular, right? That uses MOBI, I think. What EPUB readers are the most popular? Are they Google Play Books and iBooks?

Must I really use longhand for all CSS? It'll quadruple the amount of code!

theducks · 05-01-2017, 10:55 AM

Quote:

Originally Posted by fluoresce

Must I really use longhand for all CSS? It'll quadruple the amount of code!

Depends on your targeted device. A few were notorious for barfing with shorthand.

Is it worth the effort to make your book work on every possible device?
OSFN (one size fits none)

If you get fancy, you need to customize styles for those device outliers

BTW many of the books in my Library have (prettified) stylesheets of under 300 lines. I use mostly shorthand for Margin. the others like Border I do longhand . Oh! I only do EPUB 2 for use on my ancient Astak and conversion to AAZW3 for my K4NT

fluoresce · 05-01-2017, 11:07 AM

Quote:

Originally Posted by theducks

Depends on your targeted device. A few were notorious for barfing with shorthand.

Is it worth the effort to make your book work on every possible device?
OSFN (one size fits none)

If you get fancy, you need to customize styles for those device outliers

BTW many of the books in my Library have (prettified) stylesheets of under 300 lines. I use mostly shorthand for Margin. the others like Border I do longhand . Oh! I only do EPUB 2 for use on my ancient Astak and conversion to AAZW3 for my K4NT

Thanks, theducks!

I've just gone through all of the images in my EPUB. There are 149 of them. Half of them do not have their height and width defined, so they look like this:

<img alt="whatever" src="whatever.png"/>

Do I have to add the width and height of every image, as I would if it were a website?

JSWolf · 05-01-2017, 05:24 PM

Quote:

Originally Posted by fluoresce

Thanks, theducks!

I've just gone through all of the images in my EPUB. There are 149 of them. Half of them do not have their height and width defined, so they look like this:

<img alt="whatever" src="whatever.png"/>

Do I have to add the width and height of every image, as I would if it were a website?

Are your images high resolution? There are a lot of Readers out there that are high resolution such as Kindles and Kobos. If the images are of low resolution, they will be hard to see. You really should test this on an actual high resolution Reader to see for yourself.

As to the images, there are many different screen sizes including phones & tablets. You'd be best to use %.

<img alt="whatever" src="whatever.png" height="50%"/>

The problem is that without a Reader, you won't be seeing what someone with a Reader will see. So get one and test away but it has to be high resolution and a Kobo would be better than a Kindle since your source is ePub. I suggest the Kobo Aura H2O.

fluoresce · 05-01-2017, 07:19 PM

Quote:

Originally Posted by JSWolf

Are your images high resolution? There are a lot of Readers out there that are high resolution such as Kindles and Kobos. If the images are of low resolution, they will be hard to see. You really should test this on an actual high resolution Reader to see for yourself.

As to the images, there are many different screen sizes including phones & tablets. You'd be best to use %.

<img alt="whatever" src="whatever.png" height="50%"/>

The problem is that without a Reader, you won't be seeing what someone with a Reader will see. So get one and test away but it has to be high resolution and a Kobo would be better than a Kindle since your source is ePub. I suggest the Kobo Aura H2O.

Thanks, JSWolf.

I'm pretty sure that the images are not high resolution. I don't know about that kind of stuff. They're probably 72 PPI. In terms of pixels, they range from 300px to 600px.

Does this mean that they will look terrible on high-res screens?

I'm worried about my images now! For testing purposes, I only have a small Android tablet and my mobile phone, both with Google Play Books.

My ebook is fitness-related. Most of the images are tables. I'm assuming that most of my readers will read the ebook on their phones.

How exactly do you recommend that I code the images? At the moment, they look like this:

Code:

<div class="centerimg">
<img src="whatever.png" alt="Whatever"/>
</div>

Code:

.centerimg {
    text-align: center;
    padding: 0;
    margin: 6pt 0 16pt 0;
    }

Some images have height and width set in numerals (e.g. width="600" height="400").

I thank you for your guidance.

Turtle91 · 05-01-2017, 10:30 PM

Quote:

Originally Posted by fluoresce

Thanks, JSWolf.

I'm pretty sure that the images are not high resolution. I don't know about that kind of stuff. They're probably 72 PPI. In terms of pixels, they range from 300px to 600px.

Does this mean that they will look terrible on high-res screens?

Not necessarily. Although hi-res images on a hi-res screen are awesome, they aren't always necessary - and can actually make the eBook WAY too large in file size. You can code the image so it doesn't look all blurry when it gets stretched out. The down side is that the images will appear smaller (take up less realestate) on a hi-res device.

I would try and stay away from using "height:xx%" as the height value is not reliable. It is supposed to refer to the height of the parent element, but what exactly is that height?? Is it the size of the div, the screen, the page, the file??

You can set the css for an image to have a certain width in %, but then tell it to have a maximum width to prevent overstretching. Then the height will scale as necessary to keep the proper aspect ratio - defining BOTH height and width isn't necessary. Here is an example:

Code:

<div class="image1"><img alt="" src="../Images/img_1.jpg" /></div>
<div class="image2"><img alt="" src="../Images/img_2.jpg" /></div>
<div class="image3"><img alt="" src="../Images/img_3.jpg" /></div>
etc.

CSS
div.image1 {margin: 2em auto; width:80%; max-width: 500px} /* actual width in pixels of img_1 */
div.image2 {margin: 2em auto; width:80%; max-width: 490px} /* actual width in pixels of img_2 */
div.image3 {margin: 2em auto; width:80%; max-width: 621px} /* actual width in pixels of img_3 */

Also...there really is no need to put anything into the alt="" portion of the <img> tag unless you have something you want specifically read by a TTS device.

IMHO, Marvin is the best eReader app on iOS, but it is not the widest used. The creator did a really good job at rendering ePubs the way they should be.

Cheers,

JSWolf · 05-02-2017, 06:48 AM

If a % is not used, then you could have the images not properly displayed on screen. So yes, use % like I posted. But you'll have to test what % works. You can also use width="50%" as well to do image sizing. But given that you don't have a hi-resolution eInk device, It is highly suggested you either buy one or borrow one (if you can) because what you see on a phone or tablet is not the same as what you see on eInk in terms of images.

fluoresce · 05-02-2017, 12:12 PM

Thanks, Turtle91 and JSWolf! Learning a lot from you guys.

Please tell me if I understand you correctly . . .

Some hi-res e-readers stretch images to take up space, in which case low-res images can look terrible. We can fix this by doing something like the following:

Code:

<img alt="" src="../Images/img_3.jpg" width="90%" style="max-width:600px"/>

This will prevent the image from being stretched more than 600 pixels, which is its full width.

Is that correct?

fluoresce · 05-02-2017, 01:41 PM

I need to check if all of the internal links are working in my EPUB. There are quite a few.

In Sigil, I can run a report. When I click on "Links", I can see lots of details about the internal and external links. There's a column called "Target exists?".

Am I right in assuming that if a link is broken, it would say "No" here? Is that how you can identify a broken link?

JSWolf · 05-02-2017, 02:14 PM

Quote:

Originally Posted by fluoresce

Thanks, Turtle91 and JSWolf! Learning a lot from you guys.

Please tell me if I understand you correctly . . .

Some hi-res e-readers stretch images to take up space, in which case low-res images can look terrible. We can fix this by doing something like the following:

Code:

<img alt="" src="../Images/img_3.jpg" width="90%" style="max-width:600px"/>

This will prevent the image from being stretched more than 600 pixels, which is its full width.

Is that correct?

Do not use any value other than a %. The reason being is that if you have a value that's too big, it will be a problem. A % cannot be too big if you only go up to 100%. In most ePub, 100% would be the full height or full width of the screen in use. But, if the image is low-res and you view on a larger device, it could be stretched.

This is why I say to test it on different devices with different screen sizes including eInk. Viewing it on a tablet or phone is not the same as viewing it on eInk. So get yourself an eInk Reader (hi-res) and test away.

fluoresce · 05-02-2017, 03:23 PM

Sorry, JSWolf, do you mean like this?

Code:

<img alt="" src="../Images/img_3.jpg" width="90%" style="max-width:100%"/>

I shall try to get my hands on one of those e-ink devices.

JSWolf · 05-02-2017, 04:24 PM

Quote:

Originally Posted by fluoresce

Sorry, JSWolf, do you mean like this?

Code:

<img alt="" src="../Images/img_3.jpg" width="90%" style="max-width:100%"/>

I shall try to get my hands on one of those e-ink devices.

You can try code like that using ADE for PC or MAC. You can resize the ADE window to see the results of the code and decide what you might want to use for a %. I would have to test things to know what % number(s) to use.

fluoresce · 05-03-2017, 06:44 AM

Quote:

Originally Posted by JSWolf

You can try code like that using ADE for PC or MAC. You can resize the ADE window to see the results of the code and decide what you might want to use for a %. I would have to test things to know what % number(s) to use.

Thanks, JSWolf.

Okay, this is what I have done.

CSS

Code:

img {
max-width: 100%;
height: auto;
}

HTML

Code:

<img src="whatever" alt=""/>

In other words, the images only include src and alt attributes. I've removed the width and height attributes.

Everything seems to be working well. The images are scaled up to their maximum size in pixels, after which they stop being scaled up.

However, I've now encountered another problem!

Many images are just tables that include lots of text. When these images are scaled down, they look very blurry on ADE for PC!

Having done some research, I understand that this is not a CSS problem; rather, it's to do with the fact that text is difficult to be scaled down.

Do you know how I could fix this problem?

05-02-2017, 12:12 PM	#25
fluoresce Enthusiast Posts: 38 Karma: 342440 Join Date: Apr 2017 Device: Sigil	Thanks, Turtle91 and JSWolf! Learning a lot from you guys. Please tell me if I understand you correctly . . . Some hi-res e-readers stretch images to take up space, in which case low-res images can look terrible. We can fix this by doing something like the following: Code: <img alt="" src="../Images/img_3.jpg" width="90%" style="max-width:600px"/> This will prevent the image from being stretched more than 600 pixels, which is its full width. Is that correct?

05-02-2017, 03:23 PM	#28
fluoresce Enthusiast Posts: 38 Karma: 342440 Join Date: Apr 2017 Device: Sigil	Sorry, JSWolf, do you mean like this? Code: <img alt="" src="../Images/img_3.jpg" width="90%" style="max-width:100%"/> I shall try to get my hands on one of those e-ink devices.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Page Margin Best Practices epub->mobi	BKh	Conversion	0	08-09-2012 12:11 PM
TOC best practices (InDesign to ePUb)	virtual_ink	ePub	3	07-03-2011 01:50 PM
Free book (nook/Kindle) - The Truth About Branding Practices [Business Advice]	ATDrake	Deals and Resources (No Self-Promotion or Affiliate Links)	1	05-09-2011 03:22 AM
EPUB Math: Best Practices for Mathematics in Ebooks	Adjust	News	0	08-23-2010 10:17 PM
EPUB best practices guide	Bob Russell	ePub	25	04-01-2008 08:36 AM

05-02-2017, 06:48 AM	#24
JSWolf Resident Curmudgeon Posts: 79,763 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	If a % is not used, then you could have the images not properly displayed on screen. So yes, use % like I posted. But you'll have to test what % works. You can also use width="50%" as well to do image sizing. But given that you don't have a hi-resolution eInk device, It is highly suggested you either buy one or borrow one (if you can) because what you see on a phone or tablet is not the same as what you see on eInk in terms of images.

05-02-2017, 01:41 PM	#26
fluoresce Enthusiast Posts: 38 Karma: 342440 Join Date: Apr 2017 Device: Sigil	I need to check if all of the internal links are working in my EPUB. There are quite a few. In Sigil, I can run a report. When I click on "Links", I can see lots of details about the internal and external links. There's a column called "Target exists?". Am I right in assuming that if a link is broken, it would say "No" here? Is that how you can identify a broken link?