From b16ed6629d4f5e69d40c5d6a2f26936d3a92e371 Mon Sep 17 00:00:00 2001 From: Mario Pietsch Date: Fri, 3 Mar 2023 22:57:21 +0100 Subject: [PATCH] Docs: Improve Formatting in Wikitext (#7320) * improve Formatting in Wikitext * formatting add more info about semantic meaning * back to 1 tiddler Formatting in Wikitext * single backtics are used for code - fix typo --- .../wikitext/Formatting in WikiText.tid | 63 +++++++++++++++---- 1 file changed, 52 insertions(+), 11 deletions(-) diff --git a/editions/tw5.com/tiddlers/wikitext/Formatting in WikiText.tid b/editions/tw5.com/tiddlers/wikitext/Formatting in WikiText.tid index b38f2b030..7ffb4e497 100644 --- a/editions/tw5.com/tiddlers/wikitext/Formatting in WikiText.tid +++ b/editions/tw5.com/tiddlers/wikitext/Formatting in WikiText.tid @@ -1,19 +1,60 @@ caption: Formatting created: 20131205155959399 -modified: 20220513120211686 +modified: 20230303215447403 tags: WikiText title: Formatting in WikiText type: text/vnd.tiddlywiki -Available character formatting includes: +!! Overview -* `code` for `code` (<<.icon $:/core/images/mono-line>>), alternatively ``double backticks allow `embedded` single backticks``

-* `''bold''` for ''bold'' text (<<.icon $:/core/images/bold>>)

-* `//italic//` for //italic// text (<<.icon $:/core/images/italic>>)

-* `__underscore__` for __underscored__ text (<<.icon $:/core/images/underline>>)

-* `^^superscript^^` for ^^superscripted^^ text (<<.icon $:/core/images/superscript>>)

-* `,,subscript,,` for ,,subscripted,, text (<<.icon $:/core/images/subscript>>)

-* `~~strikethrough~~` for ~~strikethrough~~ text (<<.icon $:/core/images/strikethrough>>)

-* `@@highlight@@` for @@highlighted@@ text (no editor toolbar button), see [[Styles and Classes in WikiText]] for more formatting options +Available character formatting in WikiText includes: -See also: [[Code Blocks in WikiText]] +|Wikitext | Button | Shortcut |Rendered Output |h +|Double single quotes are used for `''bold text''`| <<.icon $:/core/images/bold>> | <> |Double single quotes are used for ''bold text'' | +|Double slashes are used for `//italic text//`| <<.icon $:/core/images/italic>> | <> |Double slashes are used for //italic text//| +|Double underscores are used for `__underlined text__`| <<.icon $:/core/images/underline>> | <> |Double underscores are used for __underlined text__ | +|Double circumflex accents are used for `^^superscripted^^` text | <<.icon $:/core/images/superscript>> | <> |Double circumflex accents are used for ^^superscripted^^ text | +|Double commas are used for `,,subscripted,,` text | <<.icon $:/core/images/subscript>> | <> |Double commas are used for ,,subscripted,, text | +|Double tilde signs are used for `~~strikethrough~~` text | <<.icon $:/core/images/strikethrough>> | <> |Double tilde signs are used for ~~strikethrough~~ text | +|Single backticks are used for ```code` `` | <<.icon $:/core/images/mono-line>> | <> |Single backticks are used for `code` | +|Double @ characters are used to create a `@@highlight@@` | - | - |Double @ characters are used to create a @@highlight@@ | + +See [[Styles and Classes in WikiText]] for more formatting options + +!! Embedded Backticks + +|Wikitext |Rendered Output|h +|``double backticks allows `embedded` backticks``|``double backticks allows `embedded` backticks``| + +!! Keyboard Shortcuts + +The full list of KeyboardShortcuts can be found in the $:/ControlPanel -> ''Keyboard Shortcuts'' tab. + +!! Semantic Information + +|Wikitext | Resulting HTML Code |h +|Double single quotes are used for `''bold text''`|Double single quotes are used for `bold text` | +|Double slashes are used for `//italic text//`|Double slashes are used for `italic text` | +|Double underscores are used for `__underlined text__`|Double underscores are used for `underlined text` | +|Double circumflex accents are used for `^^superscripted^^` text |Double circumflex accents are used for `superscripted` text | +|Double commas are used for `,,subscripted,,` text |Double commas are used for `subscripted` text | +|Double tilde signs are used for `~~strikethrough~~` text |Double tilde signs are used for `strikethrough` text | +|Single backticks are used for ```code` `` |Single backticks are used for `code` | +|Double @ characters are used to create a `@@highlight@@` |Double @ characters are used to create a `highlighted` | + +!! Bold vs Strong + +In TW we use the term "bold" instead of "strong" because most users are used to it. ... The rendering process converts our "bold text" into the STRONG HTML element. + +>The `` element is for content that is of greater importance, while the `` element is used to draw attention to text without indicating that it's more important. +>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong#b_vs._strong + +!! Underline vs. Underscore + +>Use underline to describe text formatting that puts a line under the characters. Use underscore to refer to the underscore character ( _ ). +>https://learn.microsoft.com/en-us/style-guide/a-z-word-list-term-collections/u/underline-vs-underscore + +!! Emphasis vs Italics + +>The `` element represents stress emphasis of its contents, while the `` element represents text that is set off from the normal prose, such as a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use ``.) +>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em#i_vs._em