Skip to content

Mythradon PDF Templates Supported HTML

Mythradon PDF Templates are use an engine that converts HTML to PDF documents. The capabilities of HTML/CSS and PDF are very different. This makes it difficult to convert all HTML/CSS tags and styles into PDF.

The following lists the supported and unsupported HTML tags.

HTML and CSS Support

PDF Templates have slightly restricted support for HTML and CSS (Cascading Style Sheets).

Note: Mythradon uses the TCPDF (https://tcpdf.org/) engine for creating PDF documents from PDF/HTML based templates. You may find further information on the supported CSS/HTML on this site.

Supported HTML Tags

The following HTML tags are supported in Mythradon PDF Templates:

Tag Description
<!--...--> HTML comment tags. Code between these tags will not be rendered to PDF.
<a> The <a> tag defines a hyperlink, which is used to link from one page to another.
<b> The <b> tag specifies bold text without any extra importance.
<blockquote> The <blockquote> tag specifies a section that is quoted from another source.
<br> The <br> tag inserts a single line break.
<dd> The <dd> tag is used to describe a term/name in a description list.
<del> The <del> tag defines text that has been deleted from a document. This will be displayed as a strike through.
<div> The <div> tag defines a division or a section in an HTML document.
<dl> The <dl> tag defines a description list.
<dt> The <dt> tag defines a term/name in a description list.
<em> The <em> tag is used to define emphasized text. The content inside is typically displayed in italic.
<font> The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.
<h1> to <h6> The <h1> to <h6> tags are used to define HTML headings.
<hr> The <hr> tag defines a horizontal rule that is used to separate content.
<i> The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
<img> The <img> tag is used to embed an image in an HTML page.
<li> The <li> tag defines a list item.
<ol> The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
<p> The <p> tag defines a paragraph.
<pre> The <pre> tag defines preformatted text.
<s> The <s> tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it.
<small> The <small> tag defines smaller text (like copyright and other side-comments).
<span> The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
<strong> The <strong> tag is used to define text with strong importance. The content inside is typically displayed in bold.
<sub> The <sub> tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font.
<sup> The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font.
<table> The <table> tag defines an HTML table.
<tbody> The <tbody> tag is used to group the body content in an HTML table.
<td> The <td> tag defines a standard data cell in an HTML table.
<tfoot> The <tfoot> tag is used to group footer content in an HTML table.
<th> The <th> tag defines a header cell in an HTML table.
<thead> The <thead> tag is used to group header content in an HTML table.
<tr> The <tr> tag defines a row in an HTML table.
<tt> The <tt> tag was used in HTML 4 to define teletype text.
<u> The <u> tag displays text as underlined.
<ul> The <ul> tag defines an unordered (bulleted) list.

Unsupported HTML Tags

The following HTML tags are not supported in Mythradon PDF Templates:

Tag Description
<abbr> The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
<address> The <address> tag defines the contact information for the author/owner of a document or an article.
<applet> The <applet> tag was used in HTML 4 to define an embedded applet (Plug-in).
<area> The <area> tag defines an area inside an image map (an image map is an image with clickable areas).
<article> The <article> tag specifies independent, self-contained content.
<aside> The <aside> tag defines some content aside from the content it is placed in. The <aside> element does not render as anything special in a browser.
<audio> The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
<base> The <base> tag specifies the base URL and/or target for all relative URLs in a document.
<basefont> The <basefont> tag was used in HTML 4 to specify a default text-color, font-size or font-family for all the text in an HTML document.
<bdi> The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.
<bdo> The <bdo> tag is used to override the current text direction.
<big> The <big> tag was used in HTML 4 to define bigger text.
<body> The <body> tag defines the document's body. You do not need to define this in Mythradon PDF Templates.
<button> The <button> tag defines a clickable button.
<canvas> The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
<caption> The <caption> tag defines a table caption.
<center> The <center> tag was used in HTML4 to center-align text.
<cite> The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). The text in the element usually renders in italic.
<code> The <code> tag is used to define a piece of computer code.
<col> The <col> tag specifies column properties for each column within a <colgroup> element.
<colgroup> The <colgroup> tag specifies a group of one or more columns in a table for formatting.
<data> The <data> tag is used to add a machine-readable translation of a given content.
<datalist> The <datalist> tag specifies a list of pre-defined options for an <input> element.
<details> The <details> tag specifies additional details that the user can open and close on demand.
<dfn> The <dfn> tag stands for the "definition element", and it specifies a term that is going to be defined within the content.
<dialog> The <dialog> tag defines a dialog box or sub window.
<dir> The <dir> tag was used in HTML 4 to list directory titles. Use <ul> as an alternative.
<embed> The <embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.
<fieldset> The <fieldset> tag is used to group related elements in a form.
<figcaption> The <figcaption> tag defines a caption for a <figure> element.
<figure> The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> The <footer> tag defines a footer for a document or section.
<form> The <form> tag is used to create an HTML form for user input.
<frame> The <frame> tag was used in HTML 4 to define one particular window (frame) within a <frameset>.
<frameset> The <frameset> tag was used in HTML 4 to define a frameset.
<head> The <head> element is a container for metadata and is placed between the <html> tag and the <body> tag. Not required in Mythradon PDF Templates.
<header> The <header> element represents a container for introductory content or a set of navigational links.
<html> The <html> tag represents the root of an HTML document.
<iframe> The <iframe> tag specifies an inline frame.
<input> The <input> tag specifies an input field where the user can enter data.
<ins> The <ins> tag defines a text that has been inserted into a document. Browsers will usually underline inserted text.
<kbd> The <kbd> tag is used to define keyboard input. The content inside is displayed in the browser's default monospace font.
<label> The <label> tag defines a label for several elements. This will render as text in Mythradon PDF Templates.
<legend> The <legend> tag defines a caption for the <fieldset> element.
<link> The <link> tag defines the relationship between the current document and an external resource.
<main> The <main> tag specifies the main content of a document.
<map> The <map> tag is used to define an image map. An image map is an image with clickable areas.
<mark> The <mark> tag defines text that should be marked or highlighted.
<meta> The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<meter> The <meter> tag defines a scalar measurement within a known range, or a fractional value. In HTML it is displayed as a progress bar but does not render as such in Mythradon PDF Templates.
<nav> The <nav> tag defines a set of navigation links.
<noframes> The <noframes> tag was used in HTML 4 to act as a fall back tag for browsers that did not support frames.
<noscript> The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts.
<object> The <object> tag defines a container for an external resource.
<optgroup> The <optgroup> tag is used to group related options in a <select> element (drop-down list).
<option> The <option> tag defines an option in a select list.
<output> The <output> tag is used to represent the result of a calculation (like one performed by a script).
<param> The <param> tag is used to define parameters for an <object> element.
<picture> The <picture> tag gives web developers more flexibility in specifying image resources.
<progress> The <progress> tag represents the completion progress of a task.
<q> The <q> tag defines a short quotation.
<rp> The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotation.
<rt> The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.
<ruby> The <ruby> tag specifies a ruby annotation.
<samp> The <samp> tag is used to define sample output from a computer program.
<script> The <script> tag is used to embed a client-side script (JavaScript).
<section> The <section> tag defines a section in a document.
<select> The <select> element is used to create a drop-down list.
<source> The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>.
<strike> The <strike> tag was used in HTML 4 to define strikethrough text.
<style> The <style> tag is used to define style information (CSS) for a document. Refer to the {{#style}} tag below.
<summary> The <summary> tag defines a visible heading for the <details> element.
<svg> The <svg> tag defines a container for SVG graphics.
<template> The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads.
<textarea> The <textarea> tag defines a multi-line text input control.
<time> The <time> tag defines a specific time (or datetime).
<title> The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
<track> The <track> tag specifies text tracks for <audio> or <video> elements.
<var> The <var> tag is used to defines a variable in programming or in a mathematical expression.
<video> The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.
<wbr> The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.

Top

CSS Styles

Mythradon PDF Templates support a subset of standard CSS using the following tag:

{{#style}}
  Your CSS style
{{/style}}

Note: Do not use the HTML <style> tag. These will be stripped when generating the PDF document. Instead use the {{#style}} tag.

Example

The following has a style defined for the standard HTML &lt;td&gt; and &lt;th&gt; tags along with two separate named styles sectionHeader and subHeading which you can see are used in the class attributes.

{{#style}} 

td, th {
  border: 1px solid #ddd;
  font-size: 11px;
}

.sectionHeader {
  font-weight: bold;  
  background-color: #000000;
  color: white;
}

.subHeading {
  font-weight: bold;
  font-size: 11px;
  background-color: #A9A9A9;
  color: white;
}

{{/style}} 


<table width="100%" cellpadding="4">
  <thead>
    <tr>
      <th width="100%" class="sectionHeader" colspan="4">TAX INVOICE</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="subHeading" width="23%">Invoice Date</th>
      <td width="27%">{{invoiceDate}}</td>

      <th class="subHeading" width="23%">Tax Invoice No.</th>
      <td width="27%">{{invoiceNo}}</td>
    </tr>
  </tbody>
</table>

This produces the following:

PDF Table Sample

Certain CSS styles are not supported when included within {{#style}} tags, however many of them do when used with inline style attributes.

i.e., Table padding

This does NOT work:

table {
  padding: 5px;
}

This does:

<table style="padding: 5px;">

Note: CSS padding is not supported when used within the {{#style}} tags. Note the use of the 'cellpadding' attribute on the table definition.

Top

See also

Top