Typically when specifying formatting or style of PDF Theme elements you are required to edit the HTML and CSS sheets of the PDF Theme, and as the default Classic and Clean options have protected code this further requires you create a new PDF Theme.
However, the Additional Text field allows you to utilise basic HTML without this need.
Style
You can make your text bold, italic, underlined, or even with a strike if required.
To do this, you would wrap the appropriate text with the required style tags
<b>This text will be bold </b> <i>This text will be italic </i> <u>This text will be underlined </u> <strike>This this text will have a strike </strike> <b><i><u><strike>This text will be styled with them all</strike></u></i></b>
This will produce the following appearance
This text will be bold This text will be italic This text will be underline This this text will have a strike This text will be styled with them all
Color
You can amend the colour of your text by utilising the span tag and styling the text within using the “color” property.
An example of how this would be written is:
<span style=”color:red”> This text will be red </span>
<span style=”color:green”> This text will be green </span>
<span style=”color:blue”> This text will be blue </span>
<span style-=”color:red”> This is a red string</span><span style=”color:green”> next to a green string</span><span style=”color:blue”> alongside one of blue.</span>
Which will produce the following results:
This text will be red This text will be green This text will be blue This is a red string next to a green string alongside one of blue.
It is also possible to use RGB and Hex Color Codes to define more complex and exotic colours. Information pertaining to this can be found here.
Text Align
By default, the Additional Text is aligned left, however, you can adjust this by using the paragraph tag in which you define a paragraph property “align” with the required value.
<p align=”center”> This text will be in the middle of the page</p>
<p align=”right”> This text will be set to the right</p>
This will produce the following (please note how using two paragraph tags inserts a sizeable gap between the texts):
This text will be in the middle of the page
This text will be set to the right
Highlighting
You may want to have some text stand out as if highlighted, this could be useful if you feel simply changing text colour does not emphasise the information enough.
For instance you could include
<span style=”background-color:red; color:black”> This text will be highlighted in red, with a black font</span>
<span style=”background-color:black; color:white;”> This text will be highlighted black, with a white font</span>
Which will render text looking like
This text will be highlighted in red, with a black font This text will be highlighted black, with a white font
Font Size
You can further customise your Additional Text by changing the font size of particular sentences, words, or the entire text body. One of the easiest ways to define this is through the headings tags, these not only affect the size of text, but also make it strong.
<h1> This will be the most Important heading </h1> <h4> This will be regularly sized text </h4> <h6> This will be small print </h6>
Which will present the text as
This will be the most Important heading
This will be regularly sized text
This will be small print
The above only demonstrates the h1, h4 and h6 tags, though you can use h2, h3, and h5 for further customisation of sizes.
Alternatively, if you want more specific freedom over the text size, you can specify the following style attributes:
<span style="font-size:10px">This text has a font-size of ten pixels</span> <span style="font-size:10pt">This text has a font-size of ten point</span> <span style="font-size:2em">This text has a font-size of two times the default for the parent element</span> <span style="font-size:75%">This text has a font-size of seventy-five percent the default for the parent element</span>
Which will produce the following result
This text has a font-size of 10 point
This text has a font-size of two times the default for the parent element
This text has a font-size of seventy-five percent the default for the parent element
Notes
- Images and hyperlinks are broken upon the rendering to PDF documents and should be avoided entirely when formatting the Additional Text field
- You are able to mix style attributes with a semi-colon as viewed below. This allows for formatting text in multiple ways without using multiple tags
<span style=”color:black; background-color:purple;font-size:125%;”>This text is styled in multiple ways</span>
This text is styled in multiple ways - The span and paragraph tags behave in a different manner. The span for all intents and purposes does nothing remarkable beyond what you define them to. The paragraph tag makes the text within it distinctly separated from text and elements outside of it. This can be seen when defining a background colour for span and paragraph elements as below
This text is wrapped in span tagsThis text is wrapped in paragraph tags