Inline-block and float interaction

[ElMiko]

I am trying to center some left-aligned text with a floating image on the left. Unfortunately, it seems that the width of the container is defined as the width of the text BEFORE the floating image is applied, and as a result, the text automatically breaks before the last word. Now, I can get around this by using "white-space: nowrap", but doing so invites the potential for future issues.

STYLING:

.center {
        text-align: center;
        margin-left: -2.2em;
        }
.ib {
        font-size: 0.9em;
        margin-top: 5em;
        line-height: 1em;
        display: inline-block;
        text-align: left;
        }
.floatimg {
        float: left;
        height: 1.75em;
        clear: right;
        line-height: 1.15em;
        margin-top: 0.15em;
        margin-bottom: -0.25em;
        margin-right: 0.3em;
        }

CODE:

 <div class="center">
    <p class="ib"><img alt="" class="floatimg" src="../Images/00.jpg" /><b>LOREM</b><br />
    IPSUM DOLOR SIT AMET, CONSEC</p>
  </div>

The effect I'm trying to achieve is:



But what I'm getting is:


Any ideas?

[RbnJrg]

What you need to do is employ two divs, or one <div> and a <p>: the first div with the property "text-align: center"; the second div (or p) with the properties "display: inline-block" and "text-align: left". Something like:

<div class="centerLeft">
    <p class="inlineLeft">LOREM<br/>IPSUM DOLOR SIT AMET, CONSEC</p>
</div>

.centerLeft {
  text-align: center;
}

.inlineLeft {
  display: inline-block;
  text-align: left;
}

Of course, you can add the property "font-weight: bold" inside the .inlineLeft class if you wish and reduce the width (by default is 100%). Regarding how to add the symbol at the left, maybe the easiest way is to employ the pseudo-element ::before; something like:

.centerLeft::before {
  content: "©";
  font-size: 2.4em; /* This size has to be linked with the line-height */
}

If you want to employ a line-height of 1.5em, then the full code would be:

.centerLeft {
  text-align: center;
}

.inlineLeft {
  display: inline-block;
  font-weight: bold;
  text-align: left;
  line-height: 1.5em;
}

.centerLeft::before {
  content: "©"; /* here, instead of the symbol, you need to write the url of your image */
  font-size: 3em;
}

Here is the output:

[Turtle91]

You could also try this:

CSS:
    .pub      {clear:both; margin:2em auto; width:50vw} /* or 50% */
    .pub img  {float:left; width:2em; 
               padding:0 .5em 0 0; vertical-align: text-top;}
    .pub div  {font-weight:bold; margin-left:2.5em; 
               text-indent:0; text-align:left; 
               font-variant:small-caps}
    .pub span {display:block; font-weight:normal}

HTML:
<div class="pub">
  <img alt="" src="../Images/d20.svg"/>
  <div>Lorem <span>ipsum dolor sit amet, consect</span></div>
</div>

[ElMiko]

Thanks, guys.

couple of clarifying questions:

@RbnJrg: So this looks basically like what I had, except the trick is using the "before" pseudo-element instead of a float. And because I'm completely ignorant of pseudo-elements, I'm not too angry at myself for missing this solution. I guess I'm going to have to read up on pseudoelements, now! Unfortunately, in the continuing spirit of that ignorance, I can't for the life of me figure out how to swap the content symbol for an image... All I get is either nothing or the text of the filepath! What am I doing wrong?

EDIT1: P.S. — oh man... these pseudo-elements are really going be the end of me... So much potential for OCD formatting tweaks...
PPS: Nevermind, i finally got it! content: url(filepath)... Unfortunately, now I can't figure out how to define the image height.... The pseudo element image doesn't seem to respond to height values...

EDIT2: Okay, so this is what I got after some digging:

.centerLeft::before {
    background-image: url(../Images/00.jpg);
    background-size: 2em auto;
    display: inline-block;
    width: 2em; 
    height: 2em;
    content:"";
	}

This appears to work, but i don't know if this is so juryrigged that it will actually fail in a real ebook display? Is this too duct-taped-together, or would it work?

@Turtle91: When I first reproduced the code, this is what I got:


With a little poking, I figured out that it was the container width that was causing the 2nd line to break, which i changed to 60%. However, no matter how you slice it, the text isn't actually automatically centering in the page. So for example, if i expand the window (keeping your original 50vw) you'll see:



Is having to set the viewport width relative to the physical width of the viewing window just an unavoidable feature of this solution, or is there a way to make it automatically center for any length of text?

[RbnJrg]

Originally Posted by ElMiko

Okay, so this is what I got after some digging:

.centerLeft::before {
    background-image: url(../Images/00.jpg);
    background-size: 2em auto;
    display: inline-block;
    width: 2em; 
    height: 2em;
    content:"";
	}

This appears to work, but i don't know if this is so juryrigged that it will actually fail in a real ebook display? Is this too duct-taped-together, or would it work?

Try it in the Sigil's plugin or in Calibre Viewer to see how it looks. If there looks fine, then will look fine in all ereaders not based on RMSDK (because ADE 2.x/3.x doesn't honor pseudo-elements).

[ElMiko]

Originally Posted by RbnJrg

Try it in the Sigil's plugin or in Calibre Viewer to see how it looks. If there looks fine, then will look fine in all ereaders not based on RMSDK (because ADE 2.x/3.x doesn't honor pseudo-elements).

Ah, that's what I was looking for. ADE strikes again.... So I'm either going to have to deal with the potential vanishing text via "white-space: nowrap" or the image being erased via ADE....

For over a decade, I've been reading threads on this forum in which ADE is raked over the coals for its idiosyncratic rendering. You would think they would have listened to the community, and made some adjustments. But I guess not. Makes me think of another tech company that starts with an A, uses a fruit logo, and ends in "pple"...

EDIT: looks like pseudo-elements are only sporadically supported by epub2... boo.

[RbnJrg]

Originally Posted by ElMiko

EDIT: looks like pseudo-elements are only sporadically supported by epub2... boo.

There are epub2 ereaders that honor pseudo-elements, ie., KOReader. And all epub3 ereaders will support an epub2 with pseudo-elements. But if you want something that works everywhere, although is not optimal, you can try the following approximation, which centers the block, aligns the text to the left, and does not depend on any "a priori" width:

  <div class="bigWrapper">
    <div class="wrapper">
      <p class="col1"><img alt="" src="../Images/your_image.png"/>LOREM<br/>IPSUM DOLOR SIT AMET, CONSEC</p>
    </div>
  </div>

.bigWrapper {
  text-align: center;
}

.wrapper {
  display: inline-block;
}

.col1 {
  text-align: left;
}

.col1 img {
  display: block;
  float: left;
  width: 3em; /* This must be changed according to your image */
  height: 3em; /* This must be changed according to your image */
  margin: 0 5px 0 0;
}

As I said, it's not the best but it still works in ADE 2.0.

[Turtle91]

Originally Posted by ElMiko

Thanks, guys.

couple of clarifying questions:

@Turtle91: When I first reproduced the code, this is what I got:
Attachment 217705

With a little poking, I figured out that it was the container width that was causing the 2nd line to break, which i changed to 60%. However, no matter how you slice it, the text isn't actually automatically centering in the page. So for example, if i expand the window (keeping your original 50vw) you'll see:

Attachment 217706

Is having to set the viewport width relative to the physical width of the viewing window just an unavoidable feature of this solution, or is there a way to make it automatically center for any length of text?

Setting the width of the containing div allows the margin:xx auto to evenly divide what is left into the left/right margin. The main issue is that you have the inner div left-aligned... which means that the larger the width of your window, the more space you will get on the right side.

Try adding a border (border:1px solid red; or green) to each of the divs as you play with the widths to help visualize what it is doing.




Your other option is to use a flex box (if ePub3), or a table (ugh), or just center each of the parts...it doesn't have to be exactly like the print version.

[ElMiko]

Originally Posted by Turtle91

...it doesn't have to be exactly like the print version.

exCUSE me???? You take that back!

Someone... call someone. My ears are bleeding from this heresy. Or my eyes are.

[JSWolf]

Originally Posted by RbnJrg

Try it in the Sigil's plugin or in Calibre Viewer to see how it looks. If there looks fine, then will look fine in all ereaders not based on RMSDK (because ADE 2.x/3.x doesn't honor pseudo-elements).

Don't use pseudo elements. Use a proper class and span(s) and it will work in older ADE/RMSDK as well as other programs. If this is going to be an eBooks for sale, you have to do what's most compatible vs what's easiest.

[ElMiko]

Originally Posted by RbnJrg

But if you want something that works everywhere, although is not optimal, you can try the following approximation, which centers the block, aligns the text to the left, and does not depend on any "a priori" width:
...
As I said, it's not the best but it still works in ADE 2.0.

Ah, but now we're back to the original issue. This is basically the same code structure as what I initially posted, and the issue is that the float causes the text to break.

I believe that this is because the width of the container is defined by the width of the inline-block text (without the floating element). When the floating element is "added" the last word of text extends beyond the previously "established" container width, and causes the line to break.

What is kind of confusing to me is WHY the text component is what determines the width of the <p> element rather than, you know, the ACTUAL contencts of the <p> element (including the image)...

Originally Posted by JSWolf

Don't use pseudo elements. Use a proper class and span(s) and it will work in older ADE/RMSDK as well as other programs. If this is going to be an eBooks for sale, you have to do what's most compatible vs what's easiest.

This isn't for sale (I wouldn't feel comfortable outsourcing book design questions as aggressively as I do here, if I was profiting on it... although I suppose it could still be for sale without MY part in it being compensated). And, taking @Turtle91's statement more seriously, the truth is I know that reflowable text is simply not the same as fixed layout formatting. This is more of an intellectual exercise about understanding the limits of html, since I'm entire self/MR-taught on the subject, and often I'm merely intuiting html rules (incorrectly) rather than fundamentally understanding them.

[KevinH]

Instead of "what is easiest", don't you mean, "what is best"?

Or maybe, "what it should be" if people would just throw out their old, obsolete, broken, out of date, epub2 only e-readers (and all ADE 2/3 devices)".

[JSWolf]

Originally Posted by KevinH

Instead of "what is easiest", don't you mean, "what is best"?

Or maybe, "what it should be" if people would just throw out their old, obsolete, broken, out of date, epub2 only e-readers (and all ADE 2/3 devices)".

That would mean everyone with a Kobo Reader would have to get rid of it. That's never going to happen.

[KevinH]

I'd be happy if they just threw out all the epub2 only e-readers!

[RbnJrg]

Originally Posted by ElMiko

Ah, but now we're back to the original issue. This is basically the same code structure as what I initially posted, and the issue is that the float causes the text to break.

Well, try this then:

.bigWrapper {
  text-align: center;
}

.wrapper {
  display: inline-block;
}

.col1 {
  display: inline;
  text-align: left;
}

.col1 img {
  display: block;
  float: left;
  width: 2.5em;
  height: 2.5em;
  margin: 0 5px 0 0;
}

.ib {
  display: inline-block;
}

  <div class="bigWrapper">
    <div class="wrapper">
      <p class="col1"><img alt="" src="../Images/diamant.png"/><span class="ib">LOREM<br/>IPSUM DOLOR SIT AMET, CONSEC</span></p>
    </div>
  </div>

Here you have the output:



Centered block, text aligned to left, no breaks.