Clever Geek Handbook

Awkward wrap line around the image

Probably the easiest way to explain what I need with an image:

enter image description here

When I float the image, the text runs over it, which is great. BUT, depending on the amount of text and the size of the image, I often leave these awkward bits behind. In this case, awkward text will look better in the column next to the image.

I could add a lower edge to the image, depending on how awkward the text is, but in responsive design, the image shrinks and the text stays the same size, so there is no way to do this for every image at every breakpoint.

I can use "overflow: auto" on all paragraphs to create a new layout context and stop the text from flowing completely. BUT I want the text to float when there is enough text, and again I am not gaining control over the final output.

My feeling is that unless there is overly complex JS that can work on this (and can handle screen resizing on a responsive site) then there is no solution. So my question is, how do people deal with this? Ignore it? Use JS?

thank

+3


source to share


2 answers


I don't think you can do this in CSS. However, I don't think JavaScript is too complex. I would recommend using element.getClientRects()

one that returns a list of TextRectangle objects. For inline elements, each TextRectangle object is a string of text.

If you notice that the left offset of the last TextRectangle is different from the left offset of the penultimate TextRectangle, you know that the last line is "lagging" and can adjust the bottom edge of the image to the height of one TextRectangle ( bottom - top

).



getClientRects

was standardized in CSSOM, but may have buggy implementations in some browsers.

From a more personal point of view, I would say that I think it looks good as it is, and I probably wouldn't bother with it if I were you.

+3


source


The simplest fix for this is to add another DIV around your text and a float that's left too.

So your html will look like this:



<div>
    <img src="">
    <div>
        My text...
    </div>
</div>
0


source






More articles:


All Articles