Advanced Document Components Extended Html5

General considerations

Although HTML5 is by all means an amazingly complete standard it has not been designed with paged media in mind, so it lacks certain elements that are common in standard business and general documentation:

Charts.
Dates.
Footnotes and endnotes.
Math equations.
Page numbering.
Tabs
Table of contents.

The Docxpresso estensions of plain HTML5 are thought to remedy , in the most possibly simple way, those deficiencies.

Although all the above functionality is already covered by the Docxpresso public API we believed that it could show pretty convenient to integrate them somehow within the scope of the html method. What follows is the result of this simple goal.

Charts

Of all the current included HTML5 extensions this is with no doubt the more extensive one.

Before getting into the details of the associated XML schema let us run a simple example that will give you a pretty clear taste of what is going on:

<?php
/**
 * This sample script inserts some (extended) HTML5 code into the document
 */
require_once 'pathToDOCXPRESSO/CreateDocument.inc';
$doc = new DocxpressoCreateDocument();
$format = '.pdf';//.pdf, .doc, .docx, .odt, .rtf
//html code
$html = '
<style>
.centeredText {text-align: center; font-family: Georgia; font-size: 16pt; color: #5689dd}
</style>
<p style="margin-bottom: 20pt">A 3D column bar chart in HTML format:</p>
<p class="centeredText">Sales (K$)</p>
<p class="centeredText">
    <chart type="3Dcolumn" stacked="true" style="width: 10cm;">
        <legend legend-position="bottom"/>
        <component type="floor" fill-color="#fff0f0" />
        <series>
            <ser name="Europe" />
            <ser name="America" />
            <ser name="Asia" />
        </series>
        <categories>
            <category name="2010">
                <data value="650" />
                <data value="470" />
                <data value="400" />
            </category>
            <category name="2011">
                <data value="680" />
                <data value="540" />
                <data value="430" />
            </category>
            <category name="2012">
                <data value="650" />
                <data value="600" />
                <data value="600" />
            </category>
            <category name="2013">
                <data value="750" />
                <data value="640" />
                <data value="580" />
            </category>
        </categories>
    </chart>
</p>
';
$doc->html(array('html' => $html));
//include in the render method the path where you want your document to be saved
$doc->render('html_chart' . $format); 
//echo a link to the generated document
echo 'You may download the generated document from the link below:<br/>';
echo '<a href="' . 'html_chart' . $format . '">Download document</a>';

DOWNLOAD:

We would like to point out that currently the package extended HTML support for charts in .docx format output is “incomplete”.

In principle one may control from HTML5 code all the customizable components of the Docxpresso chart public API, i.e.

General chart properties: <chart> tag.
Legend properties: <legend> tag.
Chart axis (x, y or z): <axis> tag.
Chart wall and floor components: <component> tag
Chart data: <series> and <categories> tags
3D transformations: <transform3D> tag

That we pass to explain in further detail.

<chart>

The <chart> element is the main chart wrapper that accepts the following childs and attributes:

Child elements

legend
axis
component
series
categories

Attributes

data-label-number (type: string, default: none). The possible values are: none, value or percentage.
label-position (type: string). The possible values are: avoid-overlap, center, top, top-right, right, bottom-right, bottom, bottom-left, left, top-left, inside, outside or near-origin.
label-position-negative (type: string). It only applies if the data value is negative. If not given the value for data-label-position will be used. Possible values are: top-left, inside, outside or near-origin.
hole-size (type: integer), specifies the diameter of the inner hole of a ring chart as percentage of the outer diameter of the outermost ring.
pie-offset (type: integer), specifies the distance of a segment from the center of the circle in case of circle charts. The offset is given as an integer which is interpreted as a percentage of the radius of the circle. In case of ring charts specifies an additional distance of a segment from the center of the circle. The distance is given as percentage of the thickness of the ring.
angle-offset (type: integer), specifies in degrees a counter clockwise rotation of a polar coordinate in a circle, ring or polar chart.
stacked (type: boolean, default: false). It specifies the accumulation of the series values per category. Each value is in addition to the other values in the same category.
chart-interpolation (type: string). The possible values are none (if points are to be connected by a straight line, b-spline or cubic-spline.
spline-resolution (type: integer). It only applies if the chart-interpolation option is not equal to none.
deep (type: boolean, default: false). If true the series will be shown in 3D one behind the other and not side by side. It only applies to 3D charts.
solid-type (type: string, default: cuboid). Possible values are: cuboid, cylinder, cone or pyramid. It only applies to 3D bar charts.
style (type: string). A list of properties in CSS format that only set the global properties of the chart.

<legend>

The <legend> element controls the legend display properties:

Child elements

No child elements.

Attributes

legend-position (type: string, default: bottom). Possible values are: top, right, bottom or left.
color (type: string). The legend font color in hexadecimal format.
font-family (type: string). The legend text font family.
font-size (type: string). The legend text font size in points, e.g. 11pt.
font-weight (type: string, default: normal). The legend text font weight: normal or bold.
font-style (type: string, default: normal). The legend text font style: normal or italic.
fill-color (type: string). The data point color in hexadecimal format.
opacity (type: string, default: 100%), specifies the fill color opacity as a percentage.
stroke (type: string, default: solid). It can be none, solid or dash.
stroke-width (type: string), specifies the line width.
stroke-color (type: string), specifies the line color in hexadecimal format.
stroke-opacity (type: string, default: 100%), specifies the line color opacity as a percentage.
stroke-linejoin (type: string, default: round). Possible values are: round, bevel, middle, miter or none.
stroke-linecap (type: string, default: butt). Possible values are: butt, round or squared.

<axis>

The <axis> element allows to customize the x, y or z (only 3D charts) axis:

Child elements

No child elements.

Attributes

$axis (type: string). Possible values are: x, y or z.
visible (type: boolean, default: true). If true the axis is shown.
logarithmic (type: boolean, default: false). If true the axis is shown with a logarithmic scale.
font-color (type: string). The axis font color in hexadecimal format.
font-family (type: string). The axis text font family.
font-size (type: string). The axis text font size in points, e.g. 11pt.
axis-position (type: mixed, default: start). It can be start (default), end or a numeric value dictating where the perpendicular axis should cross. In the case of the y-axis it refers to the category, i.e. 1 before the first category, 2 behind the second and so long so forth.
minimum (type: float), specifies the minimum value of an axis.
maximum (type: float), specifies the maximum value of an axis.
label-arrangement (type: string). Possible values are: side-by-side, stagger-even or stagger-odd.
display-label (type: boolean, default: true). If true displays the axis label.
axis-label-position (type: string, default: near-axis). Possible values are: near-axis, near-axis-other-side, outside-end or outside-start.
reverse-direction (type: boolean, default: false). If true reverses the axis direction.
text-overlap (type: boolean, default: false). It specifies whether axis labels may overlap each other.
line-break (type: boolean, default: true). It specifies whether text wrapping for axis labels is allowed.
stroke (type: string, default: solid). It can be none, solid or dash.
stroke-width (type: string), specifies the line width.
stroke-color (type: string), specifies the line color in hexadecimal format.
stroke-opacity (type: string, default: 100%), specifies the line color opacity as a percentage.
stroke-linejoin (type: string, default: round). Possible values are: round, bevel, middle, miter or none.
stroke-linecap (type: string, default: butt). Possible values are: butt, round or squared.
interval-major (type: float), specifies the separation between major intervals within an axis.
interval-minor-divisor (type: integer), specifies the number of divisions between to major interval lines.
tick-marks-major-inner (type: boolean, , default: false). If true it shows inner major tick marks.
tick-marks-minor-inner (type: boolean, , default: false). If true it shows inner minor tick marks.
tick-marks-major-outer (type: boolean, , default: false). If true it shows outer major tick marks.
tick-marks-minor-outer (type: boolean, , default: false). If true it shows outer minor tick marks.

<grid>

The <grid> element allows to customize the x, y or z (only 3D charts) grid lines:

Child elements

No child elements.

Attributes

$axis (type: string, default: x). Possible values are: x, y or z.
$type (type: string, default: major). Grid type. Possible values are: major or minor.
stroke (type: string, default: solid). It can be none, solid or dash.
stroke-width (type: string), specifies the line width. The default values are: 0.75pt for major grids and 0.5pt for minor grids.
stroke-color (type: string), specifies the line color in hexadecimal format. For major grids the default is #d9d9d9 and #f0f0f0 for minor grids.
stroke-opacity (type: string, default: 100%), specifies the line color opacity as a percentage.
stroke-linejoin (type: string, default: round). Possible values are: round, bevel, middle, miter or none.
stroke-linecap (type: string, default: butt). Possible values are: butt, round or squared.

<component>

The <transform3D> element allows for the customization of the wall and floor components of a chart:

Child elements

No child elements.

Attributes

$component (type: string, default: wall). Component type. Possible values are: wall or floor.
fill-color (type: string). The data point color in hexadecimal format.
opacity (type: string, default: 100%), specifies the fill color opacity as a percentage.
stroke (type: string, default: solid). It can be none, solid or dash.
stroke-width (type: string), specifies the line width.
stroke-color (type: string), specifies the line color in hexadecimal format.
stroke-opacity (type: string, default: 100%), specifies the line color opacity as a percentage.
stroke-linejoin (type: string, default: round). Possible values are: round, bevel, middle, miter or none.
stroke-linecap (type: string, default: butt). Possible values are: butt, round or squared.

<transform3D>

The <transform3D> element allows to rotate and change the default perspective in 3D charts:

Child elements

No child elements.

Attributes

rotate-x (type: integer, default: 11 ). Rotation angle respect the x-axis.
rotate-y (type: integer, default: 25 ). Rotation angle respect the y-axis.
rotate-z (type: integer, default: 5 ). Rotation angle respect the z-axis.
perspective (type: integer, default: 20 ). Given as a percentage.
right-angled-axes (type: boolean, , default: 20). If true the rotate-z parameter is ignored.

<series>

The <series> element is a wrapper element for the different series that compose the chart data.

This element is not allowed for 2 & 3D pie and donut charts.

Child elements

Attributes

This element does not have any attribute.

<ser>

The <ser> element contains the relevant data for a particular chart series.

This element is not allowed for 2 & 3D pie and donut charts.

Child elements

No child elements.

Attributes

fill-color (type: string). The data point color in hexadecimal format.
opacity (type: string, default: 100%), specifies the fill color opacity as a percentage.
stroke (type: string, default: solid). It can be none, solid or dash.
stroke-width (type: string), specifies the line width.
stroke-color (type: string), specifies the line color in hexadecimal format.
stroke-opacity (type: string, default: 100%), specifies the line color opacity as a percentage.

<categories>

The <caegories> element is a wrapper element for the different category elements that compose the chart data.

Child elements

Attributes

This element does not have any attribute.

<category>

The <category> element contains the actual data. Its structure depends on the chart type.

Child elements

Pie and donut type charts:
- No child elements
All other chart types:
- ser

Attributes

name (type: string). The category name (ignored for bubble charts).
The following attributes are exclusive for pie and donut charts:
- value (type: float). The actual data point value.
- fill-color (type: string). The data point color in hexadecimal format.
- opacity (type: string, default: 100%), specifies the fill color opacity as a percentage.
- stroke (type: string, default: solid). It can be none, solid or dash.
- stroke-width (type: string), specifies the line width.
- stroke-color (type: string), specifies the line color in hexadecimal format.
- stroke-opacity (type: string, default: 100%), specifies the line color opacity as a percentage.

<data>

The <data> element contains the actual value for each data point.

Child elements

No child elements.

Attributes

value (type: float). The actual data point value.

Sample instance

The general structure of a chart element may be summarized in this sample code:

<chart  style="CSS styles"
type="column|bar|pie|donut|area|line|scatter|bubble|radar|filled-radar|column-line|3Dcolumn|3Dbar|3Dpie|3Ddonut|3Darea|3Dline|3Dscatter"  
data-label-number="none|value|percentage"
label-position="avoid-overlap|center|top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|inside|outside|near-origin"
label-position-negative="top-left|inside|outside|near-origin"
hole-size="integer"
pie-offset="integer"
angle-offset="integer"
stacked="boolean"
gap-width="integer"
overlap="integer"
percentage="boolean"
chart-interpolation="none|b-spline|cubic-spline"
spline-resolution="integer"
deep="boolean"
solid-type="cuboid|cylinder|cone|pyramid" >
<title  color="hexadecimal color"
font-family="string"
font-size="float(pt|cm|in|mm)"
font-weight="normal|bold"
font-style="normal|italic"
stroke="solid|dash|none"
fill-color="hexadecimal color"
opacity="integer%"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%"
stroke-linejoin="round|bevel|middle|miter|none"
stroke-linecap="butt|round|square" >Title</title>
<legend name="" //only applies to bubble charts
legend-position="left|right|top|bottom" 
color="hexadecimal color"
font-family="string"
font-size="float(pt|cm|in|mm)"
font-weight="normal|bold"
font-style="normal|italic"
stroke="solid|dash|none"
fill-color="hexadecimal color"
opacity="integer%"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%"
stroke-linejoin="round|bevel|middle|miter|none"
stroke-linecap="butt|round|square"/>
<grid   dimension="x|y|z"
type="major|minor"
stroke="solid|dash|none"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%"
stroke-linejoin="round|bevel|middle|miter|none"
stroke-linecap="butt|round|square" />
<axis   dimension="x|y|z" 
visible="boolean"
logarithmic="boolean"
font-color="hexadecimal color"
font-size="float(pt|cm|in|mm)"
axis-position="start|end"
origin="float"
maximum="float"
minimum ="float"
label-arrangement="side-by-side|stagger-even|stagger-odd"
display-level="boolean"
axis-label-position="near-axis|near-axis-other-side|outside-end|outside-start"
reverse-direction="boolean"
text-overlap="boolean"
line-break="boolean"
stroke="solid|dash|none"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%"
stroke-linejoin="round|bevel|middle|miter|none"
stroke-linecap="butt|round|square"
interval-major="float"
interval-minor-divisor="integer"
tick-marks-major-inner="boolean"
tick-marks-minor-inner="boolean"
tick-marks-major-outer="boolean"
tick-marks-minor-outer="boolean" />
<component      type="wall|floor" 
fill-color="hexadecimal color"
opacity="integer%"
stroke="solid|dash|none"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%"
stroke-linejoin="round|bevel|middle|miter|none"
stroke-linecap="butt|round|square" />
<transform3D    rotate-x="integer" 
rotate-y="integer" 
rotate-z="integer" 
right-angled-axes="true|false" 
perspective="integer" />
<!-- for pie and donut charts -->
<categories>
<category       name="" 
value=""
fill-color="hexadecimal color"
opacity="integer%"
stroke="solid|dash|none"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%" />
<category       name="" 
value=""
fill-color="hexadecimal color"
opacity="integer%"
stroke="solid|dash|none"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%" />
<category       name="" 
value=""
fill-color="hexadecimal color"
opacity="integer%"
stroke="solid|dash|none"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%" />
</categories>
<!-- for bubble charts -->
<series>
<ser    name="" 
fill-color="hexadecimal color"
opacity="integer%"
stroke="solid|dash|none"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%" />
</series>
<categories>
<category>
<data value="" />
<data value="" />
<data value="" />
</category>
<category>
<data value="" />
<data value="" />
<data value="" />
</category>
<category>
<data value="" />
<data value="" />
<data value="" />
</category>
</categories>
<!-- for all other charts -->
<series>
<ser    name="" 
fill-color="hexadecimal color"
opacity="integer%"
stroke="solid|dash|none"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%" />
<ser    name="" 
fill-color="hexadecimal color"
opacity="integer%"
stroke="solid|dash|none"
stroke-width="float(pt|cm|in|mm)"
stroke-color="hexadecimal color"
stroke-opacity="integer%" />
</series>
<categories>
<category name="">
<data value="" />
<data value="" />
</category>
<category name="">
<data value="" />
<data value="" />
</category>
<category name="">
<data value="" />
<data value="" />
</category>
</categories>
</chart>

Date

The <date> tag allows for the insertion of the current date into the document.

A simple example of use is given by:

<?php
/**
* This sample script inserts some (extended) HTML5 code into the document
*/
require_once 'pathToDOCXPRESSO/CreateDocument.inc';
$doc = new DocxpressocreateDocument();
$format = '.pdf';//.pdf, .doc, .docx, .odt, .rtf
//html code
$dateFormat = "('day', '/', 'month', '/', 'year')"; 
$html = '
<p>Today is the <date format="' . $dateFormat . '" />.</p>
<p>If the requested document output is Word or Open Document format the date can be updated by the user. The actual procedure may
depend on the program used to open the file (MS Word, Libre Office, etcetera).</p>
';
$doc->html(array('html' => $html));
//include in the render method the path where you want your document to be saved
$doc->render('html_date' . $format); 
//echo a link to the generated document
echo 'You may download the generated document from the link below:<br/>';
echo '<a href="' . 'html_date' . $format . '">Download document</a>';

DOWNLOAD:

Its corresponding schema is very simple.

<date>

Child elements

No child elements

Attributes

format (type: string). The date is built
by concatenating the different tokens enclosed between parenthesis. The tokens may be:
- A character or string of text.
- A day, month or year in the following formats:
  - day: day of the month with two digits.
  - day-short: day of the month with one/two digits (as required).
  - day-of-week: day of the week in textual format.
  - day-of-week-short: abbreviated day of the week in textual format.
  - month: month of the year with two digits.
  - month-short: month of the year with one/two digits (as required) .
  - month-of-year: month of year in textual form.
  - month-of-year-short: month of year in abbreviated textual form.
  - year: year number with four digits.
  - year-short: year number with 2 digits.

Endnotes and footnotes

The <endnote> and <endnote> tags allow for the insertion of endnotes and footnotes in the current document.

A simple example of use is given by:

<?php
/**
* This sample script inserts some (extended) HTML5 code into the document
*/
require_once 'pathToDOCXPRESSO/CreateDocument.inc';
$doc = new DocxpressoCreateDocument();
$format = '.pdf';//.pdf, .doc, .docx, .odt, .rtf
//html code
$html = '
<p>This is a very beautiful<footnote>Beauty is <em style="color:red">in the eye</em> of the beholder.</footnote> document with a footnote.</p>
';
$doc->html(array('html' => $html));
//include in the render method the path where you want your document to be saved
$doc->render('html_footnote' . $format); 
//echo a link to the generated document
echo 'You may download the generated document from the link below:<br/>';
echo '<a href="' . 'html_footnote' . $format . '">Download document</a>';

DOWNLOAD:

<endnote> & <footnote>

Child elements

Any HTML5 inline tag: span, strong, i, em, …

Attributes

No attributes.

Math equations

The <math> tag allows for the insertion of math equation into the current document in MathML 1.0 format.

A simple example on how to do so is just given by:

<?php
/**
* This sample script inserts some (extended) HTML5 code into the document
*/
require_once 'pathToDOCXPRESSO/CreateDocument.inc';
$doc = new DocxpressoCreateDocument();
$format = '.pdf';//.pdf, .doc, .docx, .odt, .rtf
//html code
$html = '
<p>A document with some math inserted as extended HTML:</p>
<p style="text-align: center">
<math base-font-size="18">
<mrow>
<mrow>
<mstyle mathvariant="bold">
<mrow>
<mi>A</mi>
</mrow>
</mstyle>
<mo stretchy="false">=</mo>
<mfenced open="[" close="]">
<mrow>
<mtable>
<mtr>
<mtd>
<mrow>
<mi>a</mi>
</mrow>
</mtd>
<mtd>
<mrow>
<mi>b</mi>
</mrow>
</mtd>
</mtr>
<mtr>
<mtd>
<mrow>
<mi>c</mi>
</mrow>
</mtd>
<mtd>
<mrow>
<mi>d</mi>
</mrow>
</mtd>
</mtr>
</mtable>
</mrow>
</mfenced>
</mrow>
</mrow>
</math>
</p>
';
$doc->html(array('html' => $html));
//include in the render method the path where you want your document to be saved
$doc->render('html_math' . $format); 
//echo a link to the generated document
echo 'You may download the generated document from the link below:<br/>';
echo '<a href="' . 'html_math' . $format . '">Download document</a>';

DOWNLOAD:

The support of Math in Word formats (.doc and .docx) is only partial because there are some limitations in the formatting of the equations.

<math>

Child elements

Any MathML 1.0 content.

Attributes

No attributes.

Page numbering

The <page> tag allows for the insertion of page numbering into the document.

A simple example of use is given by:

<?php
/**
* This sample script inserts some (extended) HTML5 code into the document
*/
require_once 'pathToDOCXPRESSO/CreateDocument.inc';
$doc = new DocxpressoCreateDocument();
$format = '.pdf';//.pdf, .doc, .docx, .odt, .rtf
//html code
$html = '
<header style="min-height: 1cm">
<p style="text-align: right; font-weight:bold; color: #777;"> Page <page/> of <page type="count"/></p>
</header>
<p>A simple document with two pages.</p>
<p style="page-break-before: always">The second page.</p>
';
$doc->html(array('html' => $html));
//include in the render method the path where you want your document to be saved
$doc->render('html_page' . $format); 
//echo a link to the generated document
echo 'You may download the generated document from the link below:<br/>';
echo '<a href="' . 'html_page' . $format . '">Download document</a>';

DOWNLOAD:

Its corresponding schema is given by:

<page>

Child elements

No child elements

Attributes

type (type: string, default: number). The possible values are number (current page number) or count (toal page count).
format (type: string, default: 1). The possible values are: 1,a,A,i or I.
offset (type: integer, default: 0). The starting value.

Tabs

The <tab> tag allows for the insertion of tabs in the document.

A simple example of use is given by:

<?php
/**
* This sample script inserts some (extended) HTML5 code into the document
*/
require_once 'pathToDOCXPRESSO/CreateDocument.inc';
$doc = new DocxpressoCreateDocument();
$format = '.pdf';//.pdf, .doc, .docx, .odt, .rtf
$html = '<p>
First
<tab position="200" type="right" leader="dotted" />
Second
<tab position="200" type="right" leader="dotted"/>
Third.
</p>';
$doc->HTML(array('html' => $html));
//include in the render method the path where you want your document to be saved
$doc->render('html_tab' . $format); 
//echo a link to the generated document
echo 'You may download the generated document from the link below:<br/>';
echo '<a href="' . 'html_tab' . $format . '">Download document</a>';

DOWNLOAD:

Its corresponding schema is given by:

<tab>

Child elements

No child elements

Attributes

type (type: string, default: left). Specifies tab alignment, possible values are: left, center, right or char.
leader (type: string, default: .). The character used for alignment (ignored if the type does not equal char).
character (type: string, default: none). Specifies the leader char. The available options are: none, dash, dot-dash, dot-dot-dash, dotted, long-dash, solid and wave.
position (type: integer). Distance from the left margin or the left indent given in points (if not given the default value for each document format will be used).

The <toc> tag allows for the insertion of a table of contents within the document.

A simple example of use is given by:

<?php
/**
* This sample script inserts some (extended) HTML5 code into the document
*/
require_once 'pathToDOCXPRESSO/CreateDocument.inc';
$doc = new DocxpressoCreateDocument();
$format = '.pdf';//.pdf, .doc, .docx, .odt, .rtf
//html code
$html = '
<style>
h1{font-family: Arial; font-size: 18pt; color: #b70000; page-break-before: always;}
h2{font-family: Arial; font-size: 16pt; color: #4456ff}
</style>
<p style="font-size: 16pt; font-weight: bold; color: #5566cc;">Table of Contents</p>
<toc>
<outline level="1" style="font-weight: bold" />
<outline level="2" style="color: #000077" />
</toc>
<h1>First title</h1>
<p>Sample text.</p>
<h2>Subtitle</h2>
<p>Another text.</p>
<h1>Second title</h1>
<p>Final text.</p>
';
$doc->html(array('html' => $html));
//include in the render method the path where you want your document to be saved
$doc->render('html_toc' . $format); 
//echo a link to the generated document
echo 'You may download the generated document from the link below:<br/>';
echo '<a href="' . 'html_toc' . $format . '">Download document</a>';

DOWNLOAD:

Its corresponding schema is composed of two elements:

<toc>

Child elements

outline: this optional child element specifies the formatting of the different TOC levels.

Attributes

title (type: string). An optional TOC title (level 0 for styling). The possible values are number (current page number) or count (toal page count).
leader (type: string, default: ‘.’). The leader char joining the toc entry with the corresponding page number.
linked (type: boolean, default: true). If true the toc entries are a link the corresponding content.
level (type: integer, default: 6). The highest heading level that is parsed in the TOC.

<outline>

Child elements

No child elements.

Attributes

level (type: integer). The level to which appy the style (from 0 to 6).
style (type: string). The entry styles in CSS format.

Advanced Document Components Extended Html5

General considerations

Charts

<chart>

<legend>

<axis>

<grid>

<component>

<transform3D>

<series>

<ser>

<categories>

<category>

<data>

Sample instance

Date

<date>

Endnotes and footnotes

<endnote> & <footnote>

Math equations

<math>

Page numbering

<page>

Tabs

<tab>

Table of contents

<toc>

<outline>

WHY DOCXPRESSO

DEVELOPERS

For your business

DX product features

RESOURCES