Rich Text Markup Syntax
General Notes
The text values for “Rich Text” items are interpreted using a special markup language. The markup language distinguishes literal text from markup commands by enclosing commands in {curly braces}. Any text not enclosed in curly braces is taken as literal.If you are using the Content Editor, you will not need to type in any specific markup. Instead, you can select cells or text in the Content Editor and use its "Rich Text" and "Advanced" toolbar controls to automatically insert correct markup.
Tell me more about the Content Editor.
Tell me more about editing Rich Text when using the Content Editor.
Embedded Images
If the text within curly braces does not begin with a special character, it is taken as the name of an image file. The specified file is found in the Image Folder, and its image is embedded within the text on the card as if it were a character. Its size is scaled proportionally to match the current font size.Example: If you have an image of a gold coin in a file named gold.png then this string
You gain {gold}{gold}!
will print with the gold coin image (twice) in the line of text.
As a convenience, you can omit the filename suffix. In the example above, {gold} is used instead of {gold.png}.
Important: Due to bugs (or at least, questionable design decisions) in Apple's text layout mechanisms, sometimes the vertical positioning of an image embedded in text will not be correct. This usually happens when the line the image is on contains no actual text.
Multideck has no mechanism for fixing this problem (and lord knows, I've tried). You can work around it sometimes by including a leading or trailing space character next to the embedded image in the field's value.
If you have an item that will only ever display rows or columns of images, consider using an Image Table item instead of Rich Text.
Font Styling: Size, Bold, Italic, Underline, Strikethrough, and Text Shadow
By default, a rich text item uses the font size and style specified for that item in the layout. But some font characteristics can be altered by the use of markup commands.Bold, italic, underline, and strikethrough can be turned on and off with markup commands that resemble simple HTML:
This is {.b}bold face{/b} text. => This is bold face text.
This is {.i}italic face{/i} text. => This is italic face text.
This is {.u}underlined{/u} text. => This is underlined text.
This is {.x}strikethrough{/x} text. => This is strikethrough text.
Text Shadow is set (to black, white, or none) with the .ts: directive. (Note that white-shadowed text is an effect that doesn't show well against a light or white background. Here we've shown the result against a blue background, for contrast.)
This is {.ts:black}black-shadowed{.ts:none} text. => This is black-shadowed text.
This is {.ts:white}white-shadowed{.ts:none} text. => This is white-shadowed text.
Font size can be adjusted by specifying a font size difference, in points. Use + to indicate a size increase, and – to indicate a decrease:
This is {.-3}smaller{.+3} text. => This is smaller text.
Absolute font size can be set by specifying a font size in points with the .fs: directive, and canceled with the /fs directive:
This is {.fs:16}16-point{/fs} text. => This is 16-point text.
The font itself can be specified with the font's name and the .ffontname: directive, and canceled with the /f: directive. Make sure you use the font's full, correct name. You can see all available font names in the Font popup menu for any style in the Styles tab.
This is {.f:Courier}Courier{/f:} font. => This is Courier font.
You can restore all of the above default characteristics (font, size, and style, but not color) using the {.f} markup command. (Note that there is no colon or fontname, as there would be with the .f: directive that specifies a particular font.) Example:
This is {.-3}smaller, {.i}italic{.f} and normal text. => This is smaller, italic and normal text.
Changing the Text Color
Text color is a complex subject, which deserves its own page. Please see Color in Rich Text Markup for a full discussion.Embedded Line Breaks
The sequence {.n} signifies a "newline", or line break. Normally text will wrap naturally within the bounds of a text item; this markup command allows you to force a line break.Important: If a forced line break is immediately followed by an embedded image, often the vertical alignment of the image or the horizontal alignment of the line it is on will be incorrect. Often, inserting a space character in front of the embedded image will solve this issue.
Embedded Serial Numbers
The sequence {.#} will be replaced by the card's serial number. The serial number is just this card's position in the list of cards for this template: the first card listed in the content will be serial number "1", the second will be "2", and so on.
Embedded References to Other Fields
A markup command that begins with two dots is a reference to another field in the same row for the current card. For example, assume that the content includes a column “Index” that assigns a unique number to a card, and another column “Version” that specifies the version of the card or deck. Then the following example would create a line of text that draws from both of those fields:v{..Version} – Card {..Index} => v7 – Card 32
Literal Text
Use {=text} to include a literal string in your text. Because curly braces are used to separate markup commands from literal text, this markup command is the only way to include a literal left curly brace ({) in your text.The text may be as long as you like, and may include any printable characters except for right curly brace (}), which will terminate the markup command. Right curly braces never need to be escaped. Here's an example, with the markup command highlighted for clarity:
This is {={text} in braces}. => This is {text in braces}.
There is no need to escape a }. Attempts to do so will end in disaster.