View Single Post
Old Yesterday, 07:45 AM   #2
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 82,380
Karma: 151278869
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by ElMiko View Post
In the attached file, I have some blockquoted poetry that i want to be left aligned within its block, but the whole block to be centered within the page.

My approach is to inline-block the <blockquote>, and wrap it in a "text-align: center; display: block;" <div> container.

Unfortunately, this is causing two very undesirable behaviors:

1) if the whole blockquote wouldn't fit in the remaining space on the page, the whole element gets pushed to the next page, rather than displaying as many lines as can fit on the first page, and then flowing the rest of the text to the second page.
2) if the whole blockquote is longer than the screen, it will just cutoff whatever text is more than fits on a single screen length.

Anybody have any ideas as to howI can get the alignment behavior I'm looking for without all of these non-reflowing effects?
I've fixed the errors in the code and fixed your poetry. Have a look at the CSS to see what I've done.

1. That issue is fixed
2. I've fixed it so if the text does not fit on the screen, it will wrap to the next screen. There's no way to change this.

I've dropped the <div> that you don't need or want. I've also changed the classes you use. Now if a line is too long for the screen, it will wrap with an indent to show it's part of the same line. Now you will see that the ePub looks good.
Attached Files
File Type: epub bqblock.epub (3.5 KB, 3 views)
JSWolf is offline   Reply With Quote