Formatting Quirks of Steemit ============================

![typesetting image](https://cdn.pixabay.com/photo/2015/11/07/11/08/printing-plate-1030849_960_720.jpg)

Steem makes a few additional formatting options available, but they're not without their quirks. I'm trying to capture the ones that I know about here. Basically this is another self-serving post because I keep forgetting this stuff and if I put it here it will help to reinforce my memory as I type it up, and when I start to forget it I can easily find my post about it. Generally I forget what each style setting is called, view the page source for a post, locate the `.css` file and then search it for `Markdown`. This post will be much faster for me, and maybe it will help others, too. I know there a like a billion "How to format your stuff on Steemit" posts, but they tend to not cover all of these details.

Center ------

You can center stuff in your post with the HTML `` tags. For example, this is the correct way: ![image alt text](image.png) ### Center tag Quirks Don't leave any extra new lines between the closing `` tag and the last element that needs to be centered. If you do, there's a good chance that the text throughout the rest of your document will be aligned center, no matter what other formatting you try to add. And this will cause everything else on the page to be mysteriously centered: ![wrong image](image.png) **Note that this quirk is exactly the opposite of the `

` tag quirks!** So, if you want to center something, make sure that there is no blank line between the stuff that is being centered and the closing `` tag.

Pull-Left, Pull-Right ---------

As you may have discovered, you can use `

` tags in your post to make stuff 100% more awesome. With `

` tags you can do things like have text that wraps around an image or have text that is pulled to one side. This allows for some cool effects, like having an image on one side and text on the other, or even having two columns of text next to each other. It's generally awesome. The way this is accomplished is you put in a `

` tag and assign its `class` to either `pull-left` or `pull-right`. For example, the text at the beginning of this article used a `pull-left` on the image and then let the text flow naturally around it on the right. Here's how I lined up my text at the beginning of the article:

~~~~ {.mkd}

![typesetting image](https://cdn.pixabay.com/photo/2015/11/07/11/08/printing-plate-1030849_960_720.jpg)

Steem makes a few additional formatting options available, but ... ~~~~~~~~ ### Pull-left, Pull-right Quirks If you don't have an empty line between your opening `

` tag and you put an image in your `

`, the Markdown formatted beginning of the image will be displayed in a rather ugly fashion right next to the image instead of behaving as expected. This is a bit hard to explain and it was probably hard for you to read, so here's a screenshot to demonstrate.

This is the code that would result in the wrong thing happening:

![av2.png](av2.png)

And here's what that would look like: ![illustrated broken image](https://steemitimages.com/DQmfXq9jBTh3DaLA7DZGUVW9wybPzpDsGr9Lt9DyiSNMHtg/wrong.png)

Text-justify -----------

This is really the same as the aforementioned pull left/right quirk, but I have trouble remembering the name of this one and there's a tiny bit more I wanted to say on the topic. So, you can justify text with a `

` tag in much the same way you can do the left and right pulling. For example, I made this paragraph justified by doing this:

There's a tiny bit more to say about the flexibility of `text-justify`. If you use it on an outer `

`, you can still have inner `

`s that are pulling left or right, and they will contain justified text. Don't believe me? Scroll back up to the top of my article and notice that the text flowing around the image is justified...

### Text-justify Quirks

Just like the pull left or right, you *must* include an extra line feed before you put in the actual text being wrapped by the `

`. If you don't, none of the markdown in that section will be interpreter and it will look like crap. I had this problem with a few posts. I think I managed to go back and correct them all before they became immutable, but wow, what a PITA.

Footnotes --------- TL;DR don't use them.

Markdown supports footnotes. The Markdown post preview used by Steemit supports footnotes! If you try to use a footnote it will look awesome in the preview! And when you try to publish it will fail with a mysterious message. You'll have to remove the footnote before you can publish. As a work around, you can fake a footnote by using the `_{` or `^{` HTML tags. For example, if I wanted to make a footnote regarding the image¹. You'll notice it's not a link to the footnote below, because it's not a real footnote. It's a pale imitation. If they ever update the engine to allow it, I hope someone lets me know, because it would really be nice for linking sources.}}

Wordwrap, WTF ------------- TL;DR paragraphs have to be on a single line.

Most Markdown engines that I use (yeah, steemit's the only broken one I know of, actually) will treat blank lines in a very special way. And by that, I mean they completely ignore blank lines when you have a paragraph of text. So, in other platforms using markdown, I would wrap columns to about 80 characters. On Steemit, I have to modify everything that I write so that entire paragraphs are on a single line. WTF...

Summary -------

So yeah, here's yet another post about formatting stuff on Steemit. I'm posting it because it's easier for me to find my own posts than it is to google a half dozen other people's stuff that doesn't seem to have all of these details in one place. Topics covered here included:

* DIV tags must be separated from content with a new line * CENTER tags must **NOT** be separated from content with a new line * bunch of features no one cares about aren't supported (sane word wrapping and footnotes) 1. Image sourced from [Pixabay](https://pixabay.com/en/printing-plate-letters-font-type-1030849/)