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

Use this MS Word template:

Download 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

Code for AEM