PDF Themes – Additional Text

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 pixels
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 tags

    This text is wrapped in paragraph tags

See how IRIS KashFlow works with your business and your books