Comet 4 offers from version 4.0.5 the possibility to export text frames as HTML documents . Style information is output as CSS file. The goal is an möglist exact representation of the InDesign® contents in the HTML document.

Since Comet 4.1 R20505 there is the possibility to import HTML-formatted text into InDesign® documents

The Comet Plugins export the formatted text of a frame. Style information of the document is collected and stored in a separate CSS file in the "resources" subfolder of the target folder. The CSS style information results from paragraph formats, character formats, table formats and cell formats. Basically all supported styles of the document are exported.

Please note: The HTML export does not generate HTML pages of the InDesign® document pages.

Since HTML has a text structure similar to that of InDesign®, the text structure is translated as follows:

• Sales -
• Style - <span>
• Table - <table>
• Unsorted list - <ul>
• Sorted list - <ol>
• Inline Frame - <iframe>

Local style changes are written directly to the style attribute of the respective element.

Character styles are export as <span>-elements in HTML. The supported parameters are the same as with paragraph styles.

Tables are exported as <table>-elements in HTML. They support header and footer rows, merged cells and the following table format attributes:

Table cells are exported as <td>-elements. The following format options are supported:

Any InDesign® control characters are either not available in HTML or have a different meaning. These characters will be exported as follows:

<?ACE HEXCODE ?>, e.g. <?ACE 8 ?> for the right-aligned TAB.

The following characters are treated like this:

When Import these characters are of course converted back.

To define TaggedText directly in HTML, use the pseudo tag

<?IDTT ?>

The content of these tags is directly included in the result without further conversions. Whitspaces between the text and the ? will be ignored.

Inline frames are exported as separate HTML documents and linked via the iframe element. The filename is the UID of the frame + ".html". Inline text frames and picture frames are supported. In the case of an image frame, there is an option to link the image only or copy it to the "resources" subfolder of the destination folder. If a linked image no longer exists, a PNG of the image will be exported and also placed in the "resources" subfolder. The image name corresponds to the original name of the image, with the extension ".png" if the original image was not a PNG.

InDesign® distinguishes between two types of style hierarchies: The first type determines on which style a style is based, the second under which style folder it is subordinate. Both types are taken into account in HTML export.

To maintain the style folder hierarchy, styles are noted in the CSS as follows:

p.formatGroup1.paragraph format2 { }

application in the document takes place as follows:

<p class="FormatGruppe1 Absatzformat2"></p>

This way you can track which style was in which style folder.

It is unfortunately not directly possible in CSS to create styles based on other styles. The Comet solves this problem by noting selectors for sub styles in the CSS styles. The styles have as properties the difference to their parent style. Then only the lowest style of the hierarchy chain is used.

In the following example, "paragraph format1" changes the typeface, "paragraph format2" is based on "paragraph format1" and changes the font size.

The CSS notation is as follows:

p.paragraphFormat1, p.paragraphFormat2 { font-family: 'Calibri'; }
p.paragraphFormat2 { font-size: 14pt; }

application in the document takes place as follows:

<p class="paragraphFormat2"></p>

In InDesign®, it is possible to assign names to styles without any major restrictions. In HTML and CSS you are unfortunately somewhat restricted. In CSS the following characters have a special meaning

! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [ \ ] ^ ` { | } ~

In InDesign® inheritance is already built into the definition of styles, and spaces are (normal) part of the style name. If you want to use styles with spaces in the HTML code, the spaces must be encoded accordingly, e.g. with %20. More info about the encodings can be found below.

Furthermore CSS names must not start with a number or with a hyphen followed by a number. For this reason, each style name gets the prefix "priint_".

After Comet 4.1 R21800 there are two different ways to export style names. For this the parameter "kCSSEscapeMode" of the cScript function html::export_ is used.

The following modes are available:

Hex mode:
In this mode, each of the characters listed above is replaced by a hex escape sequence: 0x + hex code of the character. For example 0x002B for the equal sign. You should take care to avoid such sequences in your original style names, as a possible translation is no longer unambiguous. The advantage of this mode is that style names in CSS and HTML are exactly the same.

Examples:

Slash mode:
This mode places a backslash in front of each unsupported character in the CSS definition, but not in the HTML text application. This makes the style names easier to read, but CSS definition and HTML application are different, which makes editing by e.g. text substitution more difficult. In addition, some characters are handled separately:

Examples:

The HTML import is currently under development and is not part of the support of Werk!

Please note that only a limited set of HTML and CSS features can be supported.

Following tags are supported:

Other tags like <div> or comments (<-- ... -->) are ignored

Currently the CSS style definitions written by the export not imported!

According to the HTML export, formats on the HTML node are determined by the "class" attribute. The "class" attribute of the following nodes corresponds to the following formats:

"priint_"-Prefixes in style names are removed. Characters reserved in HTML that have been replaced by an escape sequence are unescaped.

The import of CSS attributes is currently only supported as a style attribute of an HTML node (e.g. <span style="font-size:20pt">).

The following applies: The "lowest" attribute always has priority, i.e. the attribute that is closest to the content in the hierarchy. For example, the text attribute "font-size" will be overwritten on a <p> node if a <span> node sets the same attribute below it.

The following attributes are supported:

<td style="width:60pt">Title</td>

HTML entities in decimal (e.g. &#160) and hexadecimal notation (e.g. &#xA0) are supported and replaced by the corresponding characters (e.g. for html::to_tagged or direct import into Illustrator). Additionally, keywords for HTML entities (e.g. &nbsp;) are supported. You can find the complete list at https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

There are cScript functions available for importing and exporting HTML:

Export:

• html::export_
• frame::export_html (deprecated)

Import:

• html::to_tagged

Misc.:

• html::tidy

Simple export of a text frame:

int main()
{
	String 		folder 		= string::alloc();
	String 		docName 	= string::alloc("HTML Export");
	int 		err 		= 0;

	err = file::select_folder(folder);
	if (err) 
	{
	 return 0;
	}

	document::name(docName);

	html::export_frame( gFrame,
	 			"kOutputFolder", folder,
	 			"kOutputName", docName,
	 			"kDocTitle", "Hello World",
	 			"kCSSEscapeMode", 0);

	return 0;
}