Upload DOCX
Upload a Word document to convert it to HTML code for Canada.ca:
Instructions
On this page
- Step 1: Use the Word template
- Step 2: Apply Word styles
- Step 3: Upload doc
- Step 4: Use code in prototypes
Step 1: Use the Word template
Use this MS Word template:
In your Word doc, go to File > Options, and select Add-ins. At the bottom, go to Manage, select Templates, and click Go. Click on Attach and select the template your downloaded. Tick "Automatically update document styles". Click OK.
You can also start from one of the sample documents:
Sample documents
Step 2: Apply Word styles
Basic styles (headings, bullet lists, bold, italics, etc.) will work seamlessly and be turned into the right HTML elements.
Some custom styles have been added (available in MS Word in the styles ribbon):
Alerts
Alerts need a heading to work properly.
- apply the right alert style to the heading (alert-info, alert-warning, alert-danger, etc.)
- apply "alert-text" to the text within the alert
- apply "alert-bullet" to a bullet within the alert
Buttons
Apply the right button style to the text (btn-cta, btn-danger, btn-primary, etc.). Make sure to add a hyperlink to the button text.
Expand-collapse
- apply the "summary" style to the visible part of the expand collapse
- use any style for the part of the content that is hidden
- after the hidden part, add the word "end" (no caps, no bold, nothing), and apply the "details" style to that word. This will tell the script when to close the details HTML tag.
Internal links
The script can handle internal links and create anchors automatically.
- In Word, highlight the text you want to add an hyperlink to
- Insert a hyperlink
- Choose “Places in the document”
- Select the heading you want the link to go to
Labels
Apply the right label style to the text (label-danger, label-default, label-info, label-primary, etc).
Multi-page navigation
- before the navigation item, the add the word "start" (no caps, no bold, nothing), and apply the "multi-pate-start" style to that word.
- apply the "multi-page-active" style to the navigation item for the page you're on
- apply the "multi-page-item" style to all other items in the navigation
- after the navigation items, add the word "end" (no caps, no bold, nothing), and apply the "multi-page-end" style to that word.
Numbered list
Apply the "numbered" style to the items in the numbered list.
Panels
Panels need a heading to work properly.
- apply the right panel style to the heading (panel-default, panel-info, panel-danger, etc.)
- apply "panel-text" to the text within the panel
- apply "panel-bullet" to a bullet within the panel
Quotations
- apply the "quote" style to the 1st paragraph you want to appear as a quotation
- apply the "quote-par" style to another paragraph you want in the same quotation
- apply the "quote-source" style to the source you want to show for the quotation (optional)
Subway navigation
- apply the "subway-group-h1" to the page group name (as the very first thing in your Word document)
- apply the "subway-nav-active" style to the navigation item for the page you're on
- apply the "subway-nav" style to all other items in the navigation
- apply the "subway-section-h1" style to the H1 of the page you're on (right after the list of subway items)
Wells
- apply the "well" style to the 1st paragraph you want to have in a new well
- apply the "well-paragraph" style to the a paragraph you want to have in that same well
- apply the "well-bullet" style to the a bullet item you want to have in that same well
Step 3: Upload doc
Go to Upload DOCX, then click on Upload DOCX file.
Step 4: Use code in prototypes
The script generates 2 code snippets: the code for the full page (that you copy in GitHub, for example), and the code for the main section (that you can copy in AEM, for example).
Code for full page
- Open the “Code for full page” expand-collapse
- Click on “Copy to clipboard”
- If you want the code to be formatted properly, go to an HTML formatter (for example, https://www.freeformatter.com/html-formatter.html), paste the code
- Paste the code where you need it (for example, in a GitHub repo for your organization)
Code for AEM
- Open the “Code for AEM” expand-collapse
- Click on “Copy to clipboard”
- If you want the code to be formatted properly, go to an HTML formatter (for example, https://www.freeformatter.com/html-formatter.html), paste the code
- In AEM, use an HTML component
- Paste the code
- You may need to remove the “main” tag and the “h1” tag (and the closing “main” tag), unless you’re deleting the H1 that comes automatically in AEM