Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Difference between revisions of "Character Sheet Enhancement"

From Roll20 Wiki

Jump to: navigation, search
(Created page with "{{NavSheetDoc}} {{main|Building Character Sheets}} '''Character Sheet Enhancement''' is an upcoming update to character sheet and how they are made, enabling many new feature...")
 
m (Make sheet Print-Friendly)
(21 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
{{main|Building Character Sheets}}
 
{{main|Building Character Sheets}}
  
'''Character Sheet Enhancement''' is an upcoming update to character sheet and how they are made, enabling many new features, and removing some existing restrictions sheet creators have had to deal with. On Jan 29th 2021 it was made avaiable on the [[Dev Server]] for testing.
+
{{notebox| Update is live as of '''March 9th 2021''', see '''{{forum|permalink/9883156/ Character Sheet Enhancements!}}''' for more info }}
  
Roll20 have said there will eventually be documenation how the new things will work.
+
'''Character Sheet Enhancement''' (or '''CSE''' for short) is an update to [[CS|character sheets]] and [[Building Character Sheets|how they are made]], enabling many new features, and removing some existing restrictions [[Sheet Author|sheet creators]] have had to deal with. See [[Legacy Sheet]](LCS) for info on the older system.
  
* Read the announcement for the full details: {{forum|post/9750841/now-on-dev-server-character-sheet-enhancements Now on Dev Server: Character Sheet Enhancements!}}
+
 
 +
It was available on the [[Dev Server]] for testing During February, and fully released on March 9th 2021, then partially(?) rolled back little later due to some problems.
 +
 
 +
=Info=
 +
* '''{{forum|permalink/9883156/ Character Sheet Enhancements!}}''' (March 9th Release)
 +
* {{hc|articles/360061735034-iFrame-and-Sanitization-Changes iFrame-and-Sanitization-Changes}}
 +
* Dev Server Testing details (Jan 29th): {{forum|post/9750841/now-on-dev-server-character-sheet-enhancements Now on Dev Server: Character Sheet Enhancements!}} - Char sheet subforum
 +
* {{forum|permalink/9750846/  Dev Server Talk}} - Pro subforum tread
  
  
 
==Features==
 
==Features==
A summary of what updates the system will have
+
A summary of what updates the sheet system will have.
  
 
* HTML updates:
 
* HTML updates:
** Accessibility enhancements: ARIA and semantic HTML support
+
** Accessibility enhancements: [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute ARIA] and [https://www.w3schools.com/html/html5_semantic_elements.asp semantic HTML] support
 
** No pre-pending of “sheet-” to classes
 
** No pre-pending of “sheet-” to classes
** Enable use of #id in HTML elements
+
** Enable use of [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id #id] in HTML elements
** Allowing the usage of HTML datalists – [https://app.roll20.net/forum/post/9624869/html5-datalist-for-character-sheets details]
+
** Allowing the usage of HTML [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist datalists] – {{forum|post/9624869/html5-datalist-for-character-sheets suggestion thread}}
** Allowing the usage of HTML <code><details></code> and <code><summary></code>-elements – [https://app.roll20.net/forum/post/9584382/add-html-tags-details-and-summary-to-whitelist-for-both-character-sheets-and-chat-formatting details]
+
** Allowing the usage of HTML <code><details></code> and <code><summary></code>-elements – {{forum|post/9584382/add-html-tags-details-and-summary-to-whitelist-for-both-character-sheets-and-chat-formatting suggestion thread}}  (part of semantic HTML support)
 
* The CSS sanitizer has been removed, which now allows for:
 
* The CSS sanitizer has been removed, which now allows for:
** Media queries that allow responsive design
+
** [https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries Media queries] that allow responsive design(like [[mobile]] support)
** Sheet authors can now use the print media query to style their character sheet for printing from the popout window – [https://app.roll20.net/forum/post/1242365/print-character-sheets details]
+
** Sheet authors can now use <code>@media print</code> media query to style their character sheet for printing from the popout window- {{forum|post/1242365/print-character-sheets suggestion thread}}
** Support for CSS Animations – [https://app.roll20.net/forum/post/9664083/charactersheets-fixing-animation-keyframes-and-allowing details]
+
** Support for [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations CSS Animations] – {{forum|post/9664083/charactersheets-fixing-animation-keyframes-and-allowing suggestion thread}}
 
* Integrated [[quickbar|macro bar]] for character quick attacks, including pop out windows
 
* Integrated [[quickbar|macro bar]] for character quick attacks, including pop out windows
 
* <strike>Character Sheet/Stat Block is the default for opening a PC/NPC</strike> This is being reverted until we have more research regarding implementation.
 
* <strike>Character Sheet/Stat Block is the default for opening a PC/NPC</strike> This is being reverted until we have more research regarding implementation.
  
==Examples==
+
==How to update sheet to new==
collection of examples & usercases of some features. Please expand with code or links to examples/documentation.
+
* {{hc|articles/360061735034-iFrame-and-Sanitization-Changes iFrame-and-Sanitization-Changes}}
  
 +
 +
==CSE Examples==
 +
{{stub}}
 +
Collection of examples, usercases or links to info of some of the new features. Please expand with code or links to examples/documentation.
 +
===ID===
 +
Examples of using the HTML global element [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id #id].
 +
====id CSS selector====
 +
Use an id to select one unique element. An id name cannot start with a number.
 +
<pre data-language="html" style="overflow:auto;">
 +
//html
 +
<input type="text" id="character-name" name="attr_character_name" value="" placeholder="Character Name" />
 +
 +
//css
 +
#character-name {
 +
  text-align: center;
 +
  color: red;
 +
}
 +
</pre>
 +
 +
====id Clickable Label text====
 +
Create "clickable" label text by using a linked label and input. Linked labels could replace various methods that use hidden checkboxes to simulate clickable text/buttons on a sheet.
 +
<pre data-language="html" style="overflow:auto;">
 +
//html
 +
<input id="attackMod1" name="attr_attackMod1" type="checkbox" value="1" class="hidden">
 +
<label for="attackMod1" class="link">Apply Modifier</label>
 +
//css
 +
.sheet-hidden {
 +
    display:none;
 +
}
 +
label.link:hover {
 +
  cursor: help;
 +
  text-decoration: underline;
 +
  color: red;
 +
}
 +
input[type="checkbox"]:checked + label.link {
 +
  color: red;
 +
}
 +
</pre>
 +
 +
====id Sheet Anchors====
 +
Create links to jump to anchored elements of a sheet.  Could be used as a "Navigational Menu/Table of Contents", or simply as clickable text that can quickly move to another section of a sheet.
 +
<pre data-language="html" style="overflow:auto;">
 +
//html
 +
<h2>Sheet Anchor example</h2>
 +
<h3 id="menu">Menu</h3>
 +
<ul>
 +
    <li><a href="#Attacks">Attacks</a></li>
 +
    <li><a href="#Skills">Skills</a></li>
 +
    <li><a href="#Spells">Spells</a></li>
 +
</ul>
 +
<h3 id="Attacks">Attacks</h3>
 +
<p>"Lorem ipsum"</p>
 +
<h3 id="Skills">Skills</h3>
 +
<p>"Lorem ipsum"</p>
 +
<h3 id="Spells">Spells</h3>
 +
<p>"Lorem ipsum"</p>
 +
<hr>
 +
<p><a href="#menu">Menu</a></p>
 +
</pre>
  
 
===Datalist===
 
===Datalist===
https://app.roll20.net/forum/post/9624869/html5-datalist-for-character-sheets
+
{{forum|post/9624869/html5-datalist-for-character-sheets suggestion thread}}
  
"Datalists are a helpful tool for sheet authors to guide players toward filling out input-fields. Datalists combines the precision of a dropdown-field with the flexibility of an input-field." -Peter B.
+
"[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist Datalists] are a helpful tool for sheet authors to guide players toward filling out input-fields. Datalists combines the precision of a dropdown-field with the flexibility of an input-field." -Peter B.
  
<pre data-language="html">
+
<pre data-language="html" style="overflow:auto;">
 
<input type="text" list="abilityScores" name="attr_abilityScore">
 
<input type="text" list="abilityScores" name="attr_abilityScore">
 
<datalist id="abilityScores">
 
<datalist id="abilityScores">
Line 51: Line 117:
 
You have a <code><details></code> where everything is inside,  and then the <code><summary></code>-element inside it determine what is shown when it's collapsed.
 
You have a <code><details></code> where everything is inside,  and then the <code><summary></code>-element inside it determine what is shown when it's collapsed.
  
<pre data-language="html">
+
<pre data-language="html" style="overflow:auto;">
 
<details>
 
<details>
 
   <summary>Epcot Center</summary>
 
   <summary>Epcot Center</summary>
Line 57: Line 123:
 
</details>
 
</details>
 
</pre>
 
</pre>
 +
 +
* [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details <details>] MDN Web Docs
 +
* [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary <summary>] MDN Web Docs
 +
 +
===Accessability===
 +
Accessibility enhancements: [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute ARIA] and [https://www.w3schools.com/html/html5_semantic_elements.asp semantic HTML] support
 +
 +
* https://www.w3.org/WAI/fundamentals/accessibility-intro/
 +
* https://developer.mozilla.org/en-US/docs/Web/Accessibility
 +
* https://www.w3schools.com/html/html_accessibility.asp
 +
 +
===Responsive Design===
 +
Aimed at making adjustment for [[mobile]]
 +
 +
* Our mobile app will be launching in the near future and we want character sheets to look beautiful on it!
 +
* We now support breakpoints, ID’s, and new HTML tags, all of which should help in your responsive sheet journey.
 +
* Here are some awesome articles on this topic:
 +
** https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
 +
** https://www.w3schools.com/html/html_responsive.asp
 +
** https://www.w3schools.com/css/css_rwd_intro.asp
 +
* [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme prefers-color-scheme light/dark] - have been tested to work.
 +
 +
====Mobile====
 +
Responsive design leads way to more easily adapting/optimizing Char Sheet for eventual use with the new [[Mobile]]-app, which is in Open Beta(as of 18th March 2021).
 +
 +
* {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Hammerheads CortexPrime-Hammerheads sourcecode}} - sheet contains adaptations for mobile layout that have been tested to work with [[CSE]] at some point.
 +
 +
{{repo|Roll20/roll20-character-sheets/blob/93d8a80ff162cd10be8e8fbc9d8799149f7550f5/CortexPrime-Hammerheads/CortexPrime-Hammerhead.css#L481 link}}:
 +
<pre pre data-language="css">
 +
@media only screen and (max-width: 480px) {
 +
    .sheet-wrapper {
 +
        min-width: 320px;
 +
    }
 +
       
 +
    .sheet-traits4 {
 +
        display: grid;
 +
        grid-template-columns: repeat(2, 1fr );
 +
        align-items: start;
 +
    }
 +
 +
    .sheet-traits3 {
 +
        display: grid;
 +
        grid-template-columns: repeat(1, 1fr );
 +
        align-items: start;
 +
    }
 +
 +
    .sheet-traits2 {
 +
        display: grid;
 +
        grid-template-columns: repeat(1, 1fr );
 +
        align-items: start;
 +
    }
 +
 +
    .sheet-traits2 .sheet-traits2 {
 +
        display: grid;
 +
        grid-template-columns: repeat(2, 1fr );
 +
        align-items: start;
 +
    }
 +
 +
    .sheet-traits1 {
 +
        display: grid;
 +
        grid-template-columns: repeat(1, 1fr );
 +
        align-items: start;
 +
    }
 +
 +
/* halo layout */
 +
 +
    .sheet-editPane {
 +
        width: 80%;
 +
    }
 +
   
 +
    input[name="attr_Portrait"][value="PC0"]  {
 +
        border: 1px solid #cccc00;
 +
        text-align: center;
 +
        background-color: rgba(255, 128, 0, 0.05);
 +
    }
 +
 +
    h1.sheet-hide {
 +
        visibility: visible !important;
 +
        display: block;
 +
    }
 +
 +
    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-physical {
 +
        position: static;
 +
        border: 1px dashed #ffcb2b;
 +
        border-top: 6px solid #ffcb2b;
 +
        padding: 5px;
 +
    }
 +
 +
    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-mental {
 +
        position: static;
 +
        border: 1px dashed #ffcb2b;
 +
        border-top: 6px solid #ffcb2b;
 +
        padding: 5px;
 +
    }
 +
 +
    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-social {
 +
        position: static;
 +
        border: 1px dashed #ffcb2b;
 +
        border-top: 6px solid #ffcb2b;
 +
        padding: 5px;
 +
    }
 +
   
 +
    input[name="attr_Portrait"]:not([value="PC0"]) + .sheet-action {
 +
        display: block;
 +
        visibility: visible;
 +
    }
 +
   
 +
    .charsheet button[type="roll"].sheet-blank-roll-button + span {
 +
        display: block !important;
 +
        visibility: visible !important;
 +
    }
 +
}
 +
</pre>
 +
 +
General Tips:
 +
* Make roll buttons & input fields larger
 +
* Uing CSS Grid or Flexbox for the normal sheet layout will make it easier to create a resposive/phone-adapted version of the layout.
 +
** Like have some stat sections that on the normal sheet is arranged in a 2x3 grid, have on mobile these appear in a 1x6 grid. Can also be a easier first step to adjust
 +
* reduce number of features that requires you to "hover" your mouse over some section. (tooltips are less accessible)
 +
 +
===Popup===
 +
code snippet by Roll20 Dev exemplifying how popups can be implemented on sheets.
 +
 +
https://codepen.io/imprakash/pen/GgNMXO
 +
 +
===Make sheet Print-Friendly===
 +
The CSS sanitation upgrade makes it now possible to use <code>@media print</code> media query to style character sheets for printing from the popout window- – {{forum|post/1242365/print-character-sheets Original suggestion thread}}
 +
 +
* [https://www.sitepoint.com/css-printer-friendly-pages/ Guide - How to Create Printer-friendly Pages with CSS] - non-roll20 guide
 +
 +
It can be a good idea to take a look at any existing paper versions of the char sheet for your system and maybe create a compromise layout that's somewhere between the default Roll20 sheet and the paper version, for familiarity's sake.
 +
 +
List of things that can make sheets printer - friendly:
 +
* remove all "redundant" images, except logo.  (minimize ink use)
 +
* remove roll buttons
 +
* force sheet aspect ratio to fit [https://a-size.com/a4-paper-size/ A4]
 +
* set background to white, change text & section borders to be thin and high contrast, with as much being white
 +
* collapsed info boxes/repeating sections
 +
** expand all collapsed info sections
 +
** make print option to show some repeating sections in a "condensed form", such as spellists or inventory, showing each as a one-liner and skipping their detailed description
 +
** make option to have spell/powers/items appear at separate pages with all their info, like in the form of [http://worksheets.us/collection/print-spell-cards-5e.html spellcards].
 +
* multi-tab sheets
 +
** if contains mutually excursive sheet-types (like PC/NPC/ships), show only content of the one used
 +
** skip the Settings tab
 +
* control number of pages
 +
* adjust things so sheet info could fit on one or two pages(for a single-sheet printout), or make it a multiple of two.
 +
* spread out things evenly so there isn't any page with just a tiny bit info
 +
* '''advanced idea:''' create an optional "condensed" print version where all stats are shown as compactly as possible, maybe even on a single page. This "condensed print mode" could be toggled from the settings.
 +
 +
=See Also=
 +
* {{hc|articles/360061735034-iFrame-and-Sanitization-Changes iFrame-and-Sanitization-Changes}}
 
<br>
 
<br>
 
<br>
 
<br>
 
[[Category:Character Sheet Creation]]
 
[[Category:Character Sheet Creation]]

Revision as of 16:45, 17 April 2021

Main Page: Building Character Sheets


Character Sheet Enhancement (or CSE for short) is an update to character sheets and how they are made, enabling many new features, and removing some existing restrictions sheet creators have had to deal with. See Legacy Sheet(LCS) for info on the older system.


It was available on the Dev Server for testing During February, and fully released on March 9th 2021, then partially(?) rolled back little later due to some problems.

Contents

Info


Features

A summary of what updates the sheet system will have.

  • HTML updates:
    • Accessibility enhancements: ARIA and semantic HTML support
    • No pre-pending of “sheet-” to classes
    • Enable use of #id in HTML elements
    • Allowing the usage of HTML datalistssuggestion thread(Forum)
    • Allowing the usage of HTML <details> and <summary>-elements – suggestion thread(Forum) (part of semantic HTML support)
  • The CSS sanitizer has been removed, which now allows for:
  • Integrated macro bar for character quick attacks, including pop out windows
  • Character Sheet/Stat Block is the default for opening a PC/NPC This is being reverted until we have more research regarding implementation.

How to update sheet to new


CSE Examples


Collection of examples, usercases or links to info of some of the new features. Please expand with code or links to examples/documentation.

ID

Examples of using the HTML global element #id.

id CSS selector

Use an id to select one unique element. An id name cannot start with a number.

//html
<input type="text" id="character-name" name="attr_character_name" value="" placeholder="Character Name" />

//css
#character-name {
  text-align: center;
  color: red;
}

id Clickable Label text

Create "clickable" label text by using a linked label and input. Linked labels could replace various methods that use hidden checkboxes to simulate clickable text/buttons on a sheet.

//html
<input id="attackMod1" name="attr_attackMod1" type="checkbox" value="1" class="hidden">
<label for="attackMod1" class="link">Apply Modifier</label>
//css
.sheet-hidden {
    display:none;
}
label.link:hover {
  cursor: help;
  text-decoration: underline;
  color: red;
}
input[type="checkbox"]:checked + label.link {
  color: red;
}

id Sheet Anchors

Create links to jump to anchored elements of a sheet. Could be used as a "Navigational Menu/Table of Contents", or simply as clickable text that can quickly move to another section of a sheet.

//html
<h2>Sheet Anchor example</h2>
<h3 id="menu">Menu</h3>
<ul>
    <li><a href="#Attacks">Attacks</a></li>
    <li><a href="#Skills">Skills</a></li>
    <li><a href="#Spells">Spells</a></li>
</ul>
<h3 id="Attacks">Attacks</h3>
<p>"Lorem ipsum"</p>
<h3 id="Skills">Skills</h3>
<p>"Lorem ipsum"</p>
<h3 id="Spells">Spells</h3>
<p>"Lorem ipsum"</p>
<hr>
<p><a href="#menu">Menu</a></p>

Datalist

suggestion thread(Forum)

"Datalists are a helpful tool for sheet authors to guide players toward filling out input-fields. Datalists combines the precision of a dropdown-field with the flexibility of an input-field." -Peter B.

<input type="text" list="abilityScores" name="attr_abilityScore">
<datalist id="abilityScores">
    <option value="@{strength}">Strength</option>
    <option value="@{dexterity}">Dexterity</option>
    <option value="@{constitution}">Constitution</option>
    <option value="@{intelligence}">Intelligence</option>
    <option value="@{wisdom}">Wisdom</option>
    <option value="@{charisma}">Charisma</option>
</datalist>

<details>

A more simple way to create a collapsible section on a sheet than the old CSS tricks we have.

You have a <details> where everything is inside, and then the <summary>-element inside it determine what is shown when it's collapsed.

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Accessability

Accessibility enhancements: ARIA and semantic HTML support

Responsive Design

Aimed at making adjustment for mobile

Mobile

Responsive design leads way to more easily adapting/optimizing Char Sheet for eventual use with the new Mobile-app, which is in Open Beta(as of 18th March 2021).

link:

@media only screen and (max-width: 480px) {
    .sheet-wrapper {
        min-width: 320px;
    }
        
    .sheet-traits4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr );
        align-items: start;
    }

    .sheet-traits3 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

    .sheet-traits2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

    .sheet-traits2 .sheet-traits2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr );
        align-items: start;
    }

    .sheet-traits1 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

/* halo layout */

    .sheet-editPane {
         width: 80%;
     }
    
    input[name="attr_Portrait"][value="PC0"]  {
        border: 1px solid #cccc00;
        text-align: center;
        background-color: rgba(255, 128, 0, 0.05);
    }

    h1.sheet-hide {
        visibility: visible !important;
        display: block;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-physical {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-mental {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-social {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }
    
    input[name="attr_Portrait"]:not([value="PC0"]) + .sheet-action {
        display: block;
        visibility: visible;
    }
    
    .charsheet button[type="roll"].sheet-blank-roll-button + span {
        display: block !important;
        visibility: visible !important;
    }
}

General Tips:

  • Make roll buttons & input fields larger
  • Uing CSS Grid or Flexbox for the normal sheet layout will make it easier to create a resposive/phone-adapted version of the layout.
    • Like have some stat sections that on the normal sheet is arranged in a 2x3 grid, have on mobile these appear in a 1x6 grid. Can also be a easier first step to adjust
  • reduce number of features that requires you to "hover" your mouse over some section. (tooltips are less accessible)

Popup

code snippet by Roll20 Dev exemplifying how popups can be implemented on sheets.

https://codepen.io/imprakash/pen/GgNMXO

Make sheet Print-Friendly

The CSS sanitation upgrade makes it now possible to use @media print media query to style character sheets for printing from the popout window- – Original suggestion thread(Forum)

It can be a good idea to take a look at any existing paper versions of the char sheet for your system and maybe create a compromise layout that's somewhere between the default Roll20 sheet and the paper version, for familiarity's sake.

List of things that can make sheets printer - friendly:

  • remove all "redundant" images, except logo. (minimize ink use)
  • remove roll buttons
  • force sheet aspect ratio to fit A4
  • set background to white, change text & section borders to be thin and high contrast, with as much being white
  • collapsed info boxes/repeating sections
    • expand all collapsed info sections
    • make print option to show some repeating sections in a "condensed form", such as spellists or inventory, showing each as a one-liner and skipping their detailed description
    • make option to have spell/powers/items appear at separate pages with all their info, like in the form of spellcards.
  • multi-tab sheets
    • if contains mutually excursive sheet-types (like PC/NPC/ships), show only content of the one used
    • skip the Settings tab
  • control number of pages
  • adjust things so sheet info could fit on one or two pages(for a single-sheet printout), or make it a multiple of two.
  • spread out things evenly so there isn't any page with just a tiny bit info
  • advanced idea: create an optional "condensed" print version where all stats are shown as compactly as possible, maybe even on a single page. This "condensed print mode" could be toggled from the settings.

See Also