Can we do this in HTML?

[Nate the great]

Lately I've been interested in adapting into ebooks interesting formatting that I've found in paper books. Today I came across one that would be very neat to have but is beyond my knowledge of html. I need the help of one of the experts here.

Basically I want to reduce the width of the text for exactly one screenful of text. I know how to center, and I know how to do margin-top.

Here are some limitations:

• If possible I want this to work in Mobipocket, which means no side margins.
• In order to duplicate the paper book this effect needs to be used on one screen and then stop.

So is it possible?

[zelda_pinwheel]

hm, you mean you just want extra-large margins on the first screen of text ? this would be easy to accomplish in html / epub except for one thing : i am not sure how to apply dynamically the effect only to the first screen of text, since the quantity of text could change depending on font-size, screen-size, etc. however if you wanted to make a static simulation you could just apply this to the first paragraph or two, and then add a forced page-break. this is not ideal since it could spill into 2 screens depending on other factors, but i can't immediately think of a different way to do it.

on the other hand, when you mention mobipocket, you say no side margins, is it true you can't define any side margins in a mobipocket book ? that seems odd, to say the least (although not actually surprising, given what little i know of the format). does that mean you can't use padding either ? if you can use padding, you could add padding of say 25% to each side.

perhaps someone else will have a better idea.

[kovidgoyal]

I would say abandon the whole idea of replicating page level features of paper books. Reflowable formats do not have pages! Any hackery you do to acheive the feature is likely to be very fragile.

[Jellby]

Originally Posted by Nate the great

Basically I want to reduce the width of the text for exactly one screenful of text. I know how to center, and I know how to do margin-top.

Really tricky. I'd say it's not possible without some processing or scripting, maybe with epubjs it could be possible, but that's the reader domain more than the ebook domain. Or maybe with page templates in ADE, but again, that's a reader-specific add-on. In Mobipocket? forget it.

Originally Posted by zelda_pinwheel

on the other hand, when you mention mobipocket, you say no side margins, is it true you can't define any side margins in a mobipocket book ?

As far as I know, no margin and no padding in mobipocket. You only have indents and a default enlarged left margin (only left) for blockquotes. Even so, that's often good enough to have meaningful formatting.

[Abecedary]

Originally Posted by zelda_pinwheel

hm, you mean you just want extra-large margins on the first screen of text ? this would be easy to accomplish in html / epub except for one thing : i am not sure how to apply dynamically the effect only to the first screen of text, since the quantity of text could change depending on font-size, screen-size, etc.

I believe this can be accomplished in ADE ePubs by using the page-template.xpgt file. This lets you set up various master pages that can then be programmaticly applied to the text based on various rules (a multi-column view for screens over a certain size, for instance). One of the books I was looking at that used the page template had increased top margins for the first page/screen in a section (each section/chapter being a different html file). There's no reason why it couldn't use increased side margins for the first page instead.

[Jellby]

Originally Posted by kovidgoyal

I would say abandon the whole idea of replicating page level features of paper books. Reflowable formats do not have pages!

But they have "screenfuls", even if the screen has a scroll bar. Just like they have lines, and there is a ":first-line" pseudo-element in CSS, there could be a ":first-page" or something for paged media.

[HarryT]

The only way it occurs to me in which it could be done would be to use a graphic image of that one specific page. A "horrible hack", I know.

[HarryT]

Originally Posted by zelda_pinwheel

on the other hand, when you mention mobipocket, you say no side margins, is it true you can't define any side margins in a mobipocket book ? that seems odd, to say the least (although not actually surprising, given what little i know of the format). does that mean you can't use padding either ? if you can use padding, you could add padding of say 25% to each side.

perhaps someone else will have a better idea.

Mobi permits you do define margins, but they are "global" for the entire book. You can specify a left-indent for a specific paragraph; you cannot change the right margin.

The "killer" here is the "precisely one screenful" requirement, since that is device and setting-dependent.

[kovidgoyal]

Originally Posted by Jellby

But they have "screenfuls", even if the screen has a scroll bar. Just like they have lines, and there is a ":first-line" pseudo-element in CSS, there could be a ":first-page" or something for paged media.

My point was that applying special formatting to "first pages" only makes sense in a non reflowable context. Rather than trying to replicate that blindly ina reflowable context it should be "translated". For example, instead of using "first page", use "first paragraph" or "first section" or "first block (enclose in a div and set its margins)"

The last solution is probably the best. IIRC calibre when converting it will convert to <blockquote> in MOBI which actually does allow margins.

[Jellby]

Originally Posted by kovidgoyal

My point was that applying special formatting to "first pages" only makes sense in a non reflowable context.

That's what I don't agree with, or I don't understand. It makes sense to apply it to reflowable format if the "first page" changes with reflowing.

Say you have a tiny font size, then the "first page" is the first 3 paragraphs, which are shown with large margins, when you click on "next page" or scroll down, you see the 4th paragraph with normal margins. Now you change the font size, and the "first page" is only half of the first paragraph, which is shown with large margins, and when you click on "next page" or scroll down the rest of the paragraph has normal margins. I don't see what's wrong with this (though it may not be a beautiful format).

What would indeed be wrong is if the "first page" is fixed for some particular setting, and when you change the font size, you still see the first 3 paragraphs with large margins, even though only half a paragraph fits on the screen. But that's not what Nate wants, I believe.

[kovidgoyal]

yes, but why? Why go to all this trouble to replicate a feature that only makes sense in fixed page layouts? Ask yourself what the purpose of that feature is in the pbook. In this case it is to further emphasize the start of a chapter, I believe. So instead of trying to replicate the feature exactly, replicate the goal...emphasizing the start of the chapter. Have a discussion about the best *reflowable* ways to accomplish that goal instead.

[Greg Anos]

Originally Posted by Nate the great

Lately I've been interested in adapting into ebooks interesting formatting that I've found in paper books. Today I came across one that would be very neat to have but is beyond my knowledge of html. I need the help of one of the experts here.

Basically I want to reduce the width of the text for exactly one screenful of text. I know how to center, and I know how to do margin-top.

Here are some limitations:

• If possible I want this to work in Mobipocket, which means no side margins.
• In order to duplicate the paper book this effect needs to be used on one screen and then stop.

So is it possible?

Try the following in HTML. Take the text you want on a special page, create a separate HTML file, with the spec's you want. Embed a hyperlink to it from the main text. I think when you return, it will reset to the calling files HTML definitions....

[Abecedary]

Alright, bored here at work, so I thought I'd give this a shot. It seems to work perfectly fine in ADE epubs. Of course, as Jellby mentioned, it is an Adobe extension to the format, so it won't work on all epub readers. But it definitely is doable in at least one format.

As for Kovid's "why do it" question, the answer is for the same reason as you'd do it in a printed book--aesthetics.

[Nate the great]

Originally Posted by Abecedary

Alright, bored here at work, so I thought I'd give this a shot. It seems to work perfectly fine in ADE epubs. Of course, as Jellby mentioned, it is an Adobe extension to the format, so it won't work on all epub readers. But it definitely is doable in at least one format.

As for Kovid's "why do it" question, the answer is for the same reason as you'd do it in a printed book--aesthetics.

It worked quite well.

Thanks everyone.

[Abecedary]

Originally Posted by Nate the great

It worked quite well.

Thanks everyone.

It works in the desktop ADE, but it looks a little funky on the 505 due to no full justification. I'm not sure if there are any ADE portable ebook readers that support the justification feature yet (although I seem to remember seeing mention of one a few weeks ago).

Also, something else that occurred to me is that this method wouldn't work very well if you had a chapter title/head that was moderately long. That is, you couldn't have the chapter title be wider than the column of text--the title length would be matched to the column width and then it would wrap.