This is a documentation for Board Game Arena: play board games online !
Wiki formatting
Purpose
This page was created as a result of this forum thread.
Most wiki (doc.BoardGameArena.com) formatting is not preserved on https://BoardGameArena.com, but there are some workarounds. This is a collection of unofficial tips on how to make wiki pages display well on https://BoardGameArena.com both in-game and on game panels, including:
- #Known_issues_and_workarounds
- in-game & game panel display differences;
- #Custom_elements
Feel free to add additional issues, advice and elements.
Known issues and workarounds
Bullet points
The BGA rules display strips all bullet points, if the regular wiki bullet markup of asterisks is used.
A common solution seems to be to add bullet-point unicode symbols, or hyphens. This also requires lines to be separated by paragraph breaks or <br/> tags, or to be used in addition to asterisked bullet points, otherwise all the points appear on the same line.
• Draw • Play • Discard
• Draw<br/> • Play<br/> • Discard
*• Draw *• Play *• Discard
In the first two cases a blank line should be left between the start of the list and the end of the previous paragraph, otherwise the first point is merged into the previous paragraph.
Relevant bug reports:
- Bullet points not visible on game help, open since April 2020
Numbered list
Like bullet points, a numbered list in wiki markup (with a "#" before each line) doesn't display correctly: all of the numbers are stripped out.
Workarounds are to write out the numbers by hand, with either paragraph breaks or <br/> tags between them:
1. Draw 2. Play 3. Discard
1. Draw<br/> 2. Play<br/> 3. Discard
Blockquote
The <blockquote> tag displays a block of text indented with a grey margin, on the wiki. It displays as a completely regular and unindented paragraph on the BGA view.
Definition list
;Term: Definition wiki markup lists don't bold the terms or indent the definitions in the game view, making them much harder to read.
A workaround is to additionally bold each term, e.g.:
;'''Pair of boats''': take another turn<br/> ;'''Pair of fish''': draw a card from the deck<br/> ;'''Shark + swimmer''': steal a random card from another player's hand
Which displays in-game as:
Pair of boats: take another turn
Pair of fish: draw a card from the deck
Shark + swimmer: steal a random card from another player's hand
Headings
- Level one L1 headings
=are the title of the page i.e. Gamehelp[name] / Tips_[name].
When viewed during a game:
- Level two L2 headings
==have a box around it on the BGA view, in uppercase. - Level three L3 headings
===are formatted identically and indistinguishable from level two headings, except that it slightly overlaps the text above it. - Level four L4 headings
====are displayed within the box of the level three heading, in bold. - Level five L5 headings
=====are in regular (non-bold) font.
People seem to be independently realising this and writing rules using a level two heading ("==") for each section, and a level four heading ==== for its subheadings, skipping level three entirely. I've also seen rule writers add extra blank lines to the ends of each section (e.g. at Gamehelpturingmachine), which may be to avoid the headings overlapping the text.
Relevant bug reports:
Links
https://BoardGameArena.com/doc is the "main page" (root) of the wiki (doc.BoardGameArena.com) on https://BoardGameArena.com (which redirects to the "Help" page index).
As of 2023-10, anchor # links do not work outside of the wiki (doc.BoardGameArena.com) because anchor links are not preserved on https://BoardGameArena.com.
e.g. [[#this_is_an_anchor_link]] will resolve to https://BoardGameArena.com/doc/#this_is_an_anchor_link where there is no anchor and does not give the expected information.
External links and links to wiki pages are resolved correctly e.g. [[Gamehelpchess]] is resolved to https://BoardGameArena.com/doc/Gamehelpchess, however, in-game these links are not helpful as they navigate the user away from the game.
Relevant bug reports:
Tables
Table borders are stripped by the BGA display. They can be added back by adding a fixed width border= to the image markup, e.g.:
{| class="wikitable" style="width:auto;text-align:center;" border="2"
|-
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}
will display as:
| 0-90 | ⭐ |
|---|---|
| 91-110 | ⭐⭐ |
| 111-125 | ⭐⭐⭐ |
Tables default to 100% width on the BGA view: if you want to override that, you can do so by adding something like style="width:10%" after the border="2".
style="width:auto;text-align:center;":
width:auto;fits column width to the contentstext-align:center;centres the contents
Images
Attempting to specify an image size in image markup (e.g. [[File:Marrakech example.jpg|300px]]) will work in the wiki view, but will cause the image to appear blank in the BGA view (as it tries to display a resized image which does not exist in the directory it's referencing).
A workaround is to display images at the default size (meaning that they must also be uploaded at the size you want them to appear), e.g.:
[[File:Marrakech example.jpg]]
It's also possible to add rollover text if desired:
[[File:Marrakech example.jpg|Example move]]
Also, external links will also work within BGA if you want the image to link to a URL:
[[File:Versions.png|link=https://lumberjacks-studio.com/en/project/trek-12_en/]]
Custom elements
Infoboxes
Template:InfoBox is an aesthetically pleasing, customisable container that is responsive to screen size.
Icons
Templates
- Template:Player
{{player|=2}}players
- Template:Hand
{{hand|=4}}cards in hand
Keywords
Some game rules, including Gamehelpjumpdrive and Gamehelpspacestationphoenix, use keywords such as [METAL] and [PLANET].
When a player reads these rules during a BGA game, these tags get converted into icons. When the player reads the rules on the game panel page or the wiki, they remain as text.
This feature seems to be undocumented, and has been confirmed as a custom option that a developer can choose to create for a game.
Game pieces
Generic game pieces including:
- Dice
- Go stones
- Reversi tokens
- Chess pieces
- Draughts
- Hanabi clue token
Dice
Six-sided dice can be displayed using a template, e.g. {{whiteDie|=6}}.
See GameHelpDudo for examples.
Dice are available in four colours: whiteDie, yellowDie, orangeDie and blackDie:
Meeples
Meeple icons can be displayed with e.g. {{meeple|red}} for
Available colours are currently red, orange, yellow, green, blue, purple, black, white and grey.
Playing cards
Template:Card can be used to display playing card icons.
| Type | {{club}}
|
{{spade}}
|
{{heart}}
|
{{diamond}}
|
{{cardBack}}
|
{{card|=A}}
|
{{club|=A}}
|
{{club|=A|colour=green}}
|
|---|---|---|---|---|---|---|---|---|
| Result | ♣ | ♠ | ♥ | ♦ | 🟔 | ♣ | ♣ |
Template:Cardholder can display suitless cards (designed for GameHelpHanabi) in a "holder", with "clue" notes. See the linked template for further documentation.
Game boards
There are a few customisable game boards available:
Option grids
Where a game has multiple interdependent options, it can be useful to have a visual option grid.
Not for the faint-hearted, but with a lot of inline css, it is possible to create a nice aesthetic and intuitive grid that is responsive to screen size. For example for GameHelpPente:
<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;"> <div style="box-shadow:inset 0 0 0 0.1rem #f0f;background:#fef;padding:0.5rem;width:max-content;">Training mode only</div> <div style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;width:max-content;">Default</div> <div style="box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;width:max-content;">Other</div> </div> <div style="display:grid;max-width:50rem;border:0.1rem solid #aaa;"> <div style="grid-area: 1 / 1 / 3 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;"># of players</div> <div style="grid-area: 1 / 2 / 3 / 3;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">2</div> <div style="grid-area: 1 / 5 / 3 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">3</div> <div style="grid-area: 1 / 3 / 2 / 5;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">4</div> <div style="grid-area: 2 / 4 / 3 / 5;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;text-align:center;">Free-for-all</div> <div style="grid-area: 2 / 3 / 3 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;">Team</div> <div style="grid-area: 3 / 1 / 4 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">All options win</div> <div style="grid-area: 3 / 2 / 4 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>5</b> stones in a row</div> <div style="grid-area: 3 / 4 / 4 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>4</b> stones in a row</div> <div style="grid-area: 4 / 1 / 5 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Overline win</div> <div style="grid-area: 4 / 2 / 5 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>5</b> stones in a row</div> <div style="grid-area: 4 / 4 / 5 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>4</b> stones in a row</div> <div style="grid-area: 5 / 1 / 6 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Capture win</div> <div style="grid-area: 5 / 2 / 6 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>5</b> captures</div> <div style="grid-area: 5 / 4 / 6 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>4</b> captures</div> <div style="grid-area: 6 / 1 / 7 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Capture three</div> <div style="grid-area: 6 / 2 / 7 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May capture two <b>or three</b> stones (Keryo Pente)</div> <div style="grid-area: 7 / 1 / 10 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Self-capture</div> <div style="grid-area: 7 / 2 / 8 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">No effect: a stone may be placed in a capture position</div> <div style="grid-area: 8 / 2 / 9 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Self-capture: results in <b>self-capture!</b> (Poof Pente)</div> <div style="grid-area: 9 / 2 / 10 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Forbidden: a stone may <b>not</b> be placed in a capture position</b></div> <div style="grid-area:10 / 1 / 12 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Overtime capture</div> <div style="grid-area:10 / 2 / 11 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Break the line: may capture to break a winning line (Boat Pente)</div> <div style="grid-area:11 / 2 / 12 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Capture the line: may capture an entire winning line</div> <div style="grid-area:12 / 1 / 14 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Mixed capture</div> <div style="grid-area:12 / 3 / 13 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">Enabled: May capture stones of mixed colour</div> <div style="grid-area:13 / 2 / 14 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Disabled: Captures of one colour only</div> </div>