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.