Inline-block element gets cut off and/or moved to a new screen

[ElMiko]

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?

[JSWolf]

Originally Posted by ElMiko

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.

[ElMiko]

JSWolf, I appreciate your taking a stab at this, but:

1. the issue is not fixed.
2. the issue is not fixed.

I do need and want that <div> (or at least something like it) otherwise the blockquote isn't centered on the page. It's the whole point of my previous post [emphasis added]:

Originally Posted by ElMiko

Anybody have any ideas as to how I can get the alignment behavior I'm looking for without all of these non-reflowing effects?

I also don't understand how changing the margins on the blockquote from "margin: 1em 2em" to "margin: 1em 1.5em" was a necessary change, or changing the hanging indent css, or adding a chapter heading.

[ElMiko]

I tried moving the inline-block property from the blockquote element to the p elements within it themselves, which does solve the issue of the blockquote element not reflowing, but creates a bunch of new issues:

1) for some reason the bottom margin of the blockquote isn't rendered (i.e. the blockquote lies on top of the <p> element with no margin) (NOTE: the attached image is NOT showing this behavior. It is attached to show the desired effect as described in the following bullet).
2) it prevents aligning items realtive to the width of the blockquote container. So, for example if I want an attribution line ("<p>Written by<br />A very clever guy</p>") that is left-aligned relative to itself, but the element is right-aligned relative to the broader blockquote AND bounded by the preceding poem rather than the page width (see image1 attached)... well, it doesn't work because the inline-block has been applied to the stanzas individually rather than the blockquote.

So, unfortunately, I don't think inline-blocking the stanzas is the solution, either...

[icearch]

I don't quite understand what kind of display you are looking for. Could you explain it clearer or draw some pic to help others understand?

I tested your file in Sigil, and change display from inline to bolck and it seems just like what you said? But I doubt it's just that simple.

[icearch]

After some second thought, why do you need it's block to be centered? Every block defult took up 100% screen width. There is no room to wiggle.

[JSWolf]

Originally Posted by ElMiko

I tried moving the inline-block property from the blockquote element to the p elements within it themselves, which does solve the issue of the blockquote element not reflowing, but creates a bunch of new issues:

1) for some reason the bottom margin of the blockquote isn't rendered (i.e. the blockquote lies on top of the <p> element with no margin) (NOTE: the attached image is NOT showing this behavior. It is attached to show the desired effect as described in the following bullet).
2) it prevents aligning items realtive to the width of the blockquote container. So, for example if I want an attribution line ("<p>Written by<br />A very clever guy</p>") that is left-aligned relative to itself, but the element is right-aligned relative to the broader blockquote AND bounded by the preceding poem rather than the page width (see image1 attached)... well, it doesn't work because the inline-block has been applied to the stanzas individually rather than the blockquote.

So, unfortunately, I don't think inline-blocking the stanzas is the solution, either...

You cannot do this. It's not possible. You don't know the screen. You don't know the font size. You don't know the line height. You don't know the font. You cannot assume it fits on one screen so you can do what you want.

If you have it centered, what do you do if any of the lines don't fit in full? The way I did it when they wrap, you know it and it looks OK. If you have it centered, it will not look good when any of the lines wrap.

You also have to have text wrap to the next screen when it doesn't fully fit on one screen. There is no other way to do it.

So basically, what you want is unrealistic.

[ElMiko]

I'm sorry if it's going to sound like i'm repeating myself, but I genuinely don't know how else to describe it:

as in the picture above (EDIT: and below), I want the stanzas of a poem in a blockquote to be left-aligned WITHIN the blockquote. But i want the blockquote to be center-aligned relative to the page. What you're seeing in the image above is what Sigil PageEdit (and similarly Sigil's Preview window) displays. HOWEVER, the way Sigil/PageEdit previews epub is not how they are actually rendered in most readers. So, for example if you try to view my original file in the ReadiumReader plugin, you will see both instances of the "errors/undesired formatting" that I described in the first post.

As a corollary to this, I want the width of the blockquote to be defined by the text it contains so that if i right-align two lines of text (broken by a <br /> tag) the rightmost boundary will be defined by the longest line in the blockquote, not the rightmost bounds of the page itself.

[ElMiko]

Originally Posted by JSWolf

You cannot do this. It's not possible. You don't know the screen. You don't know the font size. You don't know the line height. You don't know the font. You cannot assume it fits on one screen so you can do what you want.

If you have it centered, what do you do if any of the lines don't fit in full? The way I did it when they wrap, you know it and it looks OK. If you have it centered, it will not look good when any of the lines wrap.

You also have to have text wrap to the next screen when it doesn't fully fit on one screen. There is no other way to do it.

So basically, what you want is unrealistic.

JSWolf, you're simply not understanding or reading what I'm writing. I never said i wanted it to fit on one page. Like, where did i say this?? On the contrary, i want it to reflow naturally onto as many pages as necessary.

When you say "what do you do when a line doesn't fit in full" I'm truly baffled by the question. The line breaks! Like normal reflowable text (See image2 attached). If the font size is bigger, then it breaks sooner. If the screen is smaller then it breaks sooner. And if the screen is wider or the text smaller then the line may not break at all, the text will be centered relative to the page but not its adjacent text (see image3 attached).

When you say it won't look good, that's just, like, your opinion, man. My original question was not seeking aesthetic feedback; it was strictly technical. The images attached below "look good" to me; i just can't get it to render that way in actual ereading software.

[Karellen]

You had some competing margins in the blockquote.

A quick first try, can you try this css then tweak as necessary...

Spoiler:

blockquote {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 20%;
margin-right: 20%;
padding: 0;
display: block;
}
body {
widows: 1;
orphans: 1;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: justify;
}
h2 {
text-align: center;
text-indent: 0;
margin-top: 0.8em;
margin-bottom: 0.8em;
}
p {
margin-top: 0;
margin-bottom: 0;
widows: 1;
orphans: 1;
text-indent: 1.2em;
display: block;
line-height: 1.15em;
text-align: justify;
}
h2 + p {
text-indent: 0;
}
.space {
margin-top: 0.8em;
}
.wrap {
text-align: left;
}

[ElMiko]

@Karellen: I didn't have competing margins at all. JSWolf had competing margins in his "fixed" version of my file, which bears little in common with mine and didn't attempt to address the initial issue. So I don't know that your working in that file is really all that worthwhile. From what i can tell, you cleaned up JSWolf's formatting, but it doesn't really speak to my underlying issue of centering a block of left aligned text within a given screen (or screens) because, well, JSWolf wasn't trying to address it in the first place.



FWIW, my little mock-up did have an error, but it's not making any difference in the rendering: much of the text was placed above the body tags... oops.

[Karellen]

oops. I didn't scroll up far enough and grabbed the one from jswolf.
I'll take another look.

[icearch]

Is this what you want?

[icearch]

Oh, I think I got it. Let me re-phrase it, tell me I'm right or wrong.

You want every sentence of poem to be displayed in their own line (as long as screen can fit), and the width of block will be determined by the longest sentence. And the longest sentence will be centered in the screen, and the rest sentences will left-align with the longest sentence.

Is this right?

[ElMiko]

Originally Posted by icearch

Oh, I think I got it. Let me re-phrase it, tell me I'm right or wrong.

You want every line of poem to be displayed in their own line (as long as screen can fit), and the width of block will be determined by the longest line. And the longest line will be centered in the screen, and the rest lines will left-align with the longest line.

Is this right?

NAILED ITTTTT!

(Honestly, it's kind of satisfying just hearing it stated using different words; i was stressing out that i couldn't even conceive of another way to describe it!)