Things Steemians can and cannot do in HTML Mode Posting
Steemit is extremely picky not only on what type of formatting it accepts, but also on the extraneous formatting that it rejects. This translates to a slow process for HTML content creators. You will need to know these rules and abide by them. Otherwise, you will need to spend a long time editing your post, doing a lot of trial and error, and jumping through the right hoops for Steemit.com to bless your hard work. I tested these functions on this test post.
Bulleted Lists Work:
- Tables are allowed, but no colors, no centering/right alignment (See below)
- Headings work pretty well. Use these for large/small headlines as a replacement for font sizes
- Bold and Strong Emphasis works
- Italics do not work, but Emphasis does work (important distinction)
- You are not allowed to underline anything
- The font tag does not work at all, so no color or typeface changes
- The style element won't work (e.g. a list item cannot have a style)
- Centering text or images is possible, see below!
Strikethroughworks- Non-breaking Spaces --> <-- work ( )
Codeworks and it makes text shaded gray-
Preformatted text sort of works
- <div> The DIV code is allowed, but needs more testing! </div>
- Most kinds of text, including emoji 😄 and extend’ed character’s™ work
- Subscripts and superscripts work
- No css or javascript
- The photos are pulled from your website and stored at https://steemitimages.com/ or (the parser doesn't like this link -->) https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/
- Photographic trickery does not work. You can't switch a picture after posting it and trick Steemit. I tried it.
- Large photos are resized to fit Steemit's ideas of size constraints
- Animated GIFs work
- I noticed that my small animated GIF had no processing done to it. (It was identical)
- But a PNG I used in my test was tampered with and had a slightly smaller file size when displayed
- Any reasonable use of a STEEM username will be detected, parsed, and turned into a link to the user's Home aka Blog page (Example: @uruiamme but NOT:@uruiamme)
- Correctly configured standard in-line links are left as is
- Photos can have links, but they cannot have borders to show you that they do
- Youtube embedding works as intended. You click a video's share button and obtain the embed code
- Hidden HTML comments do not work (they are ignored)
<div align="center"> Center example (may work sometimes) </div>
>
Test [div class="pull-right"] Text (Right justify) This is stuff placed on the right side, right side text, here I am on the political right!
<<center> Center example (should work)
The headrule works (horizontal line)
Numbered lists work
- Apple
- Pear
- Cherry
- Mango
- kumquat
Hello.
Indented. Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. My @uruiamme link Cras bibendum ex vitae ex molestie suscipit eleifend ac lectus. In quis pulvinar diam, ut finibus quam. Maecenas lobortis justo nunc, non vestibulum orci feugiat at. Mauris et hendrerit ante, nec consectetur mauris. Vivamus ex tortor, lacinia vitae lorem condimentum, sagittis molestie diam. Quisque nibh turpis, mattis tincidunt commodo vitae, tempor nec mauris. Nunc nisi ex, tempus in venenatis ac, accumsan id ex. Nam magna dui, rutrum ac quam id, ultrices viverra nibh. Pellentesque ac eleifend nunc, nec congue sapien. Fusce lobortis erat ipsum, non scelerisque nisl volutpat sed. Donec faucibus efficitur lacinia.
| lobortis | feugiat | Vivamus |
| Center Trick!! | ||
| Quisque | Quisque | Nam magna dui |
| lobortis | feugiat | Vivamus | |
| mauris stuff | 12468 | accumsan | |
| Quisque | Quisque | Nam magna dui | Funny words |
| Hello | Bye | Good | |
| Night | See | You | |
| Later | Alligator | After | awhile |
| crocodile | 7654321 | ||
| who's laughing now, I know I'm not laughing, this is not fun to be stuck in the bottom row of a table by myself for a test. |
| lobortis | feugiat | Vivamus |
| mauris stuff | 12468 | accumsan |
| Majority seniority | Smith shoes | Keep it real, brother Henry |
| Quisque | Quisque | Nam magna dui |
Here's how you do it. First, use an HTML editor. Now strip off all of the tags that Steemit doesn't like. This includes these:
The removal of the <BODY>, <HEAD>, <TITLE>, and <SPAN> TAGS is super crazy. The Steemit software is very difficult in this manner. Not only that, pretty much all HTML code generators will produce these tags in order to be valid.
I cannot understand the prohibition on large/small and colorful text.
- HEAD
- TITLE
- META
- Long lines of code without line breaks seem to give the parser a problem
- TT
- Many Ampersand codes (&XXXX;) and tags are parsed wrong
- BODY
- BLINK
- FONT
- SPAN
- I
- BIG
- SMALL
- U
Case is not sensitive, although all modern HTML is written in lower case and has been for about 15 years.
Centered Heading Level 3
Justify with [DIV CLASS="text-justify"]
(Justified Text) Lorem ipsum dolor sit amet, consectetur adipiscing elit. My @uruiamme link Cras bibendum ex vitae ex molestie suscipit eleifend ac lectus. In quis pulvinar diam, ut finibus quam. Maecenas lobortis justo nunc, non vestibulum orci feugiat at. Mauris et hendrerit ante, nec consectetur mauris. Vivamus ex tortor, lacinia vitae lorem condimentum, sagittis molestie diam. Quisque nibh turpis, mattis tincidunt commodo vitae, tempor nec mauris. Nunc nisi ex, tempus in venenatis ac, accumsan id ex. Nam magna dui, rutrum ac quam id, ultrices viverra nibh. Pellentesque ac eleifend nunc, nec congue sapien. Fusce lobortis erat ipsum, non scelerisque nisl volutpat sed. Donec faucibus efficitur lacinia.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
PLEASE COMMENT BELOW IF YOU HAVE MORE TRICKS AND INSIGHT INTO THIS PROCESS. I'd like to see if some of these restrictions can be minimized to help streamline content posting. I don't like all of the extra parsing and conformation to the Steemit design elements and editor quirkiness.
I can name some better places to post rich content, especially the BB code forums and the more robust blogging software. Do you Steemian appreciate this how to? And would you like a better interface?
COMMENT/LIKE and steem it on!! I am planning to write a more specific how-to that will get you up to speed on what tools you will need to do this fast!
Check out my Dangerous Introduction post!
This is a great post @uruiamme. I am gradually learning the little tricks needed to spiffy up posts and make them more presentable. I am looking forward to your more in depth posts on the tools to do it quicker.
UV'd and following
I am an expert in HTML coding (see my Intro posts!) but this is difficult to master on STEEM. Try some things out and you can ask me for any tips.
You can also use divs to create column effects. Standard line breaks also work just fine.
An example of both in use: https://steemit.com/art/@holoz0r/sleep-as-death-in-art-a-study
Unfortunately, you can't do image captions very well. :(
Do you paste HTML in or use an editor? Or just use occasional HTML tags?
I just did a new post and used a DIV. I think it was accepted. <div align="center"> Centering example </div>
Thanks for the tip! About to update it!
You can also use pull-left and pull-right to great effect! :)
What codes are you referring to? I did see an inline picture once that may have been aligned to text-center, rather than the normal bottom alignment.
Div class="pull-right" (Image) end div will get you effects like those in my sleep as death article :)
Im on mobile at the moment so the images dont look right. If i remember when im home tonight ill check again and clarify!
I tested it. That has an interesting effect, because you cal permit text to flow around the object pulled to the right. I edited the post above to show the basic case, not the flowing text.
This goes right long with my recent blogs. Great post and thanks for helping others out. Upvoted and following!
Awesome. Take a look at my intro posts... they will knock your socks off. LOL
Very helpful.
WOW! @uruiamme
Very Interesting!
You have been PROMOTED FREE for using the "howto" TAG (hashtag)
https://steemit.com/promoted/howto
Thank you@uruiamme. Even though Steemit says you need to host your own image, you are correct. They do upload it and keep it somewhere for you. I was hoping to use a graphic as my signature, then if I was to update my signature all I would need to do is change the graphic and all my posts signature links would display the new graphic. But nope doesn't work that way. Can we put image in comment? Let me see. It seems to distort the file. Compresses the width. My car seems shorter. Maybe pics need to be square not rectangle in comments. posted ok in a post.
There are a lot of things going on with the Steem photos and HTML tags. Beware.
You can subscribe and I will tackle this issue more as time permits. I am a 20-year expert in web development (see my intro posts, still in 7-day period.)
I have another post that I am preparing on HTML issues.
Great information! There I was going crazy trying to figure out why I could not change the font, or text size... or color for an click to tweet anchor link... This post helped me to quickly determine this is not possible in Steemit. I much appreciate the information.
Great write up, you sure did a good research work @uruiamme....
I spent about an hour figuring out why my css color attribute did not work... Well, I guess we are limited in the way we edit stuff.
Hi
Do you know a way on how to insert spreadshet into a steemit post?
I tried to use an embed code <iframe .... </iframe from Publish to the web option in Google sheets, but it didn't work and gave me this "Unsupported https:// ... "