The Trouble with Spacing and Tags on Steemit

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

In this article, one of the last 3 I intend to write in this series, we explore some of the problems with writing articles on Steemit - problems with both the use of tags and spacing.
triangular warning sign with !

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!

In my previous articles, I have frequently given rules for usage of HTML/MDL tags, and I've always tried to point out problems with writing articles using tags. These "surprises" I encountered while writing often caused a delay of hours or days with each article. This article is dedicated to some general problems you'll encounter.
Mind the gap stenciled next to railway on platform

HTML inside MDL

In other words, MDL tags won't necessarily work within HTML tags, especially octothorps (#), which are very sensitive!. However, if you use only HTML tags, such as header tags (e.g. <h1></h1>) with <center>, either can be "outside". You'll have to experiment sometimes to find out what works. Both of the below work!

center inside head

head inside center

Sometimes, tags interfere with each other in other ways. For example, if you use the <hr> (horizontal line) tag, you must put a blank line after it, otherwise it will disrupt formatting for x number of lines and paragraphs; for example, the octothorps on the line after the hr tag won't work. Example:

<hr>
###### doesn't work because of hr tag on line above ######

###### doesn't work because of hr tag on line above ######

If you use the <br> tag, sometimes MDL won't work if there's not a blank line between the line break tag and the line with the MDL. In the lines immediately above this, I had two use TWO br tags just to get one blank line, and the blank line I inserted after them was there because otherwise they neutralized an MDL tag in this paragraph. 😱 Sometimes, certain HTML tags will completely disrupt the rest of the article, even if you've added a blank line and aren't using a mixture of HTML and MDL and, other times, things just seem to misbehave without any obvious explanation. This has been mentioned in some of my previous articles.

Spaces and Empty Lines

The first thing you need to know is that Steemit's editor doesn't like extra spacing. It strips extra spaces - both between characters and between lines! 👎
Single space
Double space
Triple space
The above is typed as below:

Single space
Double  space
Triple   space

Using single backticks (`) doesn't even help!
10 spaces were placed after the number 10, but only one shows.
Single backticks don't help:
10 spaces were placed after the number 10, but only one shows.
This is what I REALLY typed:

10          spaces were placed after the number 10, but only one shows.

This one won't show extra spaces even though I used many!

This    one   won't           show            extra      spaces    even    though        I     used    many!

Steemit also doesn't like blank lines very much. It will usually display ONE blank line, but not more than that.

No blank line between
1 blank line after

2 blank lines after


3 blank lines after



See?  No, of course not!  Steemit won't display them!

No blank line between
1 blank line after

2 blank lines after

3 blank lines after

See? No, of course not! Steemit won't display them!

Steemit is so stingy with blank lines, even if they're needed, that I had to insert some line break tags in between some of what I wrote in this and other articles because Steemit removed them! 😠

As an aside, proper spacing when using HTML and MDL tags is not a glitch or flaw - that is part of programming, and most programming languages have very specific rules about spacing. RPG is entirely dependent on spacing, for example, while most other languages

I usually spend hours, and sometimes days, preparing articles, and it'd be nice to actually earn more than a tuppence for my efforts. Thank you!

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!