On the Subject of Module Name

Your flavor text should go here.

Remember to change the name of your SVG file, HTML file, and JSON file to be the name of your module.

• If you have no extra images to add to your manual, delete the “Module Name” folder inside the “img” folder.
• Otherwise, rename the “Module Name” folder to be the name of your module.
• Make sure to zip up these files at the top level containing the HTML and JSON folders, and send a DM to Logbot on Discord with the text “!lint” with the ZIP file attached.
• Fix any linting errors before you post your finished manual in the #repo-requests channel.
• Let someone know in #mod-creation or #repo-discussion if you need help fixing the errors.

If you need to make changes to your manual after it’s already on the repo, download the latest version of your manual from the repo BEFORE you make your changes.
Your local copy may not be the latest version even after 1 day. Manuals are edited when the request is processed and updated often for efficiency, style consolidation, dark mode, etc.
And please DO NOT post the entire ZIP file again in #repo-requests, only the files that have changed. Usually, you only have to fix something in the HTML file, so only post that, no need to zip it up.
If you are changing multiple files, then you need to zip them up and describe what changed in your message when you post in #repo-requests.

If you are making an alternate manual, when you post the HTML file (no need to zip it up), make sure to include the full name of the HTML file in the text of the request because it gets changed by Discord on upload and it’s a pain for alternate manuals (especially translations) because of all the spaces and special characters that get changed or deleted. So paste something like this in your request message: Cruel Piano Keys optimized (YourUsername).html
or: Adjacent Letters translated (Español — Letras Adyacentes) (Name).html

Tutorial and Examples

Here are templates for commonly used manual features. Make sure to always use closing tags (the ones with a / in them).

Bullet Points (Unordered Lists)

• Bullet points should use the <ul></ul> and <li></li> tags.
• You can even have nested bullet points:
  • Indented
  • Bullet Points
• Or numbered lists:
  1. Indented
  2. Bullet Points

Numbered Lists (Ordered Lists)

1. Numbered lists should use the <ol></ol> and <li></li> tags.
2. Nested lists work just like unordered lists (see above).

Text

Use paragraph tags (<p></p>) for text blocks. In addition, for text formatting, use:

• Bold: <b></b> (HTML) or font-weight: bold; (CSS). Bold in table headers should be achieved through the use of the <th></th> tag.
• Underline: <u></u> or <em></em> (HTML) or text-decoration: underline; (CSS).
• Italics: <i></i> (HTML) or font-style: italic; (CSS).
• Use “these” type of quote marks to quote text in paragraphs and ‘these’ single quotes for apostrophes or single quotes.
• Line
  Break: <br> (HTML)

For the most part, HTML versions of bolding and underlining is recommended. Note that italics are not used in vanilla manuals besides flavor text and references to appendices, and therefore is not typically used. Also, here are some sample headings:

Example Big Heading

Example Small Heading (centered)

Example Tables

Part of table	How to make
Rows and Columns	Use <tr></tr> for rows. Use <th></th> or <td></td> for columns within rows (see below).
Headings (left column and top row, in most cases)	Use <th></th>
Cells	Use <td></td>
Merged Cells	Use rowspan="_" for merging cells vertically.
	Use colspan="_" for merging cells horizontally.
Note that merged cells created in other rows are skipped in affected rows (see HTML for above row).

If the table contents are not wide enough, tables may be centered by default with the table rule in the <style> block (see above, margin: 1em auto;). Or you can center only certain tables with the centered class:

Cell 1	Cell 2
Cell 3	Cell 4

Images

Use the <img src="_" /> tag for images. Make sure to put your images into the /img/[Module Name]/ folder. Adjust the width with CSS, using width: _%; (recommended) or width: _cm;. Example:

Paragraphs like this can also use the centered class.
Images can be centered with the centered-img class.

Example of table with hidden corners and other cells

Tables can also have a title using the caption tag.

	1	2	3	4	5	6	7
Thing 1	Data 11	Data 12	Data 13	Data 14	Data 15	Data 16	Data 17
Thing 2	Data 21	Data 22	Data 23	Data 24	Data 25	Data 26	Data 27
Thing 3	Data 31	Data 32	Data 33	Data 34	Data 35	Data 36	Data 37
Thing 4	Data 41	Data 42	Data 43	Data 44	Data 45	Data 46	Data 47
Thing 5	Data 51	Data 52	Data 53	Data 54	Data 55	Data 56	Data 57
Thing 6	Data 61	Data 62	Data 63	Data 64
Thing 7	Data 71	Data 72	Data 73

Making the PDF

For 99% of manuals, you do not need to do this, the PDF is generated automatically by the website. Only do this if there is a good reason. Example: Ikea Documents has images that need to take up the full page and are not all the right page dimensions, so a custom PDF is needed.

To make a PDF version of your manual, open the HTML file in Google Chrome and open the “Print” dialog (Usually CTRL+P) and choose “Save as PDF” as the destination.

Alt-o

Press Alt-o on your keyboard and check that dark mode, highlighting, and side-by-side mode all look good and work the way you want them to.

Dark mode (Alt-w) is also a good way to check if your page content is too big for the page, which messes up both the gritty page background (especially in dark mode) and the auto-generated PDF.

Ctrl-Shift-click or Alt-click to highlight elements like bullet list items and table cells. Also try Shift-click and Ctrl-click for table cells.

Highlightable Elements

These hexagons are individually highlightable using the highlightable class. The text doesn’t get in the way of the highlighting because of the svg text CSS in the style section. The lines and text also turn white in dark mode because of more CSS in the style section.

This entire paragraph is highlightable because of the highlightable class. Elements like span, h3, h4, div, and others can be made highlightable with the highlightable class.

Only the bolded span in this paragraph is highlightable, not the whole paragraph.

This header is highlightable

Every word in this sentence is individually highlightable.
This effect is much more effeciently achieved with JavaScript, and so is the drawing of the hexagons above. Ask if you need help.

Table cells are highlightable by default, but for nested tables within tables, you might want to make the bigger table cells NOT highlightable with the nohighlight class. The left two big cells below don’t have the nohighlight class and thus the cells are still highlightable, which can be a little awkward if you only want to highlight the inner table’s cells. The right two big cells below are not highlightable, but the inner table still is.

A B C D E F G H I J K L	A B C D E F G H I J K L
A B C D E F G H I J K L	A B C D E F G H I J K L