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.
  
  

 <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.

 <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.

 <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. 

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

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.

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