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

[icearch]

Good, after re-phrasing your needs into step-by-step form, we can really get into practise.

[icearch]

I think you need to look into flex display. I have limited experience in that so I can't help much.

[jhowell]

A blockquote is a semantic element that indicates the content is a quotation from another source. How is renders is up to the reading software and can vary significantly. If you want an exact layout you are better off avoiding it.

[JSWolf]

Originally Posted by ElMiko

@Karellen: I didn't have competing margins at all. JSWolf had competing margins in his "fixed" version

I do not have competing margins in my CSS. I've used that CSS for a long time and if I had competing margins, I'd have known it long before now.

[JSWolf]

Originally Posted by icearch

Attachment 221731

Is this what you want?

How will it work if the text doesn't fit on the screen? In the second chapter, the text would be too large to fit ob my iPhone screen so it would have to go to the next screen.

I cannot say if the first chapter would fit on my screen on my iPhone.

As I said before, if you don't know the screen that's going to be used to read this, then you don't know if the pages will look as you want because they may not fit. Also, you don't know if the person reading is going to use a larger font or larger line height (if possible).

[ElMiko]

Originally Posted by JSWolf

I do not have competing margins in my CSS. I've used that CSS for a long time and if I had competing margins, I'd have known it long before now.

I love that confidence, but boy do Karellen and I have news for you!

blockquote {
margin-top: 1em;
margin-right: 1.5em;
margin-bottom: 1em;
margin-left: 1.5em;
margin: 1em 2em;
padding: 0;
display: block;
}

Why are you like this?

Also, I don't know why you keep talking about things needing to fit on a single page. Who here is insisting on that? Are you okay?

[ElMiko]

Originally Posted by jhowell

A blockquote is a semantic element that indicates the content is a quotation from another source. How is renders is up to the reading software and can vary significantly. If you want an exact layout you are better off avoiding it.

I mean, that's fine; I'm really not trying to debate the use of blocksquotes as a semantic element (although I think the example with a poem and an attribution here would qualify). But even if we use <divs> instead of <blockquotes>, the underlying issue is the same. Do you have any ideas on that point?

[jhowell]

Originally Posted by ElMiko

But even if we use <divs> instead of <blockquotes>, the underlying issue is the same. Do you have any ideas on that point?

Using div gives you more control of layout but I don’t know of a way to achieve all of your goals.

[icearch]

Usually the container decide content. Your goal is to let content decide container, I don't know if this is possible.

[RbnJrg]

Try the following:

  <div class="center block">

      <p class="hindent">This is a stanza</p>

      <p class="hindent">This is a stanza of beautiful poetry and a very quite long one</p>

      <p class="hindent">This is a stanza of beautiful poetry and the most long stanza in this poetry</p>

      <p class="hindent1">This is a stanza of beautiful poetry</p>

      <p class="hindent">This is a stanza of beautiful poetry</p>

      <p class="hindent">This is a stanza of beautiful poetry</p>

      <p class="hindent1">This is a stanza of beautiful poetry</p>

      <p class="hindent">This is a stanza of beautiful poetry</p>

      <p class="hindent">This is a stanza of beautiful poetry</p>

      <p class="hindent1">This is a stanza of beautiful poetry</p>

      <p class="hindent">This is a stanza of beautiful poetry</p>

      <p class="hindent">This is a stanza of beautiful poetry</p>

  </div>

and

.block {
    margin: 1em 0;
    display: block;
    width: fit-content; 
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

Of course, this "solution" is not working on ADE 2.x.

[ElMiko]

@RbnJrg — Okay. So. When do I just go out and buy a "RbnJrg" bat signal? And where are they sold?

Thank you. This is exactly "it".

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)? Whereas when it's coded exactly as you have (i.e. <div class="center block">), the bottom margin is preserved. Note, the <div><div> method work fine if the text isn't forced to reflow to a second page (see image5 attached).

Also, I tested it with class="center block" and class="block center" and it appears to be agnostic to order. Is that 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....

[icearch]

@RbnJrg

I was going to darw a border tight fit to text just now, but failed, your answer hit just at right time.

[ElMiko]

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

[graycyn]

Originally Posted by ElMiko

@RbnJrg

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....

Well, no, the Nooks and Kobo devices are NOT necessarily on their last legs battery-wise.

Why? Because CURRENT manufactured Nooks and Kobos still use the older ADE engine that's roughly equivalent to ADE 2.01 for reading epub.

So, a Nook manufactured in 2026 is going to be using that very old engine, and so is a Kobo manufactured in 2026. Unless and until either manufacturer changes something. Don't hold your breath on that one! As neither manufacturer has seen fit to update their Adobe reading engines so far. It's been same old, same old for a long time now.

Kobo pushes their kepub format, so they have no incentive to update the Adobe engine and Nook, well, Barnes and Noble is more or less living back in the stone age. Even their phone/tablet apps use the old Adobe engine!

Given how long an e-reader can last, you are looking devices manufactured quite recently as being around potentially another decade or longer. Sorry to be the bearer of bad news.

I don't like it either.

[icearch]

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?

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.