epub code snippets (html / css)

[charleski]

Originally Posted by Chang

I want to add margin between text and image but I can't do it by using em as my unit. It works fine with %, pt and px but not with em. Why em doesn't work?
...

p.image {
	line-height: 0.00em;
	font-size: 0.00em;
...

You set font-size to 0, which sets the value of an em to 0 as well.
From the spec:

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.

Leave out the font-size attribute, so that it inherits the size of the parent element.

[Chang]

Originally Posted by charleski

You set font-size to 0, which sets the value of an em to 0 as well.

Ah, that was the problem. Thanks a lot charleski!

[Chang]

Once again I'm having problems with poems and this time with fixed layout in poems. Take a look at my example pictures.

I'm quite doubtful but is there a way (preferably an easy way) to keep that layout so it would look same in different devices and monitors regardless the screen size? My own answer would be no. Is this just something that cannot be done in EPUB?

I have been thinking about adding Page Map but I can't define exact page size that would work in every screen size, right?

I could play with div elements but it wouldn't work with every screen size.

If this is impossible to do in EPUB, do you have any good suggestions to do such poems in EPUB? Or should these poems be presented only in fixed layout file formats e.g. PDF?

[GeoffC]

Yikes !!!!

Has my eyesight gone or are those picture blurry !!!!!

[JSWolf]

Originally Posted by GeoffC

Yikes !!!!

Has my eyesight gone or are those picture blurry !!!!!

It's done that way so we cannot read what's there.

[GeoffC]

Originally Posted by JSWolf

It's done that way so we cannot read what's there.

Perhaps but they could have been post with a little more clarity so that we can see the point that is being raised ....

[Jellby]

I think (s)he wants the "poetry" to be displayed always with the same relative positioning/indentation.

One of the things one has to consider is that ebooks are typically displayed in small screens, so whatever format is used, it must be adaptable to narrow text widths.

[GeoffC]

Originally Posted by Jellby

I think (s)he wants the "poetry" to be displayed always with the same relative positioning/indentation.

One of the things one has to consider is that ebooks are typically displayed in small screens, so whatever format is used, it must be adaptable to narrow text widths.

I think that the only way would be 'fixed' as in pdf - or accept some relative positioning ... For myself, I have more of an issue of poems that move over and onto the next page .... it looks untidy, but that's another issue ....

[charleski]

Originally Posted by Chang

I'm quite doubtful but is there a way (preferably an easy way) to keep that layout so it would look same in different devices and monitors regardless the screen size?

Screen size is the real issue. Essentially you want to be able to control the size of the text in order to ensure that lines don't wrap, the rest is just simple justification and margin control.

Unfortunately, CSS2 doesn't have conditional rules that would be useful here. If you're targeting readers equipped with ADE, though, then you could take advantage of Adobe's page-template extension and the conditional styling it allows. See the section on dynamic styling here. This can be used to set differing selector rules for different sizes of screen. Of course, this is non-standard and would only work on ADE readers (which are still the large majority of devices), but you can set the default rules to suit something like the iPad and then apply conditional rules to match ADE readers with smaller screens.

[JSWolf]

Please, don't use Adobe's page-template. I delete that out of every ePub that has it.

[GeoffC]

obviously one-size does not fit all !!!!

[AlexBell]

Originally Posted by JSWolf

Please, don't use Adobe's page-template. I delete that out of every ePub that has it.

Could you tell me why please?

Regards, Alex

[Chang]

Thank you all for good answers!

Originally Posted by JSWolf

Please, don't use Adobe's page-template. I delete that out of every ePub that has it.

I'm also interested what's your basis for this.

[charleski]

Well, a lot of publishers use the page-template badly, putting margins in it that should be specified in the css. In fact it seems a lot of them just paste in a single page-template file that they've found somewhere in the mistaken belief that it makes their output look more professional, but that's a symptom of the poor level of coding skills prevalent in the industry.

Used properly, the page-template extension offers a reasonable amount of extra functionality. It's non-standard, but we're already seeing people playing around with webkit-specific css3 elements to get nice effects on the iPad, so the epub standard is in danger of losing relevance.

[darkpoet]

I'll invite you to take a look at my epub-formatted book. The 9th section called "Tarot" (adversary) is a collection of poetry. In particular, numbers 19, 20, 22 should prove good examples of a "best-fit" solution. Due to page-width, it's really a matter of doing some "padding-left" and "padding-right" work... coupled with some left, right, or center, alignment... Also, because you don't want stanzas breaking across pages (and when the user selects large size fonts, they will), I made sure to use ".dontbreak { page-break-inside: avoid ; }" in the CSS as well...

http://www.mobileread.com/forums/sho...d.php?p=815201