Markdown and image alignment

Question

I am making a site that publishes articles in issues each month. It is straightforward, and I think using a Markdown editor (like the WMD one here in Stack Overflow) would be perfect.

However, they do need the ability to have images right-aligned in a given paragraph.

I can't see a way to do that with the current system - is it possible?

Solution 1

You can embed HTML in Markdown, so you can do something like this:

<img style="float: right;" src="whatever.jpg">
Continue markdown text...

Solution 2

I found a nice solution in pure Markdown with a little CSS 3 hack :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

Follow the CSS 3 code float image on the left or right, when the image alt ends with < or >.

img[alt$=">"] {
  float: right;
}
img[alt$="<"] {
  float: left;
}
img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}

Solution 3

Many Markdown "extra" processors support attributes. So you can include a class name like so (PHP Markdown Extra):

![Flowers](/flowers.jpeg){.callout}

or, alternatively (Maruku, Kramdown, Python Markdown):

![Flowers](/flowers.jpeg){: .callout}

Then, of course, you can use a stylesheet the proper way:

.callout {
    float: right;
}

If yours supports this syntax, it gives you the best of both worlds: no embedded markup, and a stylesheet abstract enough to not need to be modified by your content editor.

Solution 4

I have an alternative to the methods above that used the ALT tag and a CSS selector on the alt tag... Instead, add a URL hash like this:

First your Markdown image code:

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

Note the added URL hash #center.

Now add this rule in CSS using CSS 3 attribute selectors to select images with a certain path.

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

You should be able to use a URL hash like this almost like defining a class name and it isn't a misuse of the ALT tag like some people had commented about for that solution. It also won't require any additional extensions. Do one for float right and left as well or any other styles you might want.

Solution 5

I like to be super lazy by using tables to align images with the vertical pipe (|) syntax. This is supported by some Markdown flavours (and is also supported by Textile if that floats your boat):

| I am text to the left  | ![Flowers](/flowers.jpeg) |

or

| ![Flowers](/flowers.jpeg) | I am text to the right |

It is not the most flexible solution, but it is good for most of my simple needs, is easy to read in markdown format, and you don't need to remember any CSS or raw HTML.

View more solutions

Comments

[JGallardo]

Why not just ask the question without the "I'm helping out a friend with a non-profit site that publishes articles in issues each month"?

[jazzy]

@JGallardo Because I wanted to make it clear I didn't have complete control over the system, nor did I have the ability to purchase any type of solution. I agree that I could have phrased the question differently.

[ma11hew28]

Clean it up & standardize by strippnig the unnecessary div and adding a closing slash to the img tag, respectively, i.e. `<img style="float:right" src="whatever.jpg" />

[yoyo]

Just noticed the OP asked for right alignment -- I was trying to center an image when I stumbled onto this answer.

[Slipp D. Thompson]

I'm going to actually side with @yoyo— <center> does make sense. It's deprecated from HTML because HTML is supposed to describe the content only; styles should be in stylesheets. However, Markdown has a different intent: to include enough styling necessary to convey a textual message, and leave the rest up to the renderer/site. <center> seems so much more natural than thinking about CSS widths, floats, margins…— I'd even go as far as having a Markdown parser replace <center> tags with appropriate CSS-backed elements, much like how it currently intelligently figures out paragraphs.

[esengineer]

Instead of div I prefer using span for inline indenting. For full paragraph centering div is good, or even simple p.

[benweet]

This work better with some sanitized interpreters like the GitHub's one: <img align="right" src="whatever.jpg" />

[CaptSaltyJack]

@MattDiPasquale Closing slashes are not necessary. That's XHTML, not HTML.

[Eliot]

I like this style, very markdown-y. Too bad it doesn't work on github (not yet anyway.)

[Ege Rubak]

I have just tried this syntax at GitHub and it appears to work now.

[mamakurka]

By the time you write all of this: !Flowers{: .callout} you may as well have written <img src="/flowers.jpeg" class="callout"/>

[user3438601]

This is an interesting hack, but it's misusing tables for layout. Welcome to 1999.

[gerwitz]

I agree, but Markdown is often chosen for users that are not *ML-literate so there's no reason to prefer HTML over any other arbitrary syntax.

[gerwitz]

("No reason" is over-simplifying of course. There are many UX reasons you might want your editors to either get closer or farther from the final HTML rendering. Or you might be averse to introducing an HTML dependancy in your content, if you've chosen Markdown to abstract the rendering technique.)

[Martin DeMello]

i tried this to embed an image in a ghost blog post; using <div style="float:right"><img ...></div> flowed the following paragraph around the image correctly, whereas <img style="float: right" ...> put the paragraph and the image in side-by-side boxes.

[Kayla]

For the github flavored markdown, add a line with |-|-|. It tells the parser that there is a table, and the first line is a header. Ex: goo.gl/xUCRiK

[fiza khan]

I tried this but it is now working.. image is aligned but the html text displays.

[Joseph Tesfaye]

Where should the CSS be placed in the MkDocs directory? @YannDuran

[Yann Duran]

@IvanHuang just make sure that you add an extra.css file as per the MkDocs documentation, and put the css in that file.