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

[Horus01]

I use this code for poems; it doesn't work in ADE, but it does in Kindle. It functions similarly to the code with `width: fit-content`.

blockquote.poem {
    display: table;
    margin: 1em auto;
    padding: 0 1em;
  }

[ElMiko]

Originally Posted by icearch

To my test, margin left and right are definitely necessary. Otherwise it would snap to left. And to be sure, you need to do another blank div to enclose all of that, for good measure.

Yes, I agree that the auto L/R margins are necessary. My question was about the center class, though. I haven't observed any difference with it or without it, but that doesn't mean there isn't one...

[ElMiko]

Originally Posted by Horus01

I use this code for poems; it doesn't work in ADE, but it does in Kindle. It functions similarly to the code with `width: fit-content`.

blockquote.poem {
    display: table;
    margin: 1em auto;
    padding: 0 1em;
  }

Hmmm interesting. I might want to take a little from column a and a little from column b. I take it the L/R padding is to set fixed values rather than the % Max width in RbnJrg's solution.

[JSWolf]

Originally Posted by ElMiko

Hmmm interesting. I might want to take a little from column a and a little from column b. I take it the L/R padding is to set fixed values rather than the % Max width in RbnJrg's solution.

If this could possibly be read on a nook or Kobo, do not use that CSS code.

P.S. The CSS code does work in ADE/RMSDK

[Turtle91]

Originally Posted by JSWolf

If this could possibly be read on a nook or Kobo, do not use that CSS code.

Are you saying that the Nook and Kobo can’t handle tables either?!??! That sounds like they are pretty useless, and don’t meet standards. It’s time to move on…

[ElMiko]

Originally Posted by JSWolf

If this could possibly be read on a nook or Kobo, do not use that CSS code.

Why not? What exactly will happen if I use RbnJrg's or Horus01 code?

[JSWolf]

Originally Posted by Turtle91

Are you saying that the Nook and Kobo can’t handle tables either?!??! That sounds like they are pretty useless, and don’t meet standards. It’s time to move on…

Yes, the older RMSDK can handle tables. But it was said that the CSS code posted does not work in ADE.

I had a search through ePubs I've read and some do have display: table; in the CSS and they works no problem. I do not see anything in the CSS that @Horus01 posted that does not work in ADE/RMSDK.

[JSWolf]

Originally Posted by ElMiko

Why not? What exactly will happen if I use RbnJrg's or Horus01 code?

@Horus01 is incorrect. The CSS code he posted does work in ADE/RMSDK. So if you do want to use it, there's no reason not to.

[ElMiko]

Originally Posted by JSWolf

@Horus01 is incorrect. The CSS code he posted does work in ADE/RMSDK. So if you do want to use it, there's no reason not to.

Horus01 is correct. You are mistaken.

The code does not work in ADE 2.X. In fact, it gets REALLY funky. The "auto-centering" fails, but it also then duplicates all the text and displays each line as a separate cell in a row. And the top and bottom margins fail. (Also, with my modified "inline-block" attribution, this doesn't get aligned right, either). See imageADE-H attached.

RbnJrg's code also fails to "auto-center", applying the 85% max-width constraint right-to-left rather than 7.5% on either side. It also ignores the "fit-content" property. See imageADE-RJ attached.

And in my modified code, which steals a bit from RbnJrg and a bit from Horus01, the auto-center effect fails (although in this particular case it gives the illusion of centering because of the right-aligned attribution), as does the "fit-content" property. See imageADE-EM attached.

Spoiler:

blockquote.bqibEM {
    margin: 1em auto;
    padding: 0 2em;
    display: block;
    width: fit-content; 
	}

However, in both RbnJrg's and my FrankenCode, it doesn't produce any MAJOR readability issues that I can discern. It just doesn't look as nice as it would in an application that isn't total trash.

So, in summary:
1) The only code that you endorsed (other than your own, which didn't address any of the concerns in the original post) has serious readability issues in ADE, which Horus01 rightly pointed out from the jump.
2) The apparent readability of RbnJrg's and my new code (courtesy of RbnJrg's and Horus01's tips & tricks) means that your constant refrain that we use code optimized for ADE 2.X is basically taking the position that ebooks should look mediocre across all platforms rather than looking good in several and mediocre only in ADE. I can comfortably say: this is a weird take.
3) Thank you again to RbnJrg and Horus01 for their help. Teamwork apparently does make the dream work.

EDIT: P.S. in my code snip above, I'm defining the L/R boundaries in em units because I want the max-width to be relative to paragraph indents (which i usually set at 1.5em) rather than the width of the screen. However, if I used % units to define paragraph indents (e.g. "text-indent: 5%;") I think one could basically acheive the same result as RbnJrg's original code by using "padding: 0 7.5%;" instead of the max-width property... I think. I'll let RbnJrg confirm or clarify this, though.

[RbnJrg]

Originally Posted by ElMiko

Quick question (hopefully): do you know why when using your classes if I do <div class="center"><div class="block"> the bottom margin disappears when the text has to flow onto a second page (see image4 attached)?

The bottom margin disappears because with my code, the margin is set to the unique and main div (<div class="center block">), so that element has a bottom margin of 1em. But when you use:

<div class="center"> /* Here there is no margin at all */
   <div class="block"> /* Here I suppose you have a bottom margin */
...
...
   </div> /* After that, a bottom margin of 1em */
</div> /* After that, no bottom margin */

So if all the code is in the same page, the margin of .block works, but whe the code is splitted to the next page, the bottom margin is absorbed (according to your method). Use padding instead of margin if you want to use two <div>

Also, I tested it with class="center block" and class="block center" and it appears to be agnostic to order. Is that right?

In this case, yes, is right.

EDIT: Re: ADE, of course not. What else is new? But also we're already on 4.5.something... when can we collectively forget about that trash application? Surely, those old nooks and kobos are on their last legs battery-wise....

The code works on ADE 4.5, but you need to employ the epub3 protocol in your epub.

[RbnJrg]

Originally Posted by ElMiko

@RbnJrg — Follow-up question: Is the "center" necessary or are the left and right auto margins sufficient to center the block?

No, it's not necessary; the property "text-align: center" was a legacy of your original code.

[RbnJrg]

Originally Posted by ElMiko

I take it the L/R padding is to set fixed values rather than the % Max width in RbnJrg's solution.

You want a center block with text aligned to left. If you, instead of "width: fit-content" and "max-width: 85%" (or whatever) employ L/R padding, if your stanzas are short, then all of them won't be centered, you'll have a lot of blank space on the right side. With my code, the width is automatic (fit-content) and the block will be centered acording to the longest stanza.

[ElMiko]

Originally Posted by RbnJrg

You want a center block with text aligned to left. If you, instead of "width: fit-content" and "max-width: 85%" (or whatever) employ L/R padding, if your stanzas are short, then all of them won't be centered, you'll have a lot of blank space on the right side. With my code, the width is automatic (fit-content) and the block will be centered acording to the longest stanza.

hmmm... I think maybe either I wasn't clear or I'm just not understanding your explanation.

what i'm referring to is my code that blends your css and Horus like this:

div.bqib {
    margin: 1em auto;
    padding: 0 2em;
    display: block;
    width: fit-content; 
	}

In otherwords, the only difference is that instead of using max-width to create L/R boundaries, I'm using padding.

I've attached two images below. One uses your max-width + fit-content approach, and the other uses your fit-content + Horus01's padding. In all other respects they are the same.

For blocks where all the lines are short, it appears to center everything exactly the same in both cases... It's just the the "borders" of the block are basically being defined in your code from the inside-out and in the other case from the outside-in.