How to Change Your Font Style on Steemit

reveurgam (60)in #steemit • 6 years ago (edited)

Today's article is about how to make your font bold, italics, superscript, subscript, strikethrough and combinations of those. I have yet to find a functioning method for underline.

If you're trying to add some "style" to your articles on Steemit, there are some choices from hypertext markup language (HTML) and markdown language (MDL) that you can use. Each of these items is called a "tag"; the one before the text is an opening tag, and the one after the text you're styling is a closing tag. Certain tags do not need both as they are self-closing. Tags within <> are from HTML. Unfortunately, those of you who have studied HTML and MDL may be frustrated because only certain tags from each work. Here are a few that I figured out for you, although I STILL don't know how to underline. In each article, I'll share some tips for you!

All of the following require an opening and closing tag. *: Note that I had to add a space after each "<" (e.g. "") so that you can see the HTML tags. You'll need to remove the space (e.g. ""). I also added an extra space before and after the text - this was just for ease of reading in a table and doesn't need to be used.

Result	HTML Code*	HTML Code*	MDL Code	MDL Code
Bold	< strong> strong tag < /strong>	< b> bold tag < /b>	asterisks	__underscores__
Italics	< i> italics tag < /i>	< em> emphasis tag < /em>	asterisk	_underscore_
*Bold Italics*	< b>< i> bold & italics < /i> < /b>	< em> < strong> emphasis & strong < /strong> < /em>	*asterisks*	___underscores___
*Bold Italics*			_combo1_	__combo2__
^Superscript\|	< sup> superscript tag < /sup>
_Subscript\|	< sub> subscript tag < /sub>
~~Strikethrough~~	< del> delete tag < /del>	< strike> strike tag < /strike>

Notes

You can order tags in whichever way you want, so text will yield the same result as text. The order for formatting tags is not important; other tags, however, have a specific order, such as table tags.
The emphasis and strong tags are interchangeable with the italics and bold tags, respectively.
There are technical reasons why the emphasis and strong tags are preferred over the older bold and italics tags, and this relates to the browser's (and other programs) ability to interpret the coding. The same is true of the delete tag over the strike tag.
I only showed bold italics, but you can do other combinations, like ~~strikethrough italics~~, ^{superscript strikethrough} and _{bold subscript}. Heck, you could do ^{bold italics strikethrough superscript}! 😎
It is important to "nest" tags properly because they may not work correctly if you don't.
5.1 Think of this as "first in last out" for warehouse inventory. Whichever tag you use first is the last one you close, and so on:
5.2 <tag1><tag2>...<tagx>proper nesting</tagx>...</tag2></tag1>:
- Correct
- Incorrect
Although "bad nesting" may work, the tags may not work the way you expect. 😵 For example, if I don't nest the bold and italics tags correctly, the formatting will even hit everything outside the closing tags! ^{bold italics strikethrough superscript! 😎}
Some things will negate the effects of bad nesting, such as a list item of the same or greater power afterwards, but not all tags have the power to negate formatting caused by bad nesting!
Example:

Credits:

If you're looking for an all-in-one guide, you might find The Ultimate Guide To Formatting On Steemit (Markup and Markdown) by @sisygoboom useful. It contains a lot of info, briefly presented, and I even found a couple of new things!

A great deal of this involved experimenting, both with what I know about HTML and markdown, and because not everything in the articles I read worked.
As I was working on this, I found this article How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor by @steemitguide. It's not as comprehensive as I needed, but it did remind me about divs and how to make columns, and the first 2 links to other articles (at the bottom of it) may help you. The third I found to be useless, except I got the "center" tag from it. Some of the info in the 2 other articles works, some doesn't, including the stuff about the Raw HTML editor.

I found this article to be difficult to use, and not everything works, but I gleaned some of the above content from it: Steemit Beginner Tips : Basic Guide on how to Adjust and Edit Fonts in Post. If you don't see something from here in my article, that's because it didn't work or I couldn't figure it out.

The article Steemitguide: Tutorial on How-To use Unicode Characters on Steemit Raw HTML Editor ! Includes Cheatsheet on Smileys, Icons and Symbols, by @steemitguide, has some outdated info, but it was where I got the emoticon codes from and, by looking at the source code, I was reminded about using tables.

If you appreciate this article, please upvote/like, resteem/share and share it to Facebook, Twitter, Reddit, LinkedIn and wherever else you can!