Article Style Guide

If there’s any ambiguity, definitely create an issue on GitLab about it. If it isn’t explicitly laid out here for something to do with formatting, either follow your gut or follow Wikipedia’s Manual of Style.

We currently use “Sentence case” for headers.

This will break formatting assumptions, and may confuse screen readers. We also already got our top-level header as the title of the article. Your first header should therefore always be an h2.

# An "h1" tag header
## An "h2" header

A header with only one "#" character is disallowed. Instead, use two "##" characters to create your first header.

Don’t make any headers deeper than an h4. The table of contents will break, and formatting likely breaks too. Needing an h4 is indicative of a structural issue with the article.

#### An "h4" header
##### An "h5" header

No more than four "#" characters should be used!

Since this is a Canadian site, try and abide by Canadian English spelling.

• All images must be wrapped with a <figure> tag, to allow users to load a higher-quality version and zoom in some cases.
• If images are licensed, you must put the license terms in a <figcaption> component. See section Attribution for more details.
• General accessibility rules very much apply here. This includes having alt text on images (with its specific accessibility caveats), and avoiding using images to display text instead of actual text.

If you use any images, please make sure you can legally use that image!

If you use any copyrighted works, but believe it can be used in fair use, please make a comment like this within the article, something like this:

{/* Picture licensed under All Rights Reserved, on https://www.wealthsimple.com/en-ca/learn/50-30-20-rule */}
<Image
   alt="Pie chart breaking down the 50:30:20 rule"
   src={Wealthsimple_50_30_20_Rule}
/>

If you’re contributing your own photos, follow the below formatting. CC BY-SA 4.0 is used as an example.

{/* Picture by Fio Cobbs on Queer Winnipeg, licensed under CC BY-SA 4.0. */}
<Image
   alt="Paper transfer"
   src={PaperTransfer}
/>

If the image is under the Creative Commons and you’re not the copyright owner, give adequate credit. An example of doing this properly can be found in How to Take the Bus in Winnipeg - BLUE Buses.

<figure>
  <Image
    alt="The St. Norbert Bus"
    src={StNorbertBus}
  />
  <figcaption>
      Picture by [Justin Rombough](https://www.flickr.com/photos/bpomanitoba) on [Flicker](https://www.flickr.com/photos/bpomanitoba/50368893052/in/photostream/), licensed under [CC BY-NC-SA 2.0](https://creativecommons.org/licenses/by-nc-sa/2.0/).
    </figcaption>
</figure>

If you’re contributing your own photos under a Creative Commons license, feel free to credit yourself as displayed like this.

For contributing cover images, and you wish to credit yourself, please put your attribution at the bottom of the article for now. Hopefully I figure out a way to credit in a way that isn’t too intrusive.

For screenshots, you usually want to zoom in to help with mobile screens or high DPI ones. If you’re savvy enough to try, make sure fonts are antialiased as grayscale, and not subpixeled. If you’re on Windows, download BetterClearTypeTuner to set to grayscale.

If you don’t wanna mess with a 3rd party program, but are comfortable with your browser’s dev tools, you can find a parent element and set its opacity to 0.98. See https://web.dev/articles/antialiasing-101 for more info.

Screenshots of apps or webpages generally aren’t covered under any license, so you usually don’t need to add attribution.

• Bullet points should end in some punctuation (eg. a period, semicolon, or colon).