HTML - ePub export

The HTML / ePub export functionality will export a structured HTML file (or ePub) of your document.
If the document contains multiple alternate layouts, it is possible to specify which alternate layout of your document should be exported to HTML.

Our intent is to export the structure and the content of a document to HTML.
The layout of the document is not represented in the exported HTML file.
This way, developers will have the possibility to repurpose the exported HTML to what is defined by the project requirements.

These project requirements could be:

Different purposes (or a combination of them) for your final HTML (landing pages vs mailings,...)
Different devices (PC, tablet, phone)
Different browsers or clients (Internet Explorer (IE), Firefox, Chrome, safari, Opera, ..)
Browser versions support (IE8, IE9,..)
Different resolutions
Responsive design vs non-responsive design
Project and customer related requirements
Different HTML frameworks (Twitter bootstrap, Zurb foundation,..)
...

As all these different requirements will have an impact on how the final HTML (and CSS) will look like, we will leave these design decisions in your hands.
You could create an HTML template for a landing page and a template for your e-mail and inject the content of the exported HTML in both.
Or you could inject an own CSS file into the exported HTML to take care of the styling.

The HTML export will export following information:

Frame tag
Private frame data
Character Style ID
Paragraph Style ID
Layer as attribute or as div
Variables rendered or as placeholder

Attributes are added on different levels in the html output file.

On frame level

Tag values are saved to the “data-tag” attribute.
Layer values are saved to the “data-layer-name” attribute. The id of the layer, which can be used in API calls, is stored into the “data-layer-id” attribute.

Sample

 <div data-node="0534B85B-FD1D-BA3F-397E-DC55EA982CBE" 

   data-type="image" 
   data-tag="header" 
   data-layer-id="B231354E-01B7-730C-0921-DC559EE28F76" 
   data-layer-name="New Layer" 
   id="div-1">
    <img src="images/Header_emailing.jpg" 
       alt="New Frame" 
       data-img-id="0d989364-a549-44ab-a414-02446555082a" 
       width="443" height="257" />
</div>

On paragraph level

In text frames you can apply paragraph styles to text. On the paragraph tag (<p>) an attribute is added with the id of this style. This can be used in API calls.
The paragraph style name can still be found in the class definition.

Sample

 <p id="para-8" 
 data-paragraph-style-id="6BA37D37-88B4-36C4-06D0-DC8B2C218634" 
 class="Centered para-style-override-1">
 <span>........</span>
</p>

On span level

In text frames you can apply character styles to text. On the span tag (<span>) an attribute is added with the id of this style. This can be used in API calls.
The character style name can still be found in the class definition.

Sample

 <span data-character-style-id="9BEA6424-4FE5-9931-A919-DC8A76EB9CA2" 
 class="greenish char-style-override-1">
 I wish you a good game and the chance to be with you!
</span>

Name: Name for the export settings
Output Format: Output format (HTML or e-Pub)
Embed CSS: This will embed a standard CSS to make it easy to replace it by a CSS of your own
Image Alignment: Specify the standard alignment in HTML for all images used in the CHILI Publisher document
Space before images: Specifies the space to be added before an image
Space after images: Specifies the space to be added after an image
Optimize images: Option to have images optimised using a conversion profile in CHILI Publisher
Conversion profile: Specify the conversion profile to use.
Render variables: This option will place the actual data from the variable fields in the HTML instead of placeholders
Export private data: Exports private data as an attribute on the frame
Export layers as div's: Each layer in the CHILI Publisher document will be converted to a separate div instead of exporting it as an attribute of a frame. It will contain the elements of the CHILI Publisher document that resided on that layer. eg: an imageframe is part of layer "foreground". By default the frame will have an attribute "layer" with the name of that layer. With this option selected, a div will be created with the name "foreGround" containing the imageFrame.
Fonts conversion table: this allows you to change the fonts used in the document to any font you would like to use for the HTML version.
- CHILI name: Name of the font in the CHILI Publisher document
- HTML font family: Name of the font family you want to use in HTML
- HTML font weight: specify the weight of the font to use in the HTML version
- HTML font style: Style of the font to be use in the HTML version

Export Private data

When the “Export private data” option is checked, the private data will be added as attributes to the div.

Sample

 <div data-node="0534B85B-FD1D-BA3F-397E-DC55EA982CBE" 
   data-type="image" 
   data-tag="header" 
   data-customKey="customValue" 
   id="div-1">
     <img src="images/Header_emailing.png" 
        alt="New Frame" 
data-img-id="0d989364-a549-44ab-a414-02446555082a" width="443" height="257" />
</div>

To be html5 compliant, it’s advised to use a “data-“ prefix for the private data keys.

Export layers as div

When the “Export layers as divs” option is checked, an extra layer will be added for the layers. Those layers contain their child divs.
The child divs will not contain the layer information anymore.

Sample

 <div class="chiliBodyWrapper">
   <div class="chiliLayer" 
      data-layer-id="B231354E-01B7-730C-0921-DC559EE28F76" 
      data-layer-name="New Layer">
        ...child divs...
   </div>
</div>

Browser not supported