Tips and tricks

Tricks / Workarounds

• If you need a subtitle you can add an inline class called "Subtitle" to the text
• <hr> line needs space added below it
  • <hr style="margin-bottom:16px;">
• Need to set a row width larger than 675px for a widget, but want the rich text editor to show text at 675px (preferable reading width). Add this code (make sure you close the div tag):
  • <div style="max-width:675px; width:auto; height:auto; margin:auto; padding:0px 15px;">

Footnotes

For articles that have footnotes where we link each footnote number to make it jump down to the footnotes section, we can add a link to each footnote to bring them back up to the spot where they originally clicked the footnote number. This will help people navigate longer articles with footnotes.

TL/DR: We're making footnotes (ie: footnote¹) go to the the actual footnote in the article while also adding a way for the user to get back to their original spot in the article after reading said footnote.

Jump links / Anchors

First an explanation on how jump links works as this trick uses that technique. A jump link is a link that leads to another place on the same page. Instead of using a URL for the link, we use an ID. That means that an ID must be assigned to the the links and paragraphs we're using for this. These ID's must be unique otherwise the code will be confused and not know which to pick. ID's are not something you can add through the text editor so you'll need to add this in the code.

Setting up footnotes throughout the article

In the code below, we're adding the ID's to the referring footnote links and naming them "ref" followed by the number it's been given. For example: ref1.

We're also setting up the link to go to the actual footnote. These links start with a # sign followed by the value of an ID. This tells the link to go find the ID we assigned to the actual footnote and to go to specific footnote.

Setting up the actual footnotes (most likely near the bottom of the page)

The ID we're assigning to the links above are going to be the ID's we give the actual footnotes but we're adding these ID's to the paragraphs and not the links.

The links in the actual footnotes use the ID's of the referring footnotes scattered throughout the article. As mentioned above, this tells the link to go find the ID we assigned to the referring footnote and to go to that specific place int he article.

We're using the universal "return" character as the link and adding a bit of styles to make it more visible. 

We've also added a title to the link. This bit of code is what we see as "helper" text when we hover over the link. It will also read out the title to screen readers so they know where this link will take them.

Note: The French translation for "Jump back to footnote 1 in the article" is:
Revenez à la note de bas de page 1 de l'article

Hacks

CSS hacks to make certain widgets work differently than intended. These are hacks we have (reach out to Claudette or Jen):

• Call out cards - fix to have 2
• Icon with Text - changing text to white
• Ad-hoc cards - making them fit full width of someone's screen
• Style a form to brand
• Buttons - change hover colour

Tables

Claudette must make your tables accessible!

Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.

If the above does not define a table requested by SME's then we need to rethink the use of the table.