All Collections
Managing Film and TV
Guide to Text Formatting
Guide to Text Formatting

A guide on supported text formatting on your Shift72 platform.

Jason avatar
Written by Jason
Updated over a week ago

Certain textboxes on your Shift72 platform support markdown. These are Film records Synopsis field, a Pages Content field, a Collections Description, and Bundle Descriptions.

Some Markdown is unsupported due to how it interacts with the template.

HTML tags are not supported in apps, if you will be using an app please do not use HTML tags on your platform.

Contents:

Supported Markdown:

Horizontal Offsets:

Markdown does not recognise multiple consecutive spaces. To create a horizontal offset, a blank character can be used. To add a blank character, hold ‘Alt,’ then on the Numpad of your keyboard type 255, then release ‘Alt.’ A blank character will appear. This can be used as many times in a row as necessary to get a horizontal offset.

Note: this will only work in windows operating systems.


Vertical Offsets:

Markdown does not recognise multiple consecutive newline characters. These are what is typed when you press ‘Enter’ while typing. To add more of these, use the HTML tag <br/>.


Headings:

To add a heading, type a ‘Hash’ (#) symbol. The number of hash (#) symbols before text indicates the type of heading that is being added. Headings increase the size of the text. e.g.

# Heading 1

## Heading 2

### Heading 3

Etc…

Heading 1 will be the largest text. Every subsequent heading will have smaller text than the last.


Lists:

A list can be created in Markdown, which will show up on the front end of your Shift72 platform.

This can be done with either a ‘Hyphen’ (-) before each entry to have an unordered list or with Numbers before each entry to create an ordered list.

Markdown will also automatically order a numbered list, regardless of what the numbers are. For example, typing the text below:

1. First Item

1. Second Item

1. Third Item

Will display as this on the front end:

  1. First Item

  2. Second Item

  3. Third Item

If you would like to avoid a number, followed by a full stop from becoming an ordered list, you will need to escape the full stop with a backslash:

1\.

This will display as 1. on the front end without becoming an ordered list.


Right to Left Text:

Right to left text can be formatted by adding <bdo dir="rtl"> … </bdo> around the text you want to display in right to left orientation. The text below:

<bdo dir="rtl"> Right to left text </bdo>

Will display like this on the front end:


Display special characters:

Some characters are used for Markdown formatting. Sometimes you will want to display these normally. To do this, simply add a backslash (\) before them, and they will show up normally.

Below is a list of characters that will need a backslash to display normally.

\ Backslash

` Backtick

* Asterisk

_ Underscore

{ } Curly Brace

[ ] Square Brackets

( ) Parenthesis

# Hash

+ Plus sign

- Hyphen

! Exclamation mark

. Full Stop


Abbreviations:

Abbreviations can be used by adding <abbr> tags around the text. The title will be added within these tags. So the text below:

<abbr title="Shift72 Film Festival">S72FF</abbr>

Will display like this on the front end:

Which you can then mouse over to display the full name:


Superscript:

Superscripts can be used by adding <sup> … </sup> tags around text. The text below:

Superscript<sup>TM</sup>

Will display like this on the front end.


Subscript:

Similar to superscripts, subscripts can be used by adding <sub> … </sub> tags around text. The text below:

Subscript<sub>TM</sub>

Will display like this on the front end.


Small text:

Text size can be reduced by adding <small> … </small> tags around the text.

<small>Small</small> Text

Will display like this on the front end:


Highlighting:

Text can be highlighted by adding <mark> … </mark> tags around the text.

<mark>Highlight</mark>

Will display like this on the front end:


Underlining:

Text can be underlined by adding <ins> … </ins> tags around the text.

<ins>Underline</ins>

Will display like this on the front end:


Strikethrough:

You can add a strikethrough to text by adding <del> … </del> tags around the text.

<del> Strikethrough </del>

Will display like this on the front end:


Combining Tags:

Tags can be combined to give the same text the effect of multiple tags.

The text:

<small><b> Small and bold </b></small>

And

<ins><del> Strikethrough and underline</del></ins>

Will display like this on the front end:

This will also apply to any number of tags used around a single piece of text, so the text below:

<small><b><ins><del> Strikethrough and underline and small and bold </del></ins></b></small>

Will display like this on the front end:

This is a combination of strikethrough, underlined, small and bold text.


Tables:

Tables can be added to the text in your Shift72 platform. The tables do not have outlines, but the text is formatted as a table. An example of this can be seen below:

The code below is used to create the above table.

<table border="1" cellpadding="4" cellspacing="1">

<thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>

<tbody>

<tr valign="top"><td>First Entry</td><td>Second Column</td></tr>

<tr valign="top"><td>Second Entry</td><td>Second Column 2</td></tr>

</tbody>

<tfoot><tr valign="top"><td>Third Entry</td><td>Second Column 3</td></tr>

</tfoot>

</table>

Each line means as follows:

<table border="1" cellpadding="4" cellspacing="1">

  • This is the table borders.

  • The border is the width of the lines.

  • Cell padding is the space between the cell walls and the content.

  • Cellspacing is the space between cells.

<thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>

  • This is the heading of the table.

  • <thead> indicates this is the heading.

  • <tr> indicates this is one row.

  • <th> indicates each heading entry.

  • </th>, </tr> and </thead> indicate closing the corresponding block.

<tbody>

  • <tbody> indicates this is the beginning of the body of the table.

<tr valign="top"><td>First Entry</td><td>Second Column</td></tr>

  • This is the first line of the body, <tr tr valign="top"> is the same as <tr> but aligns text to the top of the row.

  • <td> indicates each line of entry in the body.

<tr valign="top"><td>Second Entry</td><td>Second Column 2</td></tr>

  • This line is very similar to the last one.

</tbody>

  • This is closing the body of the table.

<tfoot><tr valign="top"><td>Third Entry</td><td>Second Column 3</td></tr>

  • <tfoot> is opening the footer of the table.

  • <tr tr valign="top"> is the same as above.

  • <td> is the same as above.

</tfoot>

  • This is closing the footer of the table.

</table>

  • This is closing the table.


Image Links:

You can create a clickable image that will redirect users using the code below:

<a href=LINK_HERE rel=”DESCRIPTION_HERE”>![IMAGE](IMAGE_LINK_HERE)</a>

This functions the same as a regular link but uses an image instead of text. Below is an explanation of how to use this code to create an image link.

Replace LINK_HERE with the URL the image will link to.

Replace DESCRIPTION_HERE with a description of the link.

Replace IMAGE_LINK_HERE with the URL of the image users will click to be redirected.

The code below is a working example of this, paste it into a supported text box to try it out to see how this works.


Dropdown menu:

Markdown allows you to create a clickable button that will reveal text when clicked. This can be useful to avoid cluttering up a page.

Use the code below:

A dropdown menu can be added by formatting as follows:

<details>

<summary>Click Here</summary>

So it is revealed

</details>

To create this text:

Once clicked, it will open to reveal the <summary> text.

This can also be used with images, so a large image can be added without cluttering up a page.


Horizontal rule:

A horizontal rule is a separator line that can be used to split up blocks of text. This can be added either using </hr> or 3 underscore (___).

This can be written like as such:

Separator below Separator below

___ or </hr>

Separator above Separator above

These will be displayed as below on the front end:


Code:

A code block can be added to your platform by adding backticks on either side of the text.

This text:

test `test`

Will display like this on the front end:

This can also be done using <code> ... </code> tags.


Unsupported Formatting:

&nbsp:

Non-breaking space will just display as &nbsp on the front end.

<p style=”text-align:ALIGNMENT”> </p> - Text alignment:

This will not work on your front end as this is overwritten by the text alignment in the front end template.

<svg> - svg images:

SVG Images are unsupported on the front end of your platform.

Text colours:

Text cannot be recoloured in markdown supported fields. This is because the colour is overwritten by the template once the text is displayed on the front end.

<blockquote> ... </blockquote> - blockquotes:

Blockquotes do not show up on the front end.

<kbd> … </kbd> - Keyboard Input:

This does not have any effect on the front end.

<p style="font-size:24px;"> ... </p> Font size:

This does not have any effect on the front end.

Did this answer your question?