CLF2WETX Index Page

Conversion Steps (2021)
Conversion Process (2025)

Check all sites for CLF / WET version List of Sites 2014 List of Sites 2016 or Re-check all sites (takes about 5 minutes)

Delivery checklist:

Figures -->

Communicate
Ask for help if you need it
Don't rush
Finish early
Check your work

<h2>Table of Contents</h2>

<h2>Table des matières</h2>

Fix missing footnote numbers in MS Word

</strong><br />
</strong></p>
<p>

Adding extra Paragrph Breaks in MS Word

F/R
.^p
with .^p^p

and then
. ^p
with .^p^p

This can fail if there is a space between the period and the ^p

Using Wildcards https://wordmvp.com/FAQs/General/UsingWildcards.htm

. @^13
.^p^p

This should get you much closer ...

Funny dash ‑ zzz -

Remove tag span class=new_class[0-9]+NN

Replace tag img with alt=(.*) with IMAGE:$1, then blow away all images (since they have nothing left to offer)

Useful characters: » » «

Good regex

subst m: "C:\Users\robb\Documents\Imatics Work\devfiles_f\clients"

More regex examples: \d (any number, handy for new_class)

https://docs.microsoft.com/en-us/dotnet/standard/base-types/regular-expression-language-quick-reference?redirectedfrom=MSDN

Fix supersripted numbers that MS Word loses (for some strnage reason ...)

([0-9])e
$1 <sup>e</sup>

note the space at the end of each, the search and tthe replace

two or more consecutive spaces in a row --> [ ]{2,}

two or more caps in a row <[A-Z]{2,}>

clear td of attributess <td( .*)"> / <td>

+ </td>
</td>

replace a TD with itself and an id of itself

Sweeper DOES NOT LIKE

Structure doesn't like <h2><img etc ... or <h2>Blah blah bla.</h2>

remove spaces " +" / " "

remove extra <ul> and broken nested <ul> when copy paste from MS Word

<p> </p> replace witrh nothing
look for all the other empty <p> and get rid of them, try to do this very well ...
<p><strong> </strong></p> replace witrh nothing
<p><em> </em></p> replace witrh nothing
etc, then start cleaning up <ul>s

</ul>\r\n<ul> replace with nothing
</li>\r\n<ul> replace with <ul>
</ul>\r\n</ul> replace with </ul></li>\r\n</ul>
</ul>\r\n</ul> replace with </ul></li>\r\n</ul>

double nested <ul><ul> have to find and fix manually by unindenting

remove blank lines after each "replace with nothing" and then repeat the replace
Find: [\r\n]{2,}
Replace: \n

.* (any number of characters)

basic table start

class="active" seems to do the same as class="well"

Table with 3 columns and prescribed widths on col 2 and 3

<table class="table table-bordered">
<caption class="text-left"><strong>(b) Authorities requested</strong><br /> (In thousands of dollars)</caption>
<colgroup>
<col />
<col class="width-10" /> (doesn't validate in WET4)
<col class="width-10" />
<col class="col-xs-6" />
<col class="col-xs-2" />
</colgroup>
<thead class="well">

<table class="table table-bordered">
<caption class="text-left">Mitigate threats and protect Sable Island Sweat Bee and its habitat through site-level stewardship and management</caption>
<colgroup>
<col style="width:25%">
<col style="width:25%">
<col style="width:25%">
<col style="width:25%">
</colgroup>

if you want to force a cation in DOM_table_accessibility, start the preceeding paragraph with Table or Figure, or change the tag to a <pre>

<col and <colgroup cannot have span

Sweeper Clean_word_clf2 now changes footnotes from Roman to Normal, use arbitrary sweep to change back (does up to 14)

In French, use this single quote

’ (alt 0146) instead of '

Some dummy styles to help coding WET documents where these are tin the defaults CSS files

<style>

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.4375;
color: #333;
background-color: #fff;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

.table-bordered {
border: 1px solid #ddd;
}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
border: 1px solid #ddd;
}

caption {
padding-top: 8px;
padding-bottom: 8px;
color: #6f6f6f;
text-align: left;
}

.small {
font-size: 87%;
}

.mrgn-lft-md {
margin-left: 15px;
}

.mrgn-lft-lg {
margin-left: 30px;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.normalize
{
font-weight: normal;
}

.fnt-nrml
{
font-weight: normal;
}

.nowrap
{
white-space: nowrap;
}

.list-unstyled
{
list-style: none;
}

.lst-none
{
list-style-type: none;
}

.lst-spcd>li {
margin-bottom:10px
}

th {
text-align: left;
}

.well {
background-color: #f0f0f0;
}

.bg-info {
background-color: #d9edf7;
}

.wb-inv {
display: none;
}

.wb-inv {
clip: rect(1px,1px,1px,1px);
height: 1px;
margin: 0;
overflow: hidden;
position: absolute;
width: 1px;
}

.wb-fnote .fn-rtn {
margin: 0;
overflow: hidden;
padding-right: 0;
padding-top: .375em;
position: absolute;
top: 0;
width: 3.5em;
}

.wb-fnote dl {
margin: 0;
}

.wb-fnote dt, .wb-inv, .wb-invisible, .wb-show-onfocus, .wb-sl {
clip: rect(1px,1px,1px,1px);
height: 1px;
margin: 0;
overflow: hidden;
position: absolute;
width: 1px;
}

.wb-fnote dd {
border: 1px solid transparent;
margin: .375em 0;
position: relative;
}

.wb-fnote p:first-child {
margin-top: .11em;
padding-top: .375em;
}

.wb-fnote p {
margin: 0 0 0 3.875em;
margin-top: 0px;
padding: 0 .375em .375em;
padding-top: 0px;
}

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

.color-white, .white {color: #FFF; background-color: transparent;}

.bg-black, .blackBG {
background-color: #000;
}

</style>

<span lang="la"><em>Symphyotrichum nahanniense</em></span>

Get raw images from MS Word
- rename the .docx to .zip
- open the file
- all the images are in the media folder, just grab them, keep what you need.

Call-out box

<div class="col-md-3 pull-right">   
<div class="well">         
<p class="small"> <strong>Periodic evaluation</strong> means that programs or spending should rarely be unevaluated for extended periods of time and rarely, if ever, be indefinitely.</p>      
</div>   
</div>

Panel (content in a box, with or without title)

<div class="panel panel-default">
<div class="panel-body">
<p><strong>Focus Group Findings</strong></p>
<p>All focus group participants were of the opinion that VAC does not keep them well informed or as informed as they could be about programs and services through My VAC Account. In explaining why, many said that they have to do most of the research/work themselves to find out about programs and services. Related to this, it was also observed that, while the information is available through My VAC Account, they have to find it themselves and when they do it can be difficult to understand. There was a widespread feeling that the Department should be more proactive in this regard through My VAC Account, with a few participants noting that word of mouth/networking between Veterans is sometimes a better source of information about programs and benefits than My VAC Account.When asked what role My VAC Account plays when it comes to communicating with VAC or receiving services from VAC, all focus group participants said it was 'very' important.</p>
</div>
</div>

<div class="panel panel-body panel-default">
<p>INTERVIEWER NOTE: IF ASKED WHAT FREIGHT TRANSPORTATION TRUCKS ARE, SAY: These typically include medium- and heavy-duty trucks used for moving goods and does not include vans.</p>
</div>

Floating image (right)

<p>When we prepared last year's Departmental Plan, we could not even imagine the extent to which our operations would be altered by world events. As you read this year's plan, it is set against the backdrop of both a global pandemic, and a fundamental shift in the world's consciousness in respect of systemic discrimination and racism, including as it exists in the criminal justice system here in Canada.</p>

</div>
</div>

Text Version

<details>
<summary>Text Version</summary>
<p>....</p>
</details>

Figure skeleton code

<figure id="fig_001"> 
<figcaption>ZZZ</figcaption>
<img src="images/figure001-en.png" alt="ZZZ" class="img-responsive" />
</figure>
<details>
<summary>Text description</summary>
<p>ZZZ</p>
</details>

<figure id="fig_001"> 
<img src="images/figure001-fr.png" alt="ZZZ" class="img-responsive" />
<figcaption>ZZZ</figcaption>
</figure>
<details>
<summary>Version textuelle</summary>
<p>ZZZ</p>
</details>

WET sample pages

WET Download Page

WET Style Guide - Index (good ones follow below)

WET Styles Examples - Layout and Grid

WET Styles Examples - Margins

Accessibility Test (AA)

AChecker website will shut down on April 30, 2021. Please use other accessibility validators such as WAVE, AXE or refer to W3C Web Accessibility Evaluation Tools List for more tools.

General Links for rules etc.

New Canada.ca Style Guide

Federal Identity Program

IA and other specs

General WET4 info

Detailed Tech WET4 info

Converting to WET

Accessibility Tools

Old Evaluation Criteria (CLF 2.0)

GITHUB WET (4) Releases

How to Meet WCAG 2.0 Quick Reference

New Evaluation Criteria (WCAG 2.0) - Failures (.xls)

New Evaluation Criteria - Expert Assessment Methodology (.docx)

Differences between XHTML and HTML5

Colour Contrast Check

Complex Chart Example

WAAT Tool Install (zip)