Adobe InDesign to HTML Tutorial
Budget: ₹75,000 – ₹150,000 INR
InDesign to HTML Export Conversion Process Detailed Explain with Programming logic
This document provides step-by-step instructions for exporting Adobe InDesign documents to HTML format, ensuring that the exported HTML matches the sample format provided. It covers export settings, handling of tables and shading, text styles, and post-processing.
1. PRE-EXPORT PREPARATION
Before exporting from InDesign:
•
Apply Paragraph and Character Styles consistently.
•
For tables, apply Table and Cell Styles for borders, shading, and alignment.
2. EXPORTING TO HTML
Steps to export:
1. Go to File > Export.
2. Choose Format: HTML.
3. In the Export HTML dialog:
a)
General Tab – Select “Based on Page Layout” to preserve absolute layout.
b)
CSS Options – Enable “Include Classes for Paragraph and Character Styles”.
c)
Check “Preserve Local Overrides” to retain inline <font> tags and inline CSS.
d)
Image Options – Only convert objects to images when required.
3. TABLES & SHADING
•
Tables export as <table> elements with inline Html.
•
Table header rows will map to classes like “TCH”.
•
Body cells map to “TB” with padding, alignment, and font inline Html.
•
Shading applied in InDesign exports as inline “background-color”.
4. TEXT FORMATTING
•
Paragraph Styles export as classes: e.g., H1, H2 to H7, Text_ind, Text_flush.
•
Bold/Italic/Underline/superscript exports as <font class=“Bold”> with inline CSS.
•
Overrides in InDesign become <font class='CharOverride-*'> in HTML.
•
Special checkboxes export as Wingdings symbols (☐ for empty, ☒ for checked).
5. SPACING & SEPARATORS
•
Horizontal rules in InDesign export as <div> with border-bottom styling.
•
Indents are preserved using “text-indent” and “text-align”.
•
Alignment are preserved using “Ragged Right” and “Justification”.
6. POST-PROCESSING EXPORTED HTML (INLINE STYLES)
When exporting from InDesign, the generated HTML references an external stylesheet named idGeneratedStyles.css. To simplify file management and ensure self-contained HTML, this stylesheet should be merged into the HTML file as inline styles.
Steps:
1.
Locate Exported Files
•
The export process creates:
o
exported.html (main HTML file)
o
idGeneratedStyles.css (external stylesheet)
2.
Identify CSS References
•
In the <head> of the HTML, InDesign inserts:
•
<link rel="stylesheet" href="idGeneratedStyles.css">
3.
Merge Styles into HTML
•
Each CSS class defined in idGeneratedStyles.css (e.g., .paraStyle, .charStyle, .tableStyle) must be applied directly as style attributes in the corresponding HTML tags.
•
Example conversion:
Before (with external CSS):
<p class="paraStyle">Sample text</p>
After (inline style applied):
<p style="font-size:14px; line-height:1.5; color:#333;">Sample text</p>
4.
Remove Class References
•
Once styles are applied inline:
o
Delete the class="..." attributes from elements.
o
Remove the <link rel="stylesheet" ...> reference from the <head>.
5.
Save as Self-Contained HTML
•
The final file should consist of:
o
The cleaned HTML structure.
o
Inline style="" attributes for all formatting.
o
No dependency on idGeneratedStyles.css.
Benefits of Inline HTML Conversion
•
Ensures portability — a single HTML file can be used without carrying external CSS.
o
Guarantees style consistency across platforms where external CSS may not load.
7. TABLE HANDLING IN HTML EXPORT
7.1 Default Style
•
InDesign exports all tables with class="No-Table-Style" when no custom table style is applied.
•
Table cells are further marked as:
o
TCH → Table header cells (bold text, border-bottom lines).
o
TB → Table body cells (normal text).
o
Texttable / Texttable_wrap → Paragraph-level text inside cells.
7.2 Shading Rules
•
Table Headers (TCH)
o
Exported without shading.
o
Styled with bold fonts and bottom borders.
•
Table Body (TB)
o
First row: shaded background (for emphasis).
o
Remaining rows: alternate shading (striped effect).
o
This pattern is used primarily for financial tables.
7.3 Types of Tables
A. No-Shade Tables
•
Appears as <table class="No-Table-Style"> with simple rows (TB) and text (Texttable).
•
Used in:
o
Offering tables
o
Signature tables
•
No shading applied; only structural borders and alignment.
B. Shaded Tables (Financial/Numerical)
•
Exported with <tbody> carrying numeric styles, e.g.:
o
Tbody_rightalign → right-aligned numeric values.
o
Tbody_bracket → bracketed negative values.
o
Tbody_Centrealign → centered alignment.
o
Tbody_rule1, Tbody_rule2 (+ bracketed variants) → apply alternating shading rules.
InDesign Export
Converted Inline HTML
Rule/Explanation
<td class="No-Table-Style TCH"><p class="TCH"><span class="Bold">Actual</span></p></td>
<td style="padding:3pt;font-family:'Times New Roman',serif;font-size:9pt;font-weight:bold;text-align:center;">Actual</td>
Remove classes, flatten <p>/<span>, apply inline CSS
<td class="No-Table-Style TB"><p class="Tbody_rule1">35,224,525</p></td>
<td style="padding:3pt;font-family:'Times New Roman',serif;font-size:10pt;text-align:right;">35,224,525</td>
Remove TB/Tbody_rule1, flatten, apply inline font + alignment
<tr class="No-Table-Style" style="background:#CCEEFF;">
<tr style="background:#CCEEFF;">
Keep shading, remove classes
8. IMAGE HANDLING IN HTML EXPORT
By default, InDesign places exported images in a separate folder (e.g., exported_html-web-resources) and references them using relative paths in the HTML file.
For example:
<img src="exported_html-web-resources/image1.png" alt=""/>
Required Adjustment
To simplify deployment, all images should be extracted into the same folder as the main HTML file, and linked directly by filename without any folder path.
Steps:
1.
Locate Exported Images
•
InDesign generates a sub-folder (e.g., exported_html-web-resources) containing .png, .jpg, or .gif files.
2.
Move Images
•
Copy or move all image assets into the same folder as the exported HTML file.
3.
Update Image References
•
In the HTML file, update <img> tags so that src points directly to the filename.
Before (default InDesign export):
<img src="exported_html-web-resources/image1.png" alt=""/>
After (adjusted for same folder):
<img src="image1.png" alt=""/>
4.
Consistency Check
•
Ensure all <img> tags reference images only by filename (no folder path).
•
Verify that the HTML file and all images are stored together in a single folder.
Benefits of Direct Image Linking
•
Portability – one folder contains everything (HTML + images).
This document provides step-by-step instructions for exporting Adobe InDesign documents to HTML format, ensuring that the exported HTML matches the sample format provided. It covers export settings, handling of tables and shading, text styles, and post-processing.
1. PRE-EXPORT PREPARATION
Before exporting from InDesign:
•
Apply Paragraph and Character Styles consistently.
•
For tables, apply Table and Cell Styles for borders, shading, and alignment.
2. EXPORTING TO HTML
Steps to export:
1. Go to File > Export.
2. Choose Format: HTML.
3. In the Export HTML dialog:
a)
General Tab – Select “Based on Page Layout” to preserve absolute layout.
b)
CSS Options – Enable “Include Classes for Paragraph and Character Styles”.
c)
Check “Preserve Local Overrides” to retain inline <font> tags and inline CSS.
d)
Image Options – Only convert objects to images when required.
3. TABLES & SHADING
•
Tables export as <table> elements with inline Html.
•
Table header rows will map to classes like “TCH”.
•
Body cells map to “TB” with padding, alignment, and font inline Html.
•
Shading applied in InDesign exports as inline “background-color”.
4. TEXT FORMATTING
•
Paragraph Styles export as classes: e.g., H1, H2 to H7, Text_ind, Text_flush.
•
Bold/Italic/Underline/superscript exports as <font class=“Bold”> with inline CSS.
•
Overrides in InDesign become <font class='CharOverride-*'> in HTML.
•
Special checkboxes export as Wingdings symbols (☐ for empty, ☒ for checked).
5. SPACING & SEPARATORS
•
Horizontal rules in InDesign export as <div> with border-bottom styling.
•
Indents are preserved using “text-indent” and “text-align”.
•
Alignment are preserved using “Ragged Right” and “Justification”.
6. POST-PROCESSING EXPORTED HTML (INLINE STYLES)
When exporting from InDesign, the generated HTML references an external stylesheet named idGeneratedStyles.css. To simplify file management and ensure self-contained HTML, this stylesheet should be merged into the HTML file as inline styles.
Steps:
1.
Locate Exported Files
•
The export process creates:
o
exported.html (main HTML file)
o
idGeneratedStyles.css (external stylesheet)
2.
Identify CSS References
•
In the <head> of the HTML, InDesign inserts:
•
<link rel="stylesheet" href="idGeneratedStyles.css">
3.
Merge Styles into HTML
•
Each CSS class defined in idGeneratedStyles.css (e.g., .paraStyle, .charStyle, .tableStyle) must be applied directly as style attributes in the corresponding HTML tags.
•
Example conversion:
Before (with external CSS):
<p class="paraStyle">Sample text</p>
After (inline style applied):
<p style="font-size:14px; line-height:1.5; color:#333;">Sample text</p>
4.
Remove Class References
•
Once styles are applied inline:
o
Delete the class="..." attributes from elements.
o
Remove the <link rel="stylesheet" ...> reference from the <head>.
5.
Save as Self-Contained HTML
•
The final file should consist of:
o
The cleaned HTML structure.
o
Inline style="" attributes for all formatting.
o
No dependency on idGeneratedStyles.css.
Benefits of Inline HTML Conversion
•
Ensures portability — a single HTML file can be used without carrying external CSS.
o
Guarantees style consistency across platforms where external CSS may not load.
7. TABLE HANDLING IN HTML EXPORT
7.1 Default Style
•
InDesign exports all tables with class="No-Table-Style" when no custom table style is applied.
•
Table cells are further marked as:
o
TCH → Table header cells (bold text, border-bottom lines).
o
TB → Table body cells (normal text).
o
Texttable / Texttable_wrap → Paragraph-level text inside cells.
7.2 Shading Rules
•
Table Headers (TCH)
o
Exported without shading.
o
Styled with bold fonts and bottom borders.
•
Table Body (TB)
o
First row: shaded background (for emphasis).
o
Remaining rows: alternate shading (striped effect).
o
This pattern is used primarily for financial tables.
7.3 Types of Tables
A. No-Shade Tables
•
Appears as <table class="No-Table-Style"> with simple rows (TB) and text (Texttable).
•
Used in:
o
Offering tables
o
Signature tables
•
No shading applied; only structural borders and alignment.
B. Shaded Tables (Financial/Numerical)
•
Exported with <tbody> carrying numeric styles, e.g.:
o
Tbody_rightalign → right-aligned numeric values.
o
Tbody_bracket → bracketed negative values.
o
Tbody_Centrealign → centered alignment.
o
Tbody_rule1, Tbody_rule2 (+ bracketed variants) → apply alternating shading rules.
InDesign Export
Converted Inline HTML
Rule/Explanation
<td class="No-Table-Style TCH"><p class="TCH"><span class="Bold">Actual</span></p></td>
<td style="padding:3pt;font-family:'Times New Roman',serif;font-size:9pt;font-weight:bold;text-align:center;">Actual</td>
Remove classes, flatten <p>/<span>, apply inline CSS
<td class="No-Table-Style TB"><p class="Tbody_rule1">35,224,525</p></td>
<td style="padding:3pt;font-family:'Times New Roman',serif;font-size:10pt;text-align:right;">35,224,525</td>
Remove TB/Tbody_rule1, flatten, apply inline font + alignment
<tr class="No-Table-Style" style="background:#CCEEFF;">
<tr style="background:#CCEEFF;">
Keep shading, remove classes
8. IMAGE HANDLING IN HTML EXPORT
By default, InDesign places exported images in a separate folder (e.g., exported_html-web-resources) and references them using relative paths in the HTML file.
For example:
<img src="exported_html-web-resources/image1.png" alt=""/>
Required Adjustment
To simplify deployment, all images should be extracted into the same folder as the main HTML file, and linked directly by filename without any folder path.
Steps:
1.
Locate Exported Images
•
InDesign generates a sub-folder (e.g., exported_html-web-resources) containing .png, .jpg, or .gif files.
2.
Move Images
•
Copy or move all image assets into the same folder as the exported HTML file.
3.
Update Image References
•
In the HTML file, update <img> tags so that src points directly to the filename.
Before (default InDesign export):
<img src="exported_html-web-resources/image1.png" alt=""/>
After (adjusted for same folder):
<img src="image1.png" alt=""/>
4.
Consistency Check
•
Ensure all <img> tags reference images only by filename (no folder path).
•
Verify that the HTML file and all images are stored together in a single folder.
Benefits of Direct Image Linking
•
Portability – one folder contains everything (HTML + images).