Wrapping text around an image

[badgermaniac]

First, thanks for the awesome tool.

I have been inserting images into my docs and positioning them in various ways. However, I haven't figured out how to wrap text around an image.

I have cut out my images so they have transparent backgrounds, leaving the border irregular as oppose to rectangular, but now I want the text to "fill in the gaps" (see pg. 125 in PHB).

Any code help would be appreciated. Thanks.

Additional Details

Share Link :

or

Brew code to reproduce :

Click to expand

PASTE BREW CODE HERE

[BaronMurph]

Haven't actually figured out how to add multiple spaces (or, like, a horizontal in-line spacer) myself, so I'll admit to leaving a comment here in part for selfish reasons in case anyone does.

What I can tell you, however, is that you can add line breaks without spaces in front (along the lines of https://i0.wp.com/www.critical-hits.com/wp-content/uploads/2014/08/Bulette.jpg), just by adding a double space at the end of a line.
So just like this with two spaces over there -->
And then this shows up without the customary spaces in front. Note that code-wise this is on the next line, not two lines down - I only pressed the Enter key once, so to speak, not twice.

[badgermaniac]

Thanks. This helps for aligning images on one side of text, so it is s start.

[BaronMurph]

Hell yeah, found it.
& nbsp; (without the space in between & and n) adds a single space, and you can just keep adding 'em. It'll look ugly on code ('cause you need to keep adding it, so two spaces would be & nbsp;& nbsp; and three & nbsp;& nbsp;& nbsp;) but it works.

    <--there's three & nbsp;'s there

Hope that's what you were looking for!

[Biotronic]

The solution you really want for this is CSS's shape-outside. Here's an example of how to do it:

http://homebrewery.naturalcrit.com/share/Hkgyq2eJ-

[Biotronic]

This report could be turned into an enhancement with a bit of javascript and a CSS class:

$(".wrap-image").each(function() {
    if ($(this).attr("src")) {
        $(this).css("shape-outside", "url("+$(this).attr("src")+")"); 
    }
});

This will set the 'shape image' of any image to its image, and thus automatically do what I did in the previous post.

[calculuschild]

This might be a candidate for a snippet... or possibly added to the FAQ.

[ericscheid]

Linking to FAQ issue #810

[ericscheid]

Tagging as #help-wanted to get a tute/faq written, untagging as #feature as not a development feature.

[ericscheid]

Just in case that example brew by @Biotronic goes away or gets broken, this is what the source brew is:

<img src="https://i.imgur.com/MloXv1M.png" style="shape-outside: url('https://i.imgur.com/MloXv1M.png'); float: right;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The pertinent bit is adding style="shape-outside: url('the-image-url'); float: right;" inside the <img ..> tag.

The effect can also be done with <style>...</style> and some clever selector targeting.

[Biotronic]

Using <style> would be much nicer, if I understand correctly. My immediate idea was to use shape-outside: attr(src);, but attr() is not very well supported. In a perfect world, this would Just Work™:

  .wrap-image-left {
    shape-outside: attr(src);
    float: left;
  }
  .wrap-image-right {
    shape-outside: attr(src);
    float: right;
  }