Give easy ways to add different types of horizontal lines

[damithc]

Current: ----------------- results in a <hr>

Suggested: we can also support other types of lines
e.g.,
============= -> double line
............ -> dotted line

[tlylt]

Hi @damithc, is this issue still relevant? If so I would like to have a go at this.

[damithc]

Yes @tlylt

[tlylt]

Hi @damithc, I think supporting different types of horizontal lines should be doable.

• For ===, it will be something like:

Text Before

===
Text After^^^

• Result:
  

As for the dotted line, I am not sure if using ... as the marker is a good choice. This is because the following might be a reasonably common scenario when writing prose:

Some story text

...
Some story text afterward

I am not sure if the use of '...' will be confusing for writers (if my assumption above is valid).
The alternative marker that I can think of is '·', but this symbol is difficult to type and may therefore make this feature inconvenient. May I get some suggestions on this matter pls?

ps: if any of the active devs have any thoughts on this please feel free to comment as well :)

[damithc]

@tlylt I'm wondering if we should go for something like === ====== i.e., symbol*3 space symbol*1+

1. less chance of being confused with other legit text
2. allows a more visual representation of the line in the source code itself i.e., it appears like a divider to both the author and the reader e.g.,

___ ______________________________________

normal line

--- ----------------------------------------

dashed line


=== ======================================

double line

... ......................................

dotted line

### ######################################

thick line

But I'm not sure if this complicates the implementation too much. What do others think?

[tlylt]

For the current implementation of horizontal lines by Markdown-it(which follows the CommonMark spec), all following cases will result in a <hr /> tag:

I feel that on top of implementation details, perhaps we should stick with the existing standard practices? So when a divider symbol is used, it should work as long as it is

• not indented (or not in a paragraph)
• have 3 or more in a line (can have space in between)

That's why I am thinking if we can use a separate symbol to translate to a styled <hr /> (alternatively a <span></span>).
There is no issue with ===,
for

• ###, might conflict with the heading stuff
• ---, this is quite common in markdown syntax, not sure if we should touch
• ___, this is equivalent to --- in current Common Mark spec
• ..., this might be confusing for some, but perhaps we can use it as it is quite a good symbol for dotted line

Also just a note, the existing hr rule is applied to ---, ***, ___.

---

Edit: some good examples on thematic-break in the CommonMark Spec here

[damithc]

I feel that on top of implementation details, perhaps we should stick with the existing standard practices? So when a divider symbol is used, it should work as long as it is

• not indented (or not in a paragraph)
• have 3 or more in a line (can have space in between)

Sounds good.

That's why I am thinking if we can use a separate symbol to translate to a styled <hr /> (alternatively a <span></span>).
There is no issue with ===,

Something like ---{.line-dotted} ---{.line-dashed} etc.?

• ..., this might be confusing for some, but perhaps we can use it as it is quite a good symbol for dotted line

There is a legit reason to use un-indented ... in a line though, as an ellipsis.

[tlylt]

Something like ---{.line-dotted} ---{.line-dashed} etc.?

• ..., this might be confusing for some, but perhaps we can use it as it is quite a good symbol for dotted line

There is a legit reason to use un-indented ... in a line though, as an ellipsis.

---{.line-dotted} is a good option too.
Perhaps we can use --- {.line-dotted} with a space in between.
We can make use of the already supported syntax to add some convenient classes for styling the <hr> element. Then in this case there is no invention of new syntax, like the excerpt from the user guide:

Something like:

• ---: <hr/>
• --- {.line-double} : <hr class="line-double" />
• --- {.line-dashed}: <hr class="line-dashed" />
• --- {.line-thick}: <hr class="line-thick" />

I think the only con that I can think of is that it is not as convenient.

[ang-zeyu]

I think reusing the {.line-double} syntax is the way to go (or similar - e.g. attributes {double} - no .). There might be some line types that can't be adequately conveyed by === / ... / etc symbols. There's may also be the issue of exhausting all these types of symbols too quickly.

I think the only con that I can think of is that it is not as convenient.

How about loosing the line- prefix for a bit more convenience?

--- {.double}
--- {.dashed}
--- {.thick}
...

---

I think another concern is also how / whether we should allow specifying how "thick" line-thick gets.

Currently thinking --- {.thicker-3} / --- {thick=3} or similar (also allowing default valueless {thick} syntax)

[damithc]

How about loosing the line- prefix for a bit more convenience?

--- {.double}
--- {.dashed}
--- {.thick}
...

Sounds good. Any possibility of throwing in color options as well (using the bootstrap default colors primary info etc.)?