The contents of a Weagree template’s building blocks and contract clauses, as well as schedules, annexes and definitions, are stored in basic HTML code, the mark-up language used to display webpages. This is used to apply simple formatting to text (i.e. bold, italics, underlined) and to create tables in your documents.
While the HTML code is ordinarily hidden from view, it’s possible to directly modify the code via the Template Creation Tool’s HTML editor. Occasionally, it may be necessary to do so in order to tweak text or tables. It will be explained below when that might be the case and how to make the necessary changes.
A. BASIC EDITING
Inserting text and applying simple formatting can easily be done by typing or pasting text into the right-hand side of the Template Creation tool and using either its buttons or such keyboard shortcuts as Ctrl+B.
However, this sometimes results in unwanted HTML code – especially when directly copying and pasting from a Word document. That generally will not present any real problem, as the Weagree Wizard automatically filters out a great deal of redundant and potentially harmful code and any obvious text formatting errors will of course be immediately visible. Nevertheless, the system isn’t 100% foolproof and it’s good practice to keep your template’s code clean.
It is easy to remove unwanted code or correct any formatting errors. You can freely type, copy and paste, or delete text within the HTML editor.
1. Open the HTML editor.
2. Look for any HTML tags that are either unnecessary or misplaced. Some common issues, as also illustrated below, include the following:
a. <br> (line break). If a paragraph in your generated document is followed by a seemingly inexplicable blank line, odds are that at the end of that paragraph there is a <br> tag.
b. <span></span>. These tags can be used to change the properties of part of the text within a paragraph. For example, you might see something like <span style=”color: blue;”>[text]</span>. The text between the <span></span> tags will then be coloured blue. It is also possible that the tags don’t have any style modifiers, and consequently don’t do anything at all.
c. Significant text editing sometimes results in redundant or misplaced formatting tags. For example, you might see something like <strong></strong><u>[text 1]</u><u> <strong>[text 2] </u></strong>[text 3], where tags for bolded text (<strong></strong>) and underlined text (<u></u>) are used inefficiently.
3. Erase or reposition the tags as desired. Edit <span> style modifiers if needed (more on this in section D below). See below for an illustration of how to optimise the errors identified above.
Note 1: keep in mind that apart from <br>, any HTML tag the HTML editor will accept must be used in pairs. The first tag (e.g. <i> for italics) will start a modification and the second tag (e.g. </i>) will end it. The second tag always begins with a slash (e.g. </strong>, </u>, </cap>). They must be placed before and after the text that must be modified. As the screenshot below shows, you can use different formatting tags together and they can enclose each other. For a list of acceptable tags and style modifiers, see section D below.
Note 2: you may sometimes encounter the character code . This is HTML code for a space and is harmless. You may freely delete any redundant spaces of course, whether or not they appear as this character code or simply as whitespace between other characters.
4. Click OK when finished.
5. Click Save the changes made.
B. TABLES
The Template Creation Tool has a dedicated button for inserting tables (click here for more information), but editing them requires use of the HTML editor. This may be necessary if you want to change table’s overall appearance, its behaviour, the number of rows or columns, or text formatting within a table.
At its most basic, a table consists of the following HTML code:
<table>
<tr>
<td></td>
</tr>
</table>
The <table></table> tags define and contain the table as a whole. They enclose the <tr></tr> tags, which define the rows. These in turn enclose the <td></td> tags, which define the columns and contain the actual text or pictures embedded in the table.
Note: you can also embed tables within tables. This requires that you insert the table’s full code between one <td></td> pair. This can also be done with the Insert a table button rather than the HTML editor.
When making any changes to a table in the HTML editor, remember to click OK when finished and then Save the changes made.
1. OVERALL APPEARANCE
The <table> tag accepts two modifiers that determine the table’s overall appearance:
a. The class modifier refers to the table style. This is initially set via the Presentation dropdown in the Insert a table pop-up, but can be changed through the HTML editor. There are four variants:
i. No borders: class=”WW_Table_NoBorders”
ii. One box (outside borders): class=”WW_Table_OutsideBorders”
iii. Outside borders and header: class=”WW_Table_Header”
iv. Borders outside and inside (with header): class=”WW_Table_AllBorders”
b. The firstcolumnwidth modifier can be used to specify the size (in centimeters) of each column. The maximum size will depend on the exact settings of the dotx-file (Word-template) selected for the template. Usually this is 16 cm.
You can insert one value per column, separated by a semi-colon. If any value is set to “0.00”, the table (column) will be variable, but default to its relative maximum size. For example, if the full modifier reads firstcolumnwidth=”0.00;0.00″, that means there are two columns and they will each default to 50% of the table’s maximum size.
Note: in case of multiple columns with a fixed width, it is recommended that the <td> tags in the first row have a style modifier to set their width. Otherwise, the firstcolumnwidth settings won’t be correctly visually reflected in the Template Creation Tool or WYSIWYG view. This does not affect document generation, however. More on this under 4. and under section D below.
2. BEHAVIOUR
The <table> tag also accepts three modifiers that determine the table’s behaviour:
a. The allowbreakrow=”true” modifier permits a table row to be split into two there’s not enough room anymore for it to fit on one page. Part of the row will then be shown at the bottom of one page, while the other part will appear at the top of the next. If this modifier is not included, the entire row will be pushed to the next page.
b. The keeptogether=”true” modifier attempts to keep all rows on a single page. In other words, if there’s not enough room for a table anymore on one page, the entire table will be pushed to the ntext. If this modifier is not included, only the part of the table that does not fit will be pushed to the next page.
c. The keepwithnext=”true” modifier attempts to keep this table and the next on one page. It must be used in conjunction with keeptogether=”true”. If this modifier is not included, the two tables may be split across different pages if there’s not enough room for both.
Note 1: you can string together any number of tables, provided that there are no blank lines (<br> or [EOL] tags) separating them. They take their styling from the top table. Even if they all have the WW_Table_AllBorders styling, only the top row will have a header.
Note 2: it can be useful to have at the top a table consisting of only one or two rows with the WW_Table_AllBorders styling, which is configured to stick to the next table. That way you can ensure that even if a table is too big for a single page, the header row will never appear in isolation at the bottom of any page.
3. NUMBERS OF ROWS AND COLUMNS
Adding or removing rows and columns requires nothing more than changing the number of <tr></tr> pairs and <td></td> pairs (and any text within the latter pairs), respectively.
Multiple pairs of <td></td> can be enclosed by a single <tr></tr> pair to produce multiple columns.
Multiple <tr></tr> pairs will of course produce multiple rows – each of which must contain at least one <td></td> pair. Ensure that all rows within one table have the same number of columns.
Note: when changing the number of columns, be sure to adjust the firstcolumnwidth and style width modifiers (if applicable) accordingly.
For example, compare the two tables below. The first has four rows of two columns each. The second is an edited version of the table, with only three rows but four columns.
4. TEXT FORMATTING
Text within a table is placed between a pair of <td></td> tags. It can be formatted like other text using the regular interface of the Template Creation Tool, but the HTML editor allows for greater control still. By adding a style modifier to a <td> tag, you can also determine what colour the text will be, how large it will be, and how it will be aligned. For example, to create green, size-12, justified text you would use: <td style=”color: green; font-size: 12pt; text-align: justify;”>. See also section D below.
In tables, the style modifier can also be used to define the exact width of a column. See 1.b. above and section D below.
C. HOUSE STYLES
The above can also be applied to the headers and footers in house styles. Note that you may encounter some differences, however, as the house style editor is not identical to the Template Creation Tool and its HTML editor. For general instructions on configuring headers and footers, click here. For the purposes of editing the HTML code, note in particular the following:
1. To view the HTML code of a header or footer, first click inside the input field (the WYSIWYG button row will appear) and the click Source.
2. The <br> tag is expressed as <br /> in this editor.
3. Right-clicking on any part of a table (i.e. when you are not viewing the HTML code) produces a context menu that allows you to add or remove rows and columns.
D. TAGS AND STYLE MODIFIERS
The Weagree Wizard’s Template Creation Tool and house style HTML editors accept the following tags:
- <br> – line break
- <strong></strong> or <b></b> – bold
- <em></em> or <i></i> – italics
- <u></u> – underlined
- <cap></cap> – capital letters
- <smallcap></smallcap> – small capital letters
- <sup></sup> – superscript
- <sub></sub> – subscript
- <span></span> – in-line text modifier
- <table></table> – primary table tags, must always include at least one set of <tr><td></td></tr> (i.e. one row, one column)
- <tr></tr> – table row
- <td></td> – table column containing text or pictures; insert multiple pairs between <tr></tr> to create multiple columns
The contents of <span> and <td> can be modified with by using the format <tag style=”[modifier type: modification];”>. For example, to make some text within a sentence blue: [text 1] <span style=”color: blue;”>[text 2]</span> [text 3]. Multiple modifiers can be used within one tag by separating them with a semi-colon. There should also be a semi-colon at the end. For example: <td style=”text-align: center; font-size: 12pt;”>.
The following style modifiers are available:
- color – text colour; specified in words (e.g. “color: red;” or “color: darkgreen;”) or in HEX format (e.g. “color: #ff000a;” for red)
- font-size – text size in points (e.g. “font-size: 12pt;”)
- text-align – horizontal alignment; either “left”, “center”, “right” or “justify” (e.g. “text-align: right;”), only for <td> tags
- vertical-align– vertical alignment; either “top”, “middle” or “bottom” (e.g. “vertical-align: top;”), only for <td> tags
- width – column width in centimers (e.g. “width: 5.50cm;”); only for <td> tags
