This is a documentation for Board Game Arena: play board games online !

Wiki formatting: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(→‎Headings: note overlap)
 
(41 intermediate revisions by 3 users not shown)
Line 1: Line 1:
These are some tips on how to make wiki rules pages display in a readable way on the BGA site beneath a game, with some notes on elements which do not work as expected, and useful elements which don't appear to be documented anywhere. Many tags and methods of formatting are completely stripped out by the BGA website when displaying wiki ruleset, but there are some workarounds. Note also that some elements display differently depending on whether you're reading the rules at the bottom of a live game page, or on the game's "about" page.
==Purpose==


Feel free to add additional issues and advice.
''This page was created as a result of the [https://boardgamearena.com/forum/viewtopic.php?f=3&t=23790 Wiki style guide] forum thread.''


''(This page was created as a result of [https://boardgamearena.com/forum/viewtopic.php?f=3&t=23790 this forum thread]. A bug report to make bullets visible within the rulesets on the BGA interface has been [https://boardgamearena.com/bug?id=16083 open with no response since April 2020].)''
<span style="font-size:larger;">Most wiki ('''doc.'''BoardGameArena.com) formatting is not preserved on [https://BoardGameArena.com BoardGameArena.com], but there are some workarounds.
This page is a collection of unofficial tips on how to make wiki pages display well in-game and on game panels.</span>


==Bullet points==
Feel free to add additional issues, advice and '''[[#Wiki_templates|templates]]''' 🙂


The BGA rules display strips all bullet points, if the regular wiki bullet markup of asterisks is used.
'''[https://www.mediawiki.org/wiki/Help:Formatting Help:Formatting]'''


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 <nowiki><br/></nowiki> tags, or to be used in addition to asterisked bullet points, otherwise all the points appear on the same line.
Note: Wiki page changes are [https://boardgamearena.com/forum/viewtopic.php?p=33914#p33914 updated once per day] on [https://BoardGameArena.com BoardGameArena.com].


<pre>
==Languages==
• Draw


• Play
Wiki page content displays:
# User's '''[https://boardgamearena.com/preferences?section=lang language]''', else
# English, else
# ''Create this page'' link/button.


• Discard
e.g. A Chinese user reads the Jump Drive rules summary on its game panel page, ''displayed in English'' ('''en'''.doc.boardgamearena.com/Gamehelpjumpdrive) because the Chinese ('''zh'''.doc.boardgamearena.com/Gamehelpjumpdrive) page does not exist.
The user sees a typo in the English rules  and selects the ''edit page'' link to correct it, but the Chinese wiki's ''create page'' is displayed instead.
 
====Bug reports====
 
* '''[https://boardgamearena.com/bug?id=102754 Link for editing is misleading]'''
 
* '''[https://boardgamearena.com/bug?id=117297 Templates and some format don't work in other language]'''
 
==Lists==
 
'''[https://www.mediawiki.org/wiki/Help:Lists Help:Lists]'''
 
===Issues===
 
{{infoBox|float=right|state=collapsed|color=#b44
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
li {
    list-style: none; /*removes list markers*/
}
 
li, ul {
    margin: 0; /*removes margin before and after lists*/
    padding: 0; /*removes list indentation*/
}
 
blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0; /*removes inline and block margins*/
    padding: 0; /*removes list indentation*/
}
</pre>
</pre>
}}
'''Markers''' (bullets <code>*</code>, numbering <code>#</code>), '''margins''' and '''padding''' are removed on [https://BoardGameArena.com BoardGameArena.com].
====Bug reports====
* '''[https://boardgamearena.com/bug?id=16083 Bullet points not visible]'''
===Workarounds===
# Use static markers (<code>•</code>,<code>-</code>,<code>1.</code>).
# Replace with [https://developer.mozilla.org/en-US/docs/Web/HTML HTML] + [https://developer.mozilla.org/en-US/docs/Web/CSS CSS].
{{infoBox|float=right|state=collapsed|color=#4b4
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
ul.bulletlist li {
    list-style: disc none inside
}


<pre>
.wikicontent p {
• Draw<br/>
    margin-bottom: 8px;
• Play<br/>
    margin-top: 8px
• Discard
}
</pre>
</pre>
}}


<pre>
{{infoBoxes3|state=collapsed|maxWidth=
*• Draw
|title1=Bullet lists
*• Play
|body1=<div style="width:100%;max-width:90vw;overflow:scroll;">
*• Discard
{{{!}} class="wikitable" style="width:max-content;"
{{!}}+Wiki vs [https://BoardGameArena.com BoardGameArena.com] list formatting
!
!Wiki text
!Wiki
!BGA
{{!}}-style="background:#fff4f4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic
marker¹ <code>*</code>
{{!}}<pre style="background:none;border:none;">
* A
* B
* C
</pre>
{{!}}
* A
* B
* C
{{!}}<ul style="margin:0;padding:0;line-height:normal;">
    <li style="margin:0;padding:0;list-style:none;>A</li>
    <li style="margin:0;padding:0;list-style:none;>B</li>
    <li style="margin:0;padding:0;list-style:none;>C</li>
</ul>
{{!}}-style="background:#fffff4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic¹ +
static marker
{{!}}<pre style="background:none;border:none;">
*- A
*- B
*- C
</pre>
</pre>
{{!}}
*- A
*- B
*- C
{{!}}<ul style="margin:0;padding:0;line-height:normal;">
    <li style="margin:0;padding:0;list-style:none;>- A</li>
    <li style="margin:0;padding:0;list-style:none;>- B</li>
    <li style="margin:0;padding:0;list-style:none;>- C</li>
</ul>
{{!}}-style="background:#f4fff4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}static marker +
line breaks²
{{!}}<pre style="background:none;border:none;">


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.
- A


==Definition list==
- B


";Term: Definition" wiki markup lists don't bold the terms or indent the definitions in the BGA view, making them much harder to read. A workaround is to manually bold each term, eg:
- C


<pre>
'''Term''': Definition
</pre>
</pre>
{{!}}
- A
- B


==Headings==
- C
{{!}}<p style="margin:8px 0;padding:0;line-height:normal;">- A</p>
<p style="margin:8px 0;padding:0;line-height:normal;">- B</p>
<p style="margin:8px 0;padding:0;line-height:normal;">- C</p>
{{!}}-style="background:#f4ffff;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}HTML + CSS
{{!}}<pre style="background:none;border:none;">
<ul class="bulletlist" style="
    margin:1em 0;
    padding-inline-start:40px;
">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
</pre>
{{!}}<ul class"bulletlist" style="
    margin:1em 0;
    padding-inline-start:40px;
">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
{{!}}<ul class"bulletlist" style="
    margin:1em 0;
    padding-inline-start:40px;
    line-height:normal;
">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
{{!}}}</div>
* <code><nowiki><ul></nowiki></code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul unordered list]<code><nowiki></ul></nowiki></code>
* <code><nowiki><li></nowiki></code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li list item]<code><nowiki></li></nowiki></code>
 
|title2=Numbered lists
|body2=<div style="width:100%;max-width:90vw;overflow:scroll;">
{{{!}} class="wikitable" style="width:max-content;"
{{!}}+Wiki vs [https://BoardGameArena.com BoardGameArena.com] list formatting
!
!Wiki text
!Wiki
!BGA
{{!}}-style="background:#fff4f4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic
marker¹ <code>#</code>
{{!}}<pre style="background:none;border:none;">
# A
# B
# C
</pre>
{{!}}
# A
# B
# C
{{!}}<ol style="margin:0;padding:0;line-height:normal;">
    <li style="margin:0;padding:0;list-style:none;>A</li>
    <li style="margin:0;padding:0;list-style:none;>B</li>
    <li style="margin:0;padding:0;list-style:none;>C</li>
</ol>
 
{{!}}-style="background:#fffff4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic¹ +
static marker
{{!}}<pre style="background:none;border:none;">
# 1. A
# 2. B
# 3. C
</pre>
{{!}}
# 1. A
# 2. B
# 3. C
{{!}}<ol style="margin:0;padding:0;line-height:normal;">
    <li style="margin:0;padding:0;list-style:none;>1. A</li>
    <li style="margin:0;padding:0;list-style:none;>2. B</li>
    <li style="margin:0;padding:0;list-style:none;>3. C</li>
</ol>


When viewed during a game: A level two heading ("==") will appear with a box around it on the BGA view, and be uppercased. A level three heading ("===") is formatted identically and is indistinguishable from a level two heading, except that it [https://boardgamearena.com/bug?id=71867 slightly overlaps the text above it]. A level four heading ("====") is displayed within the box of the level three heading, and bolded.
{{!}}-style="background:#f4fff4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}static marker +
line breaks²
{{!}}<pre style="background:none;border:none;">


[[File:Ruleset heading example.png|thumb|center]]
1. A


When viewed on a game's about page: All rules are in a single box, with level two through four headings both being bold fonts in their original cases. Level two headings are slightly larger than the other two.
2. B


[[File:Ruleset heading example about.png|thumb|center]]
3. C


For example, the source for those screenshots in [[Gamehelpsevenwonders |the rules to 7 Wonders]] are marked up as:
</pre>
{{!}}
1. A


<pre>== End of game Scoring ==
2. B


The game ends at the end of the third Age, after the Conflict tokens have been handed out.
3. C
Each player totals their civilization points and the player with the highest total is declared the winner.
{{!}}<p style="margin:8px 0;padding:0;line-height:normal;">1. A</p>
In case of a tie, the player with the most coins in their treasury is the winner. A tie on coins is not broken further
<p style="margin:8px 0;padding:0;line-height:normal;">2. B</p>
<p style="margin:8px 0;padding:0;line-height:normal;">3. C</p>


Points are counted from 7 categories in the following order:
{{!}}-style="background:#f4ffff;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}HTML + CSS
{{!}}<pre style="background:none;border:none;">
<ol style="
    margin:1em 0;
    padding-inline-start:40px;
">
    <li style="list-style-type:decimal;">A</li>
    <li style="list-style-type:decimal;">B</li>
    <li style="list-style-type:decimal;">C</li>
</ol>
</pre>
{{!}}<ol style="
    margin:1em 0;
    padding-inline-start:40px;
">
    <li style="list-style-type:decimal;">A</li>
    <li style="list-style-type:decimal;">B</li>
    <li style="list-style-type:decimal;">C</li>
</ol>
{{!}}<ol style="
    margin:1em 0;
    padding-inline-start:40px;
    line-height:normal;
">
    <li style="list-style-type:decimal;">A</li>
    <li style="list-style-type:decimal;">B</li>
    <li style="list-style-type:decimal;">C</li>
</ol>
{{!}}}</div>
* <code><nowiki><ol></nowiki></code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol ordered list]<code><nowiki></ol></nowiki></code>
* <code><nowiki><li></nowiki></code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li list item]<code><nowiki></li></nowiki></code>


=== Military Conflicts ===
|title3=Definition lists
|body3=<div style="width:100%;max-width:90vw;overflow:scroll;">
{{{!}} class="wikitable" style="width:max-content;"
{{!}}+Wiki vs [https://BoardGameArena.com BoardGameArena.com] list formatting
!
!Wiki text
!Wiki
!BGA
{{!}}-style="background:#fff4f4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic
marker¹ <code>;</code> <code>:</code>
{{!}}<pre style="background:none;border:none;">
;A term: A detail
;B term: B detail
;C term: C detail
</pre>
{{!}}
;A term: A detail
;B term: B detail
;C term: C detail
{{!}}<dl style="line-height:normal;">
<dt style="font-weight:normal;">A term</dt>
  <dd style="margin-inline-start:0;">A detail</dd>
<dt style="font-weight:normal;">B term</dt>
  <dd style="margin-inline-start:0;">B detail</dd>
<dt style="font-weight:normal;">C term</dt>
  <dd style="margin-inline-start:0;">C detail</dd>
</dl>


Each player adds their Victory and Defeat tokens (this total can be negative!).
{{!}}-style="background:#fffff4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}Dynamic¹ +
static marker
{{!}}<pre style="background:none;border:none;">
;'''A term''': A detail
;'''B term''': B detail
;'''C term''': C detail
</pre>
{{!}}
;'''A term''': A detail
;'''B term''': B detail
;'''C term''': C detail
{{!}}<dl style="line-height:normal;">
<dt><b>A term</b></dt>
  <dd style="margin-inline-start:0;">A detail</dd>
<dt><b>B term</b></dt>
  <dd style="margin-inline-start:0;">B detail</dd>
<dt><b>C term</b></dt>
  <dd style="margin-inline-start:0;">C detail</dd>
</dl>


=== Treasury Contents ===
{{!}}-style="background:#f4fff4;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}static marker +
line breaks²
{{!}}<pre style="background:none;border:none;">


For every 3 coins in their possession at the end of the game, players score 1 victory point. Leftover coins score no points.
'''A term''': A detail


=== Wonders ===
'''B term''': B detail


Each player then adds to their score the victory points from their wonder.
'''C term''': C detail


=== Civilian Structures ===
</pre>
{{!}}


Each player adds the victory points of their Civilian structures. This amount is indicated on each Civilian structure.
'''A term''': A detail


=== Scientific Structures ===
'''B term''': B detail


The scientific cards earn victory points in two very different ways: from sets of identical symbols and from sets of 3 different symbols.
'''C term''': C detail
Be careful : the victory points earned by both methods are cumulative.


==== Sets of identical symbols ====
{{!}}<p style="margin:8px 0;padding:0;line-height:normal;"><b>A term</b>: A detail</p>
For each of the 3 existing scientific symbols, the player wins the following</pre>
<p style="margin:8px 0;padding:0;line-height:normal;"><b>B term</b>: B detail</p>
<p style="margin:8px 0;padding:0;line-height:normal;"><b>C term</b>: C detail</p>


==Icons==
{{!}}-style="background:#f4ffff;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"{{!}}HTML + CSS
{{!}}<pre style="background:none;border:none;">
<dl>
<dt><b>A term</b></dt>
  <dd style="margin-inline-start:1.6em;">A detail</dd>
<dt><b>B term</b></dt>
  <dd style="margin-inline-start:1.6em;">B detail</dd>
<dt><b>C term</b></dt>
  <dd style="margin-inline-start:1.6em;">C detail</dd>
</dl>
</pre>
{{!}}<dl>
<dt><b>A term</b></dt>
  <dd style="margin-inline-start:1.6em;">A detail</dd>
<dt><b>B term</b></dt>
  <dd style="margin-inline-start:1.6em;">B detail</dd>
<dt><b>C term</b></dt>
  <dd style="margin-inline-start:1.6em;">C detail</dd>
</dl>
{{!}}<dl style="line-height:normal;">
<dt><b>A term</b></dt>
  <dd style="margin-inline-start:1.6em;">A detail</dd>
<dt><b>B term</b></dt>
  <dd style="margin-inline-start:1.6em;">B detail</dd>
<dt><b>C term</b></dt>
  <dd style="margin-inline-start:1.6em;">C detail</dd>
</dl>
{{!}}}</div>
* <code><nowiki><dl></nowiki></code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl description list]<code><nowiki></dl></nowiki></code>
* <code><nowiki><dt></nowiki></code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt description term]<code><nowiki></dt></nowiki></code>
* <code><nowiki><dd></nowiki></code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd description details]<code><nowiki></dd></nowiki></code>
}}


Some game rules, including [[Gamehelpjumpdrive]] and [[Gamehelpspacestationphoenix]], use keywords such as [METAL] and [PLANET].
¹Dynamic markers generate HTML list structure.


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.
²Without dynamic markers, <code><nowiki><p></nowiki></code>[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p paragraphs]<code><nowiki></p></nowiki></code> are generated which require line breaks before and after the "list" to prevent merging into surrounding paragraphs.


This feature seems to be undocumented, and [https://boardgamearena.com/forum/viewtopic.php?p=118661#p118661 has been confirmed] as a custom option that a developer can choose to create for a game.
==Headings==


==Images==
Level 1 (h1) headings are the title of the page e.g. <code>= Wiki formatting =</code>, <code>= Gamehelp[name] =</code>, <code>= Tips_[name] =</code>.


'''[[Special:Upload|Upload an image]]'''
===Issues===


Attempting to specify an image size in image markup (eg. <code><nowiki>[[File:Marrakech example.jpg|300px]]</nowiki></code>) 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).
# In-game h2 and h3 headings are visually indistinguishable.
# In-game h3 headings overlap text from the previous section.
# h5 headings and below are visually indistinguishable from body text.
# Inconsistency between in-game and game panel headings.


A solution is to display images at the default size (meaning that they must also be uploaded at the size you want them to appear), eg:
====Bug reports====


<pre>[[File:Marrakech example.jpg]]</pre>
* '''[https://boardgamearena.com/bug?id=86652 h2/h3 headings not nested]'''
* '''[https://boardgamearena.com/bug?id=71867 Section headings overlapping text]'''


It's also possible to add rollover text if desired:
===Workarounds===


<pre>[[File:Marrakech example.jpg|Example move]]</pre>
Since in-game h3 headings became indistinguishable from h2 headings:
* Change h3 to h4 headings.
* Use additional line breaks before h3 headings.


Also, external links will also work within BGA if you want the image to link to a URL:
{|class="wikitable" style="width:max-content;"
|+Wiki vs [https://BoardGameArena.com BoardGameArena.com] heading formatting
!
!Wiki text
!Wiki
!BGA game panel
!BGA in-game
|-style="background:#fff0;"
!h2
|<pre style="background:none;border:none;">
* List item


<pre>[[File:Versions.png|link=https://lumberjacks-studio.com/en/project/trek-12_en/]]</pre>
== Example h2 heading ==


==Infoboxes==
* List item
</pre>
|
* List item
<div style="font-family:'Linux Libertine','Georgia','Times',serif;line-height:1.3;margin-top:1em;margin-bottom:0.25em;font-size:1.5em;border-bottom:1px solid #a2a9b1;">Example h2 heading</div>
* List item
|style="color:#000;background-color:rgba(211,211,211);padding:0.5rem;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin-top:10px;margin-bottom:10px;padding:0;line-height:normal;font-size:18px;font-weight:700;margin-block-start:10px;margin-block-end:10px;">Example h2 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|style="color:#000;background-color:#FAF4EE;padding:12px;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin-top:12px;margin:-12px -12px 20px;padding:12px;line-height:normal;font-size:14px;font-weight:700;margin-block-start:12px;margin-block-end:20px;background:linear-gradient(0deg,#f8f8f8,#e7e9e8);border-radius:6px 6px 0 0;box-shadow:0 5px 5px 0 rgba(0,0,0,.1);color:#385088;text-transform:uppercase;">Example h2 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|-style="background:#fff0;"
!h3
|<pre style="background:none;border:none;">
* List item


These are only used by a few game pages, but [[:Template:InfoBox]], [[:Template:InfoBoxes]] and [[:Template:InfoBoxes3]] allow game information to be displayed in one, two or three coloured boxes, in a way that also works in the BGA view. They look like this:
=== Example h3 heading ===


{{InfoBox|title=Example|body=Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.}}
* List item
</pre>
|
* List item
<div style="display:block;font-family:sans-serif;line-height:1.6;margin-top:0.3em;margin-bottom:0;padding-top:0.5em;font-size:1.2em;font-weight:bold;">Example h3 heading</div>
* List item
|style="color:#000;background-color:rgba(211,211,211);padding:0.5rem;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin-top:5px;margin-bottom:5px;padding:0;line-height:normal;font-size:16px;font-weight:700;margin-block-start:5px;margin-block-end:5px;">Example h3 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|style="color:#000;background-color:#FAF4EE;padding:12px;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin:-12px -12px 20px;padding:12px;line-height:normal;font-size:14px;font-weight:700;margin-block-start:-12px;margin-block-end:20px;background:linear-gradient(0deg,#f8f8f8,#e7e9e8);border-radius:6px 6px 0 0;box-shadow:0 5px 5px 0 rgba(0,0,0,.1);color:#385088;text-transform:uppercase;">Example h3 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|-style="background:#fff0;"
!h4
|<pre style="background:none;border:none;">
* List item


Click through to the templates above for usage instructions.
==== Example h4 heading ====


==In-article links==
* List item
</pre>
|
* List item
<div style="display:block;font-family:sans-serif;line-height:1.6;margin-top:0.3em;margin-bottom:0;padding-top:0.5em;font-size:14px;font-weight:bold;margin-block-start:4.2px;margin-block-end:0;">Example h4 heading</div>
* List item
|style="color:#000;background-color:rgba(211,211,211);padding:0.5rem;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin-top:20px;margin-bottom:5px;padding:0;line-height:normal;font-size:16px;font-weight:700;margin-block-start:20px;margin-block-end:5px;">Example h4 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|style="color:#000;background-color:#FAF4EE;padding:12px;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin-top:20px;margin-bottom:5px;padding:0;line-height:normal;font-size:16px;font-weight:700;margin-block-start:20px;margin-block-end:5px;">Example h4 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|-style="background:#fff0;"
!h5
|<pre style="background:none;border:none;">
* List item


Linking to a section within a rules page (eg. <code><nowiki>[[#endgame|the Endgame phase]]</nowiki></code>) will work within the rules on a live game, but not on the gamepanel page (eg. https://boardgamearena.com/gamepanel?game=hanabi#Black_Powder). If the user clicks on such a link on a gamepanel page, the page will simply reload without taking them to that section.
===== Example h5 heading =====


==Numbered lists==
* List item
</pre>
|
* List item
<div style="display:block;font-family:sans-serif;line-height:1.6;margin-top:0.3em;margin-bottom:0;padding-top:0.5em;font-size:14px;font-weight:bold;margin-block-start:0;margin-block-end:0;">Example h5 heading</div>
* List item
|style="color:#000;background-color:rgba(211,211,211);padding:0.5rem;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin:0;padding:0;line-height:normal;font-size:16px;font-weight:400;margin-block-start:0;margin-block-end:0;">Example h5 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|style="color:#000;background-color:#FAF4EE;padding:12px;"|<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
<div style="display:block;font-family:Roboto,Arial,sans-serif;margin:0;padding:0;line-height:normal;font-size:16px;font-weight:400;margin-block-start:0;margin-block-end:0;">Example h5 heading</div>
<li style="margin:0;padding:0;line-height:normal;list-style:none;font-size:16px;">List item</li>
|}


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.
{{infoBoxes|state=collapsed
|color1=#d3d3d3
|title1Color=#202122
|title1=<code>common.css</code> rules
|body1=<pre style="background:none;border:none;">
blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0; /*removes inline and block margins*/
    padding: 0; /*removes list indentation*/
}


Workarounds are to write out the numbers by hand, with either paragraph breaks or <nowiki><br/></nowiki> tags between them:
h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 10px;
}
blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
body {
    font-family: Roboto,Arial,sans-serif;
    //font-size: 16px;
}
h3, h4 {
    font-weight: 700;
    margin-bottom: 5px;
}
h3 {
    display: block;
    //font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    //font-weight: bold;
}
h3 {
    font-size: 16px;
    margin-top: 5px;
}
h4 {
    margin-top: 20px;
}
h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    //font-weight: bold;
}
h5 {
    display: block;
    //font-size: 0.83em;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    //font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    //font-weight: 400;
}</pre>


<pre>
|color2=#FAF4EE
1. Draw
|title2Color=#202122
|title2=<code>gameserver.css</code> rules
|body2=<pre style="background:none;border:none;">
.pagesection .wikicontent h2 {
    margin-top: 12px;
}
.pagesection h2, .pagesection h3, .portlet h2, .portlet h3 {
    background: linear-gradient(0deg,#f8f8f8,#e7e9e8);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,.1);
    color: #385088;
    font-size: 14px;
    margin: -12px -12px 20px;
    padding: 12px;
    text-transform: uppercase;
}</pre>
}}


2. Play
{{infoBoxes
|title1=Game panel heading example
|body1=
Game panel content appears in a single box:
[[File:Ruleset heading example about.png|thumb|center]]
|title2=In-game heading example
|body2=
In-game content appears in multiple boxes:
[[File:Ruleset heading example.png|thumb|center]]
}}


3. Discard
==Links==
</pre>


<pre>
'''[https://www.mediawiki.org/wiki/Help:Links Help:Links]'''
1. Draw<br/>
2. Play<br/>
3. Discard
</pre>


==Game pieces==
* The '''[[Main_Page]]''' (root) of this wiki redirects to '''[[Help]]'''.
* '''[https://BoardGameArena.com/doc BoardGameArena.com/doc]''' displays the '''[[Help]]''' index of games.
* Note: each heading has a unique id appended with a number as necessary.
*: e.g. [[#Issues_3]] links to Links Issues and [[#Issues_4]] links to Images Issues.


'''[[:Category:GamePieceTemplates]]'''
===Issues===


Generic game pieces including:
# '''Links to section headings <code>#</code>''' do not work outside of the wiki ('''doc.'''BoardGameArena.com).
* Chess pieces
# URL is resolved to <code>/doc</code> instead of the current page.
* Go stones
# In-game links navigate the user away from the game.
* Reversi tokens
* Draughts
* Dice


===Dice===
e.g. <code><nowiki>[[#Section_heading_link]]</nowiki></code> ⇨ https://BoardGameArena.com/doc#Section_heading_link ¹.


Six-sided dice can be displayed using a template, eg. <code><nowiki>{{whiteDie|=6}}</nowiki></code>.
====Bug reports====


See '''[[Gamehelpdudo|GameHelpDudo]]''' for examples.
* ¹'''[https://boardgamearena.com/bug?id=88292 Section links don't work]'''


Dice are available in four colours: whiteDie, yellowDie, orangeDie and blackDie:
===Workarounds===


{{whiteDie|=1}}
# Remove links that do not function as expected.
{{yellowDie|=2}}
{{orangeDie|=3}}
{{blackDie|=4}}


==Game boards==
==Images==


'''[[:Category:GameBoardTemplates]]'''
'''[https://www.mediawiki.org/wiki/Help:Images Help:Images]'''


There are a few customisable game boards available:
===Issues===
* [[:Template:Chessboard]]
* [[:Template:Goboard9]]
* [[:Template:Quoridorboard]]


==Playing cards==
# Resized images do not display on [https://BoardGameArena.com BoardGameArena.com].
#: e.g. <code><nowiki>[[File:Marrakech_example.jpg</nowiki>'''|300px'''<nowiki>]]</nowiki></code> because the ''resized'' image does not exist in the referenced directory.
# Thumbnails images do not display on [https://BoardGameArena.com BoardGameArena.com].
#: e.g. <code><nowiki>[[File:Marrakech_example.jpg</nowiki>'''|thumb'''<nowiki>]]</nowiki></code> because thumbnails are just resized images.
# Image links do not work on [https://BoardGameArena.com BoardGameArena.com].
#: e.g. <code><nowiki>[[File:Versions.png</nowiki>'''|link=https://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg'''<nowiki>]]</nowiki></code> because the link resolves to <code>https://boardgamearena.com/dochttps://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg</code>


'''[[:Category:Card_templates]]'''
===Workarounds===


[[:Template:Card]] can be used to display playing card icons.
# '''[[Special:Upload|Upload]]''' '''''YourImage''''' with the size it will appear and include the image as simply:
#: e.g. <code><nowiki>[[File:Marrakech_example.jpg]]</nowiki></code>
# Create a <code>[[#Create_your_own_icons|<nowiki>{{gameIcon}}</nowiki>]]</code> with a <code>scale</code> factor.
#: e.g. <code><nowiki>{{</nowiki>'''YourIcon'''|scale='''0.5'''<nowiki>}}</nowiki></code> to reduce the image dimensions by ½.
# Replace image links with regular links.
#: e.g. <code><nowiki>[[File:Versions.png]]</nowiki></code>
#: <code><nowiki>[https://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg LinkText]</nowiki></code>


{|class="wikitable" style="text-align:center;"
===Tips===
|+Playing card template examples for a BGA wiki page
!Type
|<code><nowiki>{{club}}</nowiki></code>
|<code><nowiki>{{spade}}</nowiki></code>
|<code><nowiki>{{heart}}</nowiki></code>
|<code><nowiki>{{diamond}}</nowiki></code>
|<code><nowiki>{{cardBack}}</nowiki></code>
|<code><nowiki>{{card|=A}}</nowiki></code>
|<code><nowiki>{{club|=A}}</nowiki></code>
|<code><nowiki>{{club|=A|colour=green}}</nowiki></code>
|-
!Result
|{{club}}
|{{spade}}
|{{heart}}
|{{diamond}}
|{{cardBack}}
|{{card|=A}}
|{{club|=A}}
|{{club|=A|colour=green}}
|}


[[:Template:Cardholder]] can display suitless cards (designed for [[Gamehelphanabi|GameHelpHanabi]]) in a "holder", with "clue" notes. See the linked template for further documentation.
# Optionally include rollover text <code><nowiki>[[File:Marrakech_example.jpg</nowiki>'''|Example move'''<nowiki>]]</nowiki></code>


==Tables==
==Tables==


Table borders are stripped by the BGA display. They can be added back by adding a fixed width <code>border=</code> to the image markup, eg:
'''[https://www.mediawiki.org/wiki/Help:Tables Help:Tables]'''
 
===Issues===
 
{{infoBox|float=right|state=collapsed|color=#b44
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
.wikicontent table {
    border-collapse: collapse;
    margin-left: 5px;
    margin-top: 5px;
    width: 98%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th {
    text-align: left;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: 400;
}
.wikicontent table td, .wikicontent table th {
    padding: 5px;
    text-align: center;
}
blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
.wikicontent table td, .wikicontent table th {
    padding: 5px;
    text-align: center;
}
</pre>
}}
# <code>width: 98%;</code> stretches tables across the screen on [https://BoardGameArena.com BoardGameArena.com].
# Borders do not display on [https://BoardGameArena.com BoardGameArena.com].
 
===Workarounds===
 
# <code>style="width:auto;"</code> fits column width to the contents.
# <code>border="2"</code> creates table cell borders.
# Replace with [https://developer.mozilla.org/en-US/docs/Web/HTML HTML] + [https://developer.mozilla.org/en-US/docs/Web/CSS/grid CSS grid].


<pre>{| class="wikitable" style="width:auto;text-align:center;" border="2"
{|class="wikitable" style="width:max-content; min-width:100%;"
|+Wiki vs [https://BoardGameArena.com BoardGameArena.com] table formatting
!
!Wiki text
!Wiki
!BGA
|-style="background:#fff0;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"|Raw wikitable
|<pre style="background:none;border:none;">
{|class="wikitable"
|+Caption
!0-90
|⭐
|-
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}
</pre>
|
{|class="wikitable"
|+Caption
!0-90
!0-90
|⭐
|⭐
Line 221: Line 721:
!111-125
!111-125
|⭐⭐⭐
|⭐⭐⭐
|}</pre>
|}
 
|
will display as:
{|style="margin-left:5px; margin-top:5px; border-collapse:collapse; padding:5px; width:98%; text-align:center; line-height:normal; font-weight:400; font-style:normal; font-size:16px; color:#000;"
 
|+style="text-align:left;"|Caption
{| class="wikitable" style="width:auto;text-align:center;" border="2"
!style="margin:0;padding:5px;font-weight:400;"|0-90
|style="margin:0;padding:5px;font-weight:400;"|⭐
|-
!style="margin:0;padding:5px;font-weight:400;"|91-110
|style="margin:0;padding:5px;font-weight:400;"|⭐⭐
|-
!style="margin:0;padding:5px;font-weight:400;"|111-125
|style="margin:0;padding:5px;font-weight:400;"|⭐⭐⭐
|}
|-style="background:#fff0;"
!style="writing-mode:vertical-rl;transform:rotate(180deg);"|<code>width:auto;</code> <code>border="2"</code>
|style="max-width:max-content;"|<pre style="background:none;border:none;">
{|class="wikitable" style="width:auto;" border="2"
|+Caption
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
|-
!111-125
|⭐⭐⭐
|}
</pre>
|
{|class="wikitable" style="width:auto;" border="2"
|+Caption
!0-90
!0-90
|⭐
|⭐
Line 236: Line 761:
|⭐⭐⭐
|⭐⭐⭐
|}
|}
 
|
Tables default to 100% width on the BGA view: if you want to override that, you can do so by adding something like <code>style="width:10%"</code> after the <code>border="2"</code>.
{|style="margin-left:5px; margin-top:5px; border-collapse:collapse; padding:5px; width:auto; text-align:center; line-height:normal; font-weight:400; font-style:normal; font-size:16px; color:#000;" border="2"
 
|+style="text-align:left;"|Caption
<code>style="width:auto;text-align:center;"</code>:
!style="margin:0;padding:5px;font-weight:400;"|0-90
# <code>width:auto;</code> fits column width to the contents
|style="margin:0;padding:5px;font-weight:400;"|⭐
# <code>text-align:center;</code> centres the contents
|-
!style="margin:0;padding:5px;font-weight:400;"|91-110
|style="margin:0;padding:5px;font-weight:400;"|⭐⭐
|-
!style="margin:0;padding:5px;font-weight:400;"|111-125
|style="margin:0;padding:5px;font-weight:400;"|⭐⭐⭐
|}
|}


===Option grids===
===Option grids===


Where a game has multiple interdependent options, it can be useful to have a visual option grid.
Option grids can help visualise multiple interdependent options.
 
Where inflexible wiki text tables fall short, HTML + [https://developer.mozilla.org/en-US/docs/Web/CSS/grid CSS grid] is responsive to screen size e.g. '''[[Gamehelppente|GameHelpPente]]''':
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|GameHelpPente]]''':


<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;">
<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;">
Line 285: Line 816:
</div>
</div>


<pre>
{{infoBoxes|maxWidth=936|state=collapsed
|color1=#0aa
|title1=HTML + inline CSS
|body1=<pre style="background:none;border:none;font-size:smaller;white-space:pre;overflow:scroll;">
<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;">
<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 #f0f;background:#fef;padding:0.5rem;width:max-content;">Training mode only</div>
Line 322: Line 856:
</div>
</div>
</pre>
</pre>
|color2=#ba4
|title2=Unresponsive wiki text equivalent
|body2=
<pre style="background:none;border:none;">
{|class="wikitable" style="text-align:left;width:max-content;" border="2"
|+Options
|-
!rowspan="2" style="text-align:left;"|# of players
!rowspan="2" style="text-align:center;"|2
!colspan="2" style="text-align:center;"|4
!rowspan="2" style="text-align:center;"|3
|-
!style="text-align:center;"|Team
!style="text-align:center;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Free-for-all
|-
!style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|All options win
|colspan="2"|Align exactly '''5''' stones in a row
|colspan="2"|Align exactly '''4''' stones in a row
|-
!style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Overline win
|colspan="2"|May align more than '''5''' stones in a row
|colspan="2"|May align more than '''4''' stones in a row
|-
!style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Capture win
|colspan="2"|Make '''5''' captures
|colspan="2"|Make '''4''' captures
|-
!style="text-align:left;"|Capture three
|colspan="4"|May capture two '''or three''' stones (Keryo Pente)
|-
!rowspan="3" style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Self-capture
|colspan="4" style="background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|No effect: a stone may be placed in a capture position
|-
|colspan="4"|Self-capture: results in '''self-capture!''' (Poof Pente)
|-
|colspan="4"|Forbidden: a stone may '''not''' be placed in a capture position
|-
!rowspan="2" style="text-align:left;"|Overtime capture
|colspan="4"|Break the line: may capture to break a winning line (Boat Pente)
|-
|colspan="4"|Capture the line: may capture an entire winning line
|-
!rowspan="2" style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Mixed capture
|
|colspan="3" style="background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Enabled: May capture stones of mixed colour
|-
|colspan="4"|Disabled: Captures of one colour only
|}
</pre>
}}
==Blockquote==
===Issues===
{{infoBox|float=right|state=collapsed|color=#b44
|title=<code>common.css</code> rules
|body=<pre style="background:none;border:none;">
blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0; /*removes inline and block margins*/
    padding: 0; /*removes list indentation*/
}
</pre>
}}
# '''Margins''' and '''padding''' are removed on [https://BoardGameArena.com BoardGameArena.com].
# No left '''border'''.
===Workarounds===
# Replace with [https://developer.mozilla.org/en-US/docs/Web/HTML HTML] + [https://developer.mozilla.org/en-US/docs/Web/CSS CSS].
{{infoBox|state=collapsed|color=#0aa|maxWidth=
|title=HTML + CSS <code><nowiki><blockquote></nowiki></code> formatting
|body=<div style="width:100%;max-width:90vw;overflow:scroll;">
{{{!}}class{{=}}"wikitable" style{{=}}"width:max-content;"
!Wiki text
!Wiki
!BGA
{{!}}-style="background:#f4ffff;"
{{!}}<pre style="background:none;border:none;">
<blockquote style="
    margin:1em 0;
    margin-inline:40px;
    padding:8px 32px;
    border-left:4px solid #eaecf0;
">
This is a <blockquote>
</blockquote>
</pre>
{{!}}<blockquote style="
    margin:1em 0;
    margin-inline:40px;
    padding:8px 32px;
    border-left:4px solid #eaecf0;
">
This is a
<code><nowiki><blockquote></nowiki></code>
</blockquote>
{{!}}<blockquote>
This is a
<code><nowiki><blockquote></nowiki></code>
</blockquote>
{{!}}}
</div>
}}
==Wiki templates==
'''[https://www.mediawiki.org/wiki/Help:Templates Help:Templates]'''
===[[:Template:InfoBox]]===
Customisable container(s) responsive to screen size.
{{InfoBox|title=Example
|body=Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
}}
----
===Create your own icons===
{{infoBox |maxWidth= |color=#37c |titleAlign=left
|title=Step 1
|body='''[[Special:Upload|Upload]]''' '''''YourImage'''''.png
}}
{{infoBox |maxWidth= |color=#3aa |titleAlign=left
|title=Step 2
|body=Create <code>[https://en.doc.boardgamearena.com/Template:YourIcon https://en.doc.boardgamearena.com<wbr>/Template:'''''YourIcon''''']</code>
Fill in the parameters:
<pre style="background:none;border:none;">
{{gameIcon
|tooltip=
|imageFileName=
|scale=1
|width=
|height=
|x=0
|y=0
|={{{1|&amp;ZeroWidthSpace;}}}
|textColor=black
|outlineColor=white
}}<nowiki><</nowiki>noinclude<nowiki>>
[[Category:YourIcons]]
<</nowiki>noinclude<nowiki>></nowiki>
</pre>
}}
{{infoBox |maxWidth= |color=#3c7 |titleAlign=left
|title=Step 3
|body=Insert <code><nowiki>{{</nowiki>'''''YourIcon'''''<nowiki>}}</nowiki></code>
}}
See '''[[:Template:GameIcon#Examples|Examples]]'''
===[[:Category:GameIconTemplates]]===
<div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem">
{|class="wikitable" style="text-align:center;"
|+Cylinder tokens
!Wiki text
!Result
|-
|<code><nowiki>{{redCylinder|1}}</nowiki></code>
|{{redCylinder|1}}
|-
|<code><nowiki>{{orangeCylinder|2}}</nowiki></code>
|{{orangeCylinder|2}}
|-
|<code><nowiki>{{yellowCylinder|3}}</nowiki></code>
|{{yellowCylinder|3}}
|-
|<code><nowiki>{{greenCylinder|4}}</nowiki></code>
|{{greenCylinder|4}}
|-
|<code><nowiki>{{blueCylinder|5}}</nowiki></code>
|{{blueCylinder|5}}
|-
|<code><nowiki>{{purpleCylinder|6}}</nowiki></code>
|{{purpleCylinder|6}}
|-
|<code><nowiki>{{whiteCylinder|7}}</nowiki></code>
|{{whiteCylinder|7}}
|-
|<code><nowiki>{{greyCylinder|8}}</nowiki></code>
|{{greyCylinder|8}}
|-
|<code><nowiki>{{blackCylinder|9}}</nowiki></code>
|{{blackCylinder|9}}
|-
|<code><nowiki>{{creamCylinder|10}}</nowiki></code>
|{{creamCylinder|10}}
|}
{|class="wikitable" style="text-align:center;"
|+Meeples
!Wiki text
!Result
|-
|<code><nowiki>{{meeple|red|1}}</nowiki></code>
|{{meeple|red|1}}
|-
|<code><nowiki>{{meeple|orange|2}}</nowiki></code>
|{{meeple|orange|2}}
|-
|<code><nowiki>{{meeple|yellow|3}}</nowiki></code>
|{{meeple|yellow|3}}
|-
|<code><nowiki>{{meeple|green|4}}</nowiki></code>
|{{meeple|green|4}}
|-
|<code><nowiki>{{meeple|blue|5}}</nowiki></code>
|{{meeple|blue|5}}
|-
|<code><nowiki>{{meeple|purple|6}}</nowiki></code>
|{{meeple|purple|6}}
|-
|<code><nowiki>{{meeple|white|7}}</nowiki></code>
|{{meeple|white|7}}
|-
|<code><nowiki>{{meeple|grey|8}}</nowiki></code>
|{{meeple|grey|8}}
|-
|<code><nowiki>{{meeple|black|9}}</nowiki></code>
|{{meeple|black|9}}
|}
{|class="wikitable" style="text-align:center;"
|+Dice
!Wiki text
!Result
|-
|<code><nowiki>{{whiteDie|1}}</nowiki></code>
|{{whiteDie|1}}
|-
|<code><nowiki>{{yellowDie|2}}</nowiki></code>
|{{yellowDie|2}}
|-
|<code><nowiki>{{orangeDie|3}}</nowiki></code>
|{{orangeDie|3}}
|-
|<code><nowiki>{{blackDie|4}}</nowiki></code>
|{{blackDie|4}}
|}
</div>
----
===[[:Category:Card_templates]]===
<div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem">
{|class="wikitable" style="text-align:center;"
|+[[:Template:Card]]
!Wiki text
!Result
|-
|<code><nowiki>{{card|A}}</nowiki></code>
|{{card|A}}
|-
|<code><nowiki>{{club|K}}</nowiki></code>
|{{club|K}}
|-
|<code><nowiki>{{spade|Q}}</nowiki></code>
|{{spade|Q}}
|-
|<code><nowiki>{{heart|J}}</nowiki></code>
|{{heart|J}}
|-
|<code><nowiki>{{diamond|10}}</nowiki></code>
|{{diamond|10}}
|-
|<code><nowiki>{{cardBack}}</nowiki></code>
|{{cardBack}}
|-
|<code><nowiki>{{club|color=green}}</nowiki></code>
|{{club|color=green}}
|}
{|class="wikitable" style="width:min-content;"
|+[[:Template:Cardholder]]
!Wiki text
!Result
|-
|<code><nowiki>{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice}}</nowiki></code>
|{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice}}<br>
|}
</div>
----
<div style="display:flex;flex-wrap:wrap;align-items:start;gap:0.5rem">
{|class="wikitable" style="text-align:center;"
!Wiki text
!Result
|-
|<code><nowiki>{{Beginner}} {{Beginner|0}}</nowiki></code>
|{{Beginner}} {{Beginner|0}}
|-
|<code><nowiki>{{Apprentice}} {{Apprentice|1}}</nowiki></code>
|{{Apprentice}} {{Apprentice|1}}
|-
|<code><nowiki>{{Average}} {{Average|100}}</nowiki></code>
|{{Average}} {{Average|100}}
|-
|<code><nowiki>{{Good}} {{Good|200}}</nowiki></code>
|{{Good}} {{Good|200}}
|-
|<code><nowiki>{{Strong}} {{Strong|300}}</nowiki></code>
|{{Strong}} {{Strong|300}}
|-
|<code><nowiki>{{Expert}} {{Expert|500}}</nowiki></code>
|{{Expert}} {{Expert|500}}
|-
|<code><nowiki>{{Master}} {{Master|700}}</nowiki></code>
|{{Master}} {{Master|700}}
|}
{|class="wikitable" style="text-align:center;"
!Wiki text
!Result
|-
|<code><nowiki>{{player|2}}</nowiki></code>
|{{player|2}}
|-
|<code><nowiki>{{hand|4}}</nowiki></code>
|{{hand|4}}
|}
</div>
----
===[[:Category:GameBoardTemplates]]===
<div style="display:flex;flex-flow:row wrap;align-items:center;gap:0.5rem;">
<div style="display:flex;flex-flow:column wrap;align-items:center;">
'''[[:Template:Chessboard]]'''
<code><nowiki>{{Chessboard}}</nowiki></code>
{{Chessboard|squareSize=32}}
</div>
<div style="display:flex;flex-flow:column wrap;align-items:center;">
'''[[:Template:Goboard9]]'''
<code><nowiki>{{Goboard9}}</nowiki></code>
{{Goboard9|squareSize=26}}
</div>
<div style="display:flex;flex-flow:column wrap;align-items:center;">
'''[[:Template:Quoridorboard]]'''
<code><nowiki>{{Quoridorboard}}</nowiki></code>
{{Quoridorboard|squareSize=16}}
</div>
<div style="display:flex;flex-flow:column wrap;align-items:center;">
'''[[:Template:HexMap]]'''
<code><nowiki>{{HexMap}}</nowiki></code>
<div style="display:flex;flex-flow:row wrap;align-items:center;gap:0.5rem;">
{{hexMap |n=1 |
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
}}
{{hex |x=5 |y=1 |{{TaluvaSand}}
}}
{{hex |x=7 |y=1 |{{TaluvaSand}}
}}
{{hex |x=2 |y=2 |{{TaluvaSand}}
}}
{{hex |x=4 |y=2 |{{TaluvaJungle}} |{{meeple|green}}
}}
{{hex |x=6 |y=2 |{{TaluvaJungle}}
}}
{{hex |x=8 |y=2 |{{TaluvaJungle}}
}}
{{hex |x=1 |y=3 |{{TaluvaSand}}
}}
{{hex |x=3 |y=3 |{{TaluvaJungle}}
}}
{{hex |x=5 |y=3 |{{TaluvaClearing}} |{{meeple|blue}}
}}
{{hex |x=7 |y=3 |{{TaluvaClearing}} |{{meeple|red}}
}}
{{hex |x=2 |y=4 |{{TaluvaSand}} |{{meeple|green}}
}}
{{hex |x=4 |y=4 |{{TaluvaJungle}}
}}
{{hex |x=6 |y=4 |{{TaluvaClearing}} |{{meeple|blue}}
}}
}}
{{hexMap|
{{hiveAnt          |r=3  |x=1 |y=2 }}
{{hiveBeetle        |r=1  |x=2 |y=3 }}
{{hiveGrasshopper  |r=11 |x=4 |y=3 }}
{{hiveSpider        |r=9  |x=5 |y=2 }}
{{hiveBee|w=        |r=0  |x=3 |y=2 }}
{{hiveGrasshopper|w=|r=0  |x=2 |y=1 }}
{{hiveSpider|w=    |r=0  |x=4 |y=1 }}
}}
</div>
</div>
</div>

Latest revision as of 16:40, 9 October 2024

Purpose

This page was created as a result of the Wiki style guide forum thread.

Most wiki (doc.BoardGameArena.com) formatting is not preserved on BoardGameArena.com, but there are some workarounds. This page is a collection of unofficial tips on how to make wiki pages display well in-game and on game panels.

Feel free to add additional issues, advice and templates 🙂

Help:Formatting

Note: Wiki page changes are updated once per day on BoardGameArena.com.

Languages

Wiki page content displays:

  1. User's language, else
  2. English, else
  3. Create this page link/button.

e.g. A Chinese user reads the Jump Drive rules summary on its game panel page, displayed in English (en.doc.boardgamearena.com/Gamehelpjumpdrive) because the Chinese (zh.doc.boardgamearena.com/Gamehelpjumpdrive) page does not exist. The user sees a typo in the English rules and selects the edit page link to correct it, but the Chinese wiki's create page is displayed instead.

Bug reports

Lists

Help:Lists

Issues

common.css rules
li {
    list-style: none; /*removes list markers*/
}

li, ul {
    margin: 0; /*removes margin before and after lists*/
    padding: 0; /*removes list indentation*/
}

blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0; /*removes inline and block margins*/
    padding: 0; /*removes list indentation*/
}

Markers (bullets *, numbering #), margins and padding are removed on BoardGameArena.com.

Bug reports

Workarounds

  1. Use static markers (•,-,1.).
  2. Replace with HTML + CSS.
common.css rules
ul.bulletlist li {
    list-style: disc none inside
}

.wikicontent p {
    margin-bottom: 8px;
    margin-top: 8px
}
Bullet lists
Wiki vs BoardGameArena.com list formatting
Wiki text Wiki BGA
Dynamic

marker¹ * 

* A
* B
* C
  • A
  • B
  • C
  • A
  • B
  • C
Dynamic¹ +

static marker 

*- A
*- B
*- C
  • - A
  • - B
  • - C
  • - A
  • - B
  • - C
static marker +

line breaks² 


- A

- B

- C

- A

- B

- C

- A

- B

- C

HTML + CSS 
<ul class="bulletlist" style="
    margin:1em 0;
    padding-inline-start:40px;
">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
  • A
  • B
  • C
  • A
  • B
  • C
Numbered lists
Wiki vs BoardGameArena.com list formatting
Wiki text Wiki BGA
Dynamic

marker¹ # 

# A
# B
# C
  1. A
  2. B
  3. C
  1. A
  2. B
  3. C
Dynamic¹ +

static marker 

# 1. A
# 2. B
# 3. C
  1. 1. A
  2. 2. B
  3. 3. C
  1. 1. A
  2. 2. B
  3. 3. C
static marker +

line breaks² 


1. A

2. B

3. C

1. A

2. B

3. C

1. A

2. B

3. C

HTML + CSS 
<ol style="
    margin:1em 0;
    padding-inline-start:40px;
">
    <li style="list-style-type:decimal;">A</li>
    <li style="list-style-type:decimal;">B</li>
    <li style="list-style-type:decimal;">C</li>
</ol>
  1. A
  2. B
  3. C
  1. A
  2. B
  3. C
Definition lists
Wiki vs BoardGameArena.com list formatting
Wiki text Wiki BGA
Dynamic

marker¹ ; : 

;A term: A detail
;B term: B detail
;C term: C detail
A term
A detail
B term
B detail
C term
C detail
A term
A detail
B term
B detail
C term
C detail
Dynamic¹ +

static marker 

;'''A term''': A detail
;'''B term''': B detail
;'''C term''': C detail
A term
A detail
B term
B detail
C term
C detail
A term
A detail
B term
B detail
C term
C detail
static marker +

line breaks² 


'''A term''': A detail

'''B term''': B detail

'''C term''': C detail

A term: A detail

B term: B detail

C term: C detail

A term: A detail

B term: B detail

C term: C detail

HTML + CSS 
<dl>
 <dt><b>A term</b></dt>
  <dd style="margin-inline-start:1.6em;">A detail</dd>
 <dt><b>B term</b></dt>
  <dd style="margin-inline-start:1.6em;">B detail</dd>
 <dt><b>C term</b></dt>
  <dd style="margin-inline-start:1.6em;">C detail</dd>
</dl>
A term
A detail
B term
B detail
C term
C detail
A term
A detail
B term
B detail
C term
C detail

¹Dynamic markers generate HTML list structure.

²Without dynamic markers, <p>paragraphs</p> are generated which require line breaks before and after the "list" to prevent merging into surrounding paragraphs.

Headings

Level 1 (h1) headings are the title of the page e.g. = Wiki formatting =, = Gamehelp[name] =, = Tips_[name] =.

Issues

  1. In-game h2 and h3 headings are visually indistinguishable.
  2. In-game h3 headings overlap text from the previous section.
  3. h5 headings and below are visually indistinguishable from body text.
  4. Inconsistency between in-game and game panel headings.

Bug reports

Workarounds

Since in-game h3 headings became indistinguishable from h2 headings:

  • Change h3 to h4 headings.
  • Use additional line breaks before h3 headings.
Wiki vs BoardGameArena.com heading formatting
Wiki text Wiki BGA game panel BGA in-game
h2 
* List item

== Example h2 heading ==

* List item
  • List item
Example h2 heading
  • List item
  • List item
    • Example h2 heading
  • List item
    		•
  • List item
    • Example h2 heading
  • List item
    • h3 
    * List item

=== Example h3 heading ===

* List item
    • List item
    Example h3 heading
    • List item
  • List item
    • Example h3 heading
  • List item
    		•
  • List item
    • Example h3 heading
  • List item
    • h4 
    * List item

==== Example h4 heading ====

* List item
    • List item
    Example h4 heading
    • List item
  • List item
    • Example h4 heading
  • List item
    		•
  • List item
    • Example h4 heading
  • List item
    • h5 
    * List item

===== Example h5 heading =====

* List item
    • List item
    Example h5 heading
    • List item
  • List item
    • Example h5 heading
  • List item
    		•
  • List item
    • Example h5 heading
  • List item
    • common.css rules
    blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0; /*removes inline and block margins*/
    padding: 0; /*removes list indentation*/
}

h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 10px;
}
blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
body {
    font-family: Roboto,Arial,sans-serif;
    //font-size: 16px;
}
h3, h4 {
    font-weight: 700;
    margin-bottom: 5px;
}
h3 {
    display: block;
    //font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    //font-weight: bold;
}
h3 {
    font-size: 16px;
    margin-top: 5px;
}
h4 {
    margin-top: 20px;
}
h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    //font-weight: bold;
}
h5 {
    display: block;
    //font-size: 0.83em;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    //font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    //font-weight: 400;
}
    gameserver.css rules
    .pagesection .wikicontent h2 {
    margin-top: 12px;
}
.pagesection h2, .pagesection h3, .portlet h2, .portlet h3 {
    background: linear-gradient(0deg,#f8f8f8,#e7e9e8);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 5px 5px 0 rgba(0,0,0,.1);
    color: #385088;
    font-size: 14px;
    margin: -12px -12px 20px;
    padding: 12px;
    text-transform: uppercase;
}
    Game panel heading example
    Game panel content appears in a single box:
    Ruleset heading example about.png
    In-game heading example
    In-game content appears in multiple boxes:
    Ruleset heading example.png

    Links

    Help:Links

    Issues

    1. Links to section headings # do not work outside of the wiki (doc.BoardGameArena.com).
    2. URL is resolved to /doc instead of the current page.
    3. In-game links navigate the user away from the game.

    e.g. [[#Section_heading_link]] ⇨ https://BoardGameArena.com/doc#Section_heading_link ¹.

    Bug reports

    Workarounds

    1. Remove links that do not function as expected.

    Images

    Help:Images

    Issues

    1. Resized images do not display on BoardGameArena.com.
      e.g. [[File:Marrakech_example.jpg|300px]] because the resized image does not exist in the referenced directory.
    2. Thumbnails images do not display on BoardGameArena.com.
      e.g. [[File:Marrakech_example.jpg|thumb]] because thumbnails are just resized images.
    3. Image links do not work on BoardGameArena.com.
      e.g. [[File:Versions.png|link=https://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg]] because the link resolves to https://boardgamearena.com/dochttps://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg

    Workarounds

    1. Upload YourImage with the size it will appear and include the image as simply:
      e.g. [[File:Marrakech_example.jpg]]
    2. Create a {{gameIcon}} with a scale factor.
      e.g. {{YourIcon|scale=0.5}} to reduce the image dimensions by ½.
    3. Replace image links with regular links.
      e.g. [[File:Versions.png]]
      [https://en.doc.boardgamearena.com/images/b/b5/Factum_Rules_Summary_EN_v1.jpg LinkText]

    Tips

    1. Optionally include rollover text [[File:Marrakech_example.jpg|Example move]]

    Tables

    Help:Tables

    Issues

    common.css rules
    .wikicontent table {
    border-collapse: collapse;
    margin-left: 5px;
    margin-top: 5px;
    width: 98%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th {
    text-align: left;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: 400;
}
.wikicontent table td, .wikicontent table th {
    padding: 5px;
    text-align: center;
}
blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
.wikicontent table td, .wikicontent table th {
    padding: 5px;
    text-align: center;
}
    1. width: 98%; stretches tables across the screen on BoardGameArena.com.
    2. Borders do not display on BoardGameArena.com.

    Workarounds

    1. style="width:auto;" fits column width to the contents.
    2. border="2" creates table cell borders.
    3. Replace with HTML + CSS grid.
    Wiki vs BoardGameArena.com table formatting
    Wiki text Wiki BGA
    Raw wikitable 
    {|class="wikitable"
|+Caption
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}
    Caption
    0-90 ⭐
    91-110 ⭐⭐
    111-125 ⭐⭐⭐
    Caption
    0-90 ⭐
    91-110 ⭐⭐
    111-125 ⭐⭐⭐
    width:auto; border="2" 
    {|class="wikitable" style="width:auto;" border="2"
|+Caption
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}
    Caption
    0-90 ⭐
    91-110 ⭐⭐
    111-125 ⭐⭐⭐
    Caption
    0-90 ⭐
    91-110 ⭐⭐
    111-125 ⭐⭐⭐

    Option grids

    Option grids can help visualise multiple interdependent options. Where inflexible wiki text tables fall short, HTML + CSS grid is responsive to screen size e.g. GameHelpPente:

    Training mode only
    Default
    Other
    # of players
    2
    3
    4
    Free-for-all
    Team
    All options win
    Align exactly 5 stones in a row
    Align exactly 4 stones in a row
    Overline win
    May align more than 5 stones in a row
    May align more than 4 stones in a row
    Capture win
    Make 5 captures
    Make 4 captures
    Capture three
    May capture two or three stones (Keryo Pente)
    Self-capture
    No effect: a stone may be placed in a capture position
    Self-capture: results in self-capture! (Poof Pente)
    Forbidden: a stone may not be placed in a capture position
    Overtime capture
    Break the line: may capture to break a winning line (Boat Pente)
    Capture the line: may capture an entire winning line
    Mixed capture
    Enabled: May capture stones of mixed colour
    Disabled: Captures of one colour only
    HTML + inline CSS
    <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>
    Unresponsive wiki text equivalent
    {|class="wikitable" style="text-align:left;width:max-content;" border="2"
|+Options
|-
!rowspan="2" style="text-align:left;"|# of players
!rowspan="2" style="text-align:center;"|2
!colspan="2" style="text-align:center;"|4
!rowspan="2" style="text-align:center;"|3
|-
!style="text-align:center;"|Team
!style="text-align:center;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Free-for-all
|-
!style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|All options win
|colspan="2"|Align exactly '''5''' stones in a row
|colspan="2"|Align exactly '''4''' stones in a row
|-
!style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Overline win
|colspan="2"|May align more than '''5''' stones in a row
|colspan="2"|May align more than '''4''' stones in a row
|-
!style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Capture win
|colspan="2"|Make '''5''' captures
|colspan="2"|Make '''4''' captures
|-
!style="text-align:left;"|Capture three
|colspan="4"|May capture two '''or three''' stones (Keryo Pente)
|-
!rowspan="3" style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Self-capture
|colspan="4" style="background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|No effect: a stone may be placed in a capture position
|-
|colspan="4"|Self-capture: results in '''self-capture!''' (Poof Pente)
|-
|colspan="4"|Forbidden: a stone may '''not''' be placed in a capture position
|-
!rowspan="2" style="text-align:left;"|Overtime capture
|colspan="4"|Break the line: may capture to break a winning line (Boat Pente)
|-
|colspan="4"|Capture the line: may capture an entire winning line
|-
!rowspan="2" style="text-align:left;background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Mixed capture
|
|colspan="3" style="background:#efe;box-shadow:inset 0 0 0 1px #4f4;"|Enabled: May capture stones of mixed colour
|-
|colspan="4"|Disabled: Captures of one colour only
|}

    Blockquote

    Issues

    common.css rules
    blockquote, body, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0; /*removes inline and block margins*/
    padding: 0; /*removes list indentation*/
}
    1. Margins and padding are removed on BoardGameArena.com.
    2. No left border.

    Workarounds

    1. Replace with HTML + CSS.
    HTML + CSS <blockquote> formatting
    Wiki text Wiki BGA 
    <blockquote style="
    margin:1em 0;
    margin-inline:40px;
    padding:8px 32px;
    border-left:4px solid #eaecf0;
">
This is a <blockquote>
</blockquote>

    This is a

    <blockquote>

    This is a

    <blockquote>

    Wiki templates

    Help:Templates

    Template:InfoBox

    Customisable container(s) responsive to screen size.

    Example
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Create your own icons

    Step 1
    Upload YourImage.png
    Step 2
    Create https://en.doc.boardgamearena.com/Template:YourIcon

    Fill in the parameters: 

    {{gameIcon
|tooltip=
|imageFileName=
|scale=1
|width=
|height=
|x=0
|y=0
|={{{1|&ZeroWidthSpace;}}}
|textColor=black
|outlineColor=white
}}<noinclude>
[[Category:YourIcons]]
<noinclude>
    Step 3
    Insert {{YourIcon}}

    See Examples

    Category:GameIconTemplates

    Cylinder tokens
    Wiki text Result
    {{redCylinder|1}} red token1
    {{orangeCylinder|2}} orange token2
    {{yellowCylinder|3}} yellow token3
    {{greenCylinder|4}} green token4
    {{blueCylinder|5}} blue token5
    {{purpleCylinder|6}} purple token6
    {{whiteCylinder|7}} white token7
    {{greyCylinder|8}} grey token8
    {{blackCylinder|9}} black token9
    {{creamCylinder|10}} cream token10
    Meeples
    Wiki text Result
    {{meeple|red|1}} red meeple1
    {{meeple|orange|2}} orange meeple2
    {{meeple|yellow|3}} yellow meeple3
    {{meeple|green|4}} green meeple4
    {{meeple|blue|5}} blue meeple5
    {{meeple|purple|6}} purple meeple6
    {{meeple|white|7}} white meeple7
    {{meeple|grey|8}} grey meeple8
    {{meeple|black|9}} black meeple9
    Dice
    Wiki text Result
    {{whiteDie|1}} white die​
    {{yellowDie|2}} yellow die​
    {{orangeDie|3}} orange die​
    {{blackDie|4}} black die​

    Category:Card_templates

    Template:Card
    Wiki text Result
    {{card|A}} A
    {{club|K}} K♣
    {{spade|Q}} Q♠
    {{heart|J}} J♥
    {{diamond|10}} 10♦
    {{cardBack}} 🟔
    {{club|color=green}} ​♣
    Template:Cardholder
    Wiki text Result
    {{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice}} A♦A♣A♥A♠ Alice
    Wiki text Result
    {{Beginner}} {{Beginner|0}} rank Beginner rank 0
    {{Apprentice}} {{Apprentice|1}} rank Apprentice rank 1
    {{Average}} {{Average|100}} rank Average rank 100
    {{Good}} {{Good|200}} rank Good rank 200
    {{Strong}} {{Strong|300}} rank Strong rank 300
    {{Expert}} {{Expert|500}} rank Expert rank 500
    {{Master}} {{Master|700}} rank Master rank 700
    Wiki text Result
    {{player|2}} 2players
    {{hand|4}} 4cards in hand

    Category:GameBoardTemplates

    Template:Chessboard

    {{Chessboard}}

    A
    B
    C
    D
    E
    F
    G
    H
    8
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    8
    7
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    7
    6
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    6
    5
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    5
    4
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    4
    3
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    3
    2
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    2
    1
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    Empty Square
    1
    A
    B
    C
    D
    E
    F
    G
    H

    Template:Goboard9

    {{Goboard9}}

    A
    B
    C
    D
    E
    F
    G
    H
    J
    9
    9
    8
    8
    7
    7
    6
    6
    5
    5
    4
    4
    3
    3
    2
    2
    1
    1
    A
    B
    C
    D
    E
    F
    G
    H
    J

    Template:Quoridorboard

    {{Quoridorboard}}

    A
    B
    C
    D
    E
    F
    G
    H
    I
    9
    9
    8
    8
    7
    7
    6
    6
    5
    5
    4
    4
    3
    3
    2
    2
    1
    1
    A
    B
    C
    D
    E
    F
    G
    H
    I

    Template:HexMap

    {{HexMap}}

    1
    Sand​
    red meeple​
    Sand​
    ​
    Sand​
    ​
    Sand​
    ​
    Jungle​
    green meeple​
    Jungle​
    ​
    Jungle​
    ​
    Sand​
    ​
    Jungle​
    ​
    Clearing​
    blue meeple​
    Clearing​
    red meeple​
    Sand​
    green meeple​
    Jungle​
    ​
    Clearing​
    blue meeple​
    Soldier Ant​
    ​
    ​
    Beetle​
    ​
    ​
    Grasshopper​
    ​
    ​
    Spider​
    ​
    ​
    Queen Bee​
    ​
    ​
    Grasshopper​
    ​
    ​
    Spider​
    ​
    ​
    Retrieved from "http:///index.php?title=Wiki_formatting&oldid=22976"