Is it possible to wrap text around images?


(Drew) #1

I have a really tall but skinny image I want to display directly in a post, but it’ll be a big waste of space unless I can put multiple lines of text beside it. Is there a way to have Discourse format text around images so it ends up like this:


#2

You need a float (right in your case) to do that, I did a plugin with some basic formatting options if you want, it’s pretty easy to use :


(Dean Taylor) #3

Floating is one thing, i.e. wrapping text around the rectangular area of an image…

… however you have pictured wrapping text around the non-transparent areas or shape of an image.

Some browsers support CSS Shapes Spec however browser support for CSS Shapes is really poor: Can I use... Support tables for HTML5, CSS3, etc

Additionally this requires some complicated markup.

A good introduction to the code for CSS Shapes here:
http://www.html5rocks.com/en/tutorials/shapes/getting-started/


I don’t believe the shapes will be reasonable to do for Discourse, but “floating” as @steven has already mentioned is likely the “best” method currently.


(sujato) #4

I had the same problem and found a simple hack. Put * or _ around your image, then it can be selected via CSS. The logic is that you’re unlikely to want to italicize an image. Someone might use an emoji in an italicized passage, though, so we make sure they’re unaffected.

.cooked em img:not(.emoji) {float: right}

Here’s an example. It works great, but it is, you know, a hack, so don’t blame me!