Forum Follows Function: Text Formatting 2nd ed.

First of all, here it is from the horse’s mouth.

This kind of document was more necessary in Flarum where the composition window’s buttons didn’t describe or indicate everything you could do, while Discourse’s are a little more descriptive. Also, you can google questions about how to format text. But I suspect you are like me, dear poster, in that you like to read a printed video game manual even when presented with a detailed in-game tutorial, and you may find this kind of thing useful. I didn’t ever use those buttons on the old forum anyway, and don’t intend to start now!


MARKING SPOILERS a.k.a. the greatest good there is

spoilers = [spoiler]text[/spoiler]

expandable tab = [details=“X”]text[/details]

  • X can be whatever you want, and might describe what the tab is concealing, e.g.
    [details=“spoilers for Yakuza 6”]big huge spoiler baby poison description of Yakuza 6[/details] looks like:

    • spoilers for Yakuza 6 (not really, just an example)

      big huge spoiler baby poison description of Yakuza 6

    • open for treasure

      egg on you

LETTERING

bold = <b>text</b>, [b]text[/b], **text**; ctrl/⌘ + b

italics = <i>text</i>, [i]text[/i], *text*, _text_; ctrl/⌘ + i

strikethrough = <s>text</s>, [s]text[/s], ~~text~~

underline = [u]text[/u]; mysteriously angle brackets don’t work

note: leaving an open tag, e.g. <b>text works with angle brackets but not with square brackets. <b>text will appear bold, but [b]text will not. [b]text[/b] will appear bold.

preformatted text/plain text/code = `text`

  • for large blocks, ```text```

default text = \text

difference between plain text, default text, and formatted text

[color=CornflowerBlue]✕[/color][color=HotPink]□[/color][color=MediumAquamarine]△[/color][color=Tomato]○[/color]
or
[color=CornflowerBlue]✕[/color][color=HotPink]□[/color][color=MediumAquamarine]△[/color][color=Tomato]○[/color]
or
[1]

color = [color=colorname]text[/color], same as it was in Flarum. Color names or hex code.

list of color names


link

  • color code for Insert Credit Purple is #9432f7

en dash = two hyphens --

em dash = three hyphens ---

SIZE

large text = <big>text</big>

small text = <small>text</small>

As of this writing, I can’t figure out a way to more granularly adjust text size.

header text = <HX>text</HX>, where X can be any integer from 1 to 6. The larger the number, the smaller the header.

  • otherwise:
text
-

which shows an <H2>-sized header

superscript = <sup>text</sup>; applies to strings, unlike Flarum’s caret

subscript = <sub>text</sub>

note: adding a caret ^ and tilde ~ before or after text will not affect formatting, as it did in Flarum. Rejoice as you may once again abbreviate “approximately” with a tilde!

REPLIES AND TAGGING

Replies do not function as they did in Flarum: a new post may only “reply” as such to one specific, previous post in the same topic/thread. If you want to reply to multiple previous posts, or to posts in another thread, quote replies are what you want.

To quote reply, highlight the text you want to reply to and click Quote to start a new post replying to that text, or Copy Quote to copy it to the clipboard, which you can paste anywhere in a post you’ve already started.

To quote text without attribution (such as when you are linking an article and want to show a block quote):

> at the beginning of a line, or [quote]text[/quote]

MISC

tables = use composition window button, or Markdown table generator

hyperlink = [linkname](https://url.com), ctrl/⌘ + k

footnotes [2]= [^X] wherever you want the note to appear, and X can be anything, as far as I can tell.[3]
Then, in a new line:
[^X]: text, where text is the content of your footnote.

  • footnotes [^X] and [^Y], where X=Y, will display as e.g. [1:1] and [1:2] in the composition window’s preview

image resizing [4] = using the HTML image tag <img src="upload://url.img">, adjust width and height by adding width=x height=y, as in <img src="upload://url.img" width=x height=y>. Specifying values only for width or only for height will resize the image and maintain its original proportions, but specifying values for both will stretch the image.

  • For any image upload ![text|widthxheight](upload://url.jpg), replace text with whatever you want the name of the image to be on mouseover. Adjusting width or height seems to simply erase part of the image rather than resize it.

numerals written as fractions will no longer display as single-glyph fractions, e.g. 3/4 is three characters

horizontal bar = ___ (three underscores)


bulleted list = hyphen, followed by space, followed by text; ctrl/⌘ + shift + 8

- text

  • nested bullets = beneath a bullet point, two spaces followed by a hyphen followed by single space followed by text; two additional spaces per every level of nesting; can nest up to seven levels
  • line breaks stay within bullet margins

numbered lists = number, right parenthesis or period, space, text; ctrl/⌘ + shift + 7

1) text
  • as in Flarum, numbered lists will always ascend downwards, so
10)
9)

appears as

10)
11)

to circumnavigate this, write list as

10.) 
9.) 

etc.


  1. thanks connrrr ↩︎

  2. thanks rejj ↩︎

  3. Theoretically X works with text or numbers, but I’m not sure of what all you can write there. It looks like succeeding numerals in the composition window’s preview pane, and like interactive dots [...] in a published post. ↩︎

  4. thanks Obskyr ↩︎

15 Likes

Since it’s easier to type, and since Discourse recommends it as the primary form, how about putting the Markdown renditions first in those lists? As it stands, the order suggests that using the HTML tags (e.g. <b>text</b>) is the primary form.

I’d like to add to the image section! Two features I find handy:

  • Image title text: ![](upload://url.jpg "Title text here.") or <img title="Title text here."> results in text that appears when you mouse over the image:

  • Resizing an image only by height or width: If you want to limit an image’s height without having to do any calculations, you can use the following syntax: ![|WIDTHxHEIGHT,xNEW_HEIGHT](upload://url.jpg), or vice versa, ![|WIDTHxHEIGHT,NEW_WIDTHx](upload://url.jpg)

    Example…

    ![|690x391,x150](upload://url.jpg) results in:

    (This does require the original size to be present before the comma.)

Though the title text might be a bit nitpicky, hahah: ![blah blah blah](…) makes it the alt text, as opposed to the mouse-over title text. It does appear when you mouse over the image as a sort of “caption” as long as the image is large enough – if you feel that that’s good enough for the guide, the title text might be a bit redundant and just for inadvisably detail-oriented kooks such as myself. …It’s in this reply, if nothing else!


Headers might also be easier to write as # Header 1, ## Header 2, and so on. (Again, a Markdown vs. BBCode distiction.)

Beyond that, I’d also like to mention that unordered lists can also be made using asterisks (*) and pluses (+) – not only hyphens – and a horizontal bar with hyphens (-) or asterisks (*) in addition to underscores. (Perhaps you chose one for conciseness, but I figure I should mention it just in case! I personally happen to use different ones than mentioned in the post.)

Oh! And perhaps it’s worth tossing a line in there about tight vs. loose lists: If you include a blank line between the items in your list, the list will have more space between items.

3 Likes

Is it not possible to put an embedded video inside a dropdown spoiler? When I’m tryin to do this, I just get hyperlinks instead of the usual in-text video. Can anyone help with the markdown for that? (Tried the youtube embed code but that wasn’t right)

This is hot to death. Amazing post. Thanks for putting this all together.

3 Likes

The tags can be nested to increase their effect:
Regular text, small text, smaller text, tiny text…

Regular text, <small>small text, <small>smaller text, <small>tiny text...</small></small></small>

…which isn’t quite the same as we had before where we could specify a point size, but we can emulate how things were before closely enough like this I reckon.

4 Likes

Thank you for all the extra info! I knew I missed some stuff. Tight/loose lists!

Huh, thanks for pointing that out. It works when written in three separate lines, like

[details="video"]
https://www.youtube.com/watch?v=UFEtOa3qGCw
[/details]

I’ll clarify in the OP.

This one’s for you @connrrr

I tried that and it didn’t look like it worked for me, but can see with my eyeballs it ceratinly does in your post! Thanks.

I must be missing something.

video

https://www.youtube.com/watch?v=UFEtOa3qGCw

That’s what I’m getting from your example - to clarify, I’m hoping for it to embed like:

Which just happens automatically when I paste that link in plain text outside a dropdown.

2 Likes

You’re right! I knew what you were asking and thought it worked when I wrote that comment earlier, but it does not.

aw yeah


Those PSX face buttons I fashioned look way different on here than on Flarum. Here’s the post they’re from as viewed on macOS:

The square has rounded corners and the triangle is isosceles when it should be equilateral, and that’s true across Firefox, Safari and Opera GX: the browser for Gamers. Not perfect but close enough, I thought.

The rendering is super variable on Discourse, though. Here’s that raw source again:

[color=CornflowerBlue]✕[/color]
[color=HotPink]□[/color]
[color=MediumAquamarine]△[/color]
[color=Tomato]○[/color]

Here’s how that looks to you:

How they look to me:
Screenshot 2024-04-06 at 12.21.39

Finally, the triangle looks right, but why did the square and circle shrink? After some retooling I got them looking a little better, with a huge caveat. Raw source:

[color=CornflowerBlue]✕[/color]
[color=HotPink]   ⃞ [/color]
[color=MediumAquamarine]△[/color]
[color=Tomato]◯[/color]

How these look to you:

And how they look to me:
Screenshot 2024-04-06 at 12.21.55

The triangle and circle look perfect!! but to do the square, I had to use a combining enclosing character that occupies the same space as characters preceding it. To work around this I added a few non-breaking spaces, which is a serious hack that won’t look good to everyone and might be converted to regular spaces when copied to someone’s clipboard.

(The square also looked and behaved better in my preview. I thought I gave it enough spaces but it’s still eating up part of the .)

The simplest alternative I could come up with was the rounded square again.

Whose source is:
[color=HotPink]▢[/color]

All lined up, here’s how they look to you:

How that looks to me:
Screenshot 2024-04-06 at 13.40.48

The dream is dying!! I wonder if there is a plugin for Discourse that could turn SVGs of these into custom emotes or something.


One day I even tried coming up with sets for Dreamcast, Xbox and SFC too, but scrapped my edit before applying it. I’m going to try to recreate them here for any sicko as into this as I am.

source
[color=tomato]Ⓐ[/color]
[color=skyblue]Ⓑ[/color]
[color=yellow]Ⓧ[/color]
[color=aquamarine]Ⓨ[/color]

source
[color=lawngreen]Ⓐ[/color]
[color=orangered]Ⓑ[/color]
[color=dodgerblue]Ⓧ[/color]
[color=gold]Ⓨ[/color]

source
[color=gold]Ⓑ[/color]
[color=red]Ⓐ[/color]
[color=forestgreen]Ⓨ[/color]
[color=royalblue]Ⓧ[/color]
6 Likes

I love this because I am a nerd for branding and typography.

3 Likes

I’m not sure where exactly this goes, but you can unpin pinned threads on Discourse.


The inverse, however, is not true; you cannot pin arbitrary threads.

4 Likes

I was able to get it working with code like this:

<details>
<summary>Video</summary>

https://www.youtube.com/watch?v=UFEtOa3qGCw
</details>
Video
4 Likes

Re: pinned threads, maybe it’s just cause I’m used to it but I quite like keeping them around. It was annoying me that pinned threads just disappear once you read them, but I found a setting in my user preferences called Automatically unpin topics when I reach the bottom., and toggling that off reverts it to a more traditional forum style.