Character Sheet Development
Getting Started

General

Reference

Tools & Tips

Git/GitHub

Other

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, and then reisntated by end of March.

Info

Character Sheet Enhancements!^(Forum) (March 9th Release)
iFrame-and-Sanitization-Changes
Dev Server Testing details (Jan 29th): Now on Dev Server: Character Sheet Enhancements!^(Forum) - Char sheet subforum
Dev Server Talk^(Forum) - Pro subforum tread

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 in CSS (apart from roll-templates)
- Enable use of #id in HTML elements
- Allowing the usage of HTML datalists – suggestion 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:
- Media queries that allow responsive design(like mobile support)
- Sheet authors can now use @media print media query to style their character sheet for printing from the popout window- – suggestion thread^(Forum)
- Support for CSS Animations – suggestion thread^(Forum)
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.

Restrictions

CSE has fewer restrictions than Legacy Sheet, but still have a number of them.

CSE Code Restrictions

Issues

See the BCS/Bugs page for info on various bugs/issues people have encountered with making CSE-sheets, trying to convert Legacy Sheet to CSE, or sheet code bugs just in general.

How to update sheet to new

Here are some instructions of how to update a Legacy sheet to the new CSE environment.

Moving to the new CSE environment

As of this writing, sheets on the repository were automatically updated to include in their sheet.json file a new line, "legacy": true.

If you'd like to use the new environment, you can simply delete this line. It is not necessary to set it as false.

Remove the "Sheet-" Prepending

The most disruptive issue to moving from Legacy to CSE is that the new CSS sanitizer does not require prepending "Sheet-" to your CSS class; It does not automatically add the prepend to your HTML either. This means that it will not recognize such classes if you are using the new CSE environment and you did not explicitly call the class in your html with the prepend. You will want to go through your CSS rules and remove "Sheet-" from your classes.

Example of CSS
Old Class	New Class
.sheet-character_biography	.character_biography

An Important Exception to this are classes that are styling your Roll Templates. The chat window in games are not part of the CSE environment and are not part of the update so you will still need to follow legacy rules for styling roll templates.

The goal here is that the classes called in your html must match the class rules defined in CSS. If your code looked like:

<div class="sheet-character_biography">

Your class should still read as .sheet-character_biography. However, a majority of sheets will have depended on the Roll20 sanitizer which automatically "sheet-" before their classes in the html. So if your code looks more like:

<div class="character_biography">

Then your code will break if you are using .sheet-character_biography.

CSS Specificity

One issue that is currently bugging some sheets is that in addition to removing the sheet- prepend, the sanitizer no longer adds an extra .charsheet selector to CSS rules. This can make some of your CSS rules fail due to being less specific than some of Roll20's default styling than in the previous environment. If you find some styling to basic tags, namely the header tags (h1, h2, h3, etc) and label tags, to be missing, try manually adding in the .charsheet class to your selector.

Example of CSS
May fail	May succeed
h1 {styling;}	.charsheet h1 {styling;}

It is my personal advice to wrap your character sheet in something like <main></main> to give yourself a bit more control and having a frame to inject your basic formatting.

iFrame-and-Sanitization-Changes

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.

An id name cannot start with a number.

id CSS selector

Use an id to select one unique element.

//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>
<br>
<!-- add to of content here, so that the sheet scrolls up/down to focus on the linked section -->
<br>
<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>
<!-- this will move you up to the top of the sheet if it is longer than can be can be fit into view at one time -->

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>

<details> MDN Web Docs
<summary> MDN Web Docs

Roll20 applies some default styling that hides the normal open/closed arrow/triangle for <details>. set it to display:inline-items; or display:revert; to make it show again

first observed^(Forum)

Accessibility

Accessibility enhancements: ARIA and semantic HTML support

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:
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).

CortexPrime-Hammerheads sourcecode - sheet contains adaptations for mobile layout that have been tested to work with CSE at some point.

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 CSE sheets.

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

<div class="box">
	<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
	<div class="popup">
		<h2>Here i am</h2>
		<a class="close" href="#">×</a>
		<div class="content">
			Thank to pop me out of that button, but now i'm done so you can close this window.
		</div>
	</div>
</div>

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

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)

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

Sheets Using CSE

List of char sheets that have been updated to at least be CS-compliant, but likely also adopted to use some of the new features.

CortexPrime-Hammerheads - Mobile-adaption
Mythic D6 - Mythic D6 sourcecode - datalist, details/summary • by Andreas J.
CortexPrime-Tales-of-Xadia - Mobile -adaption
Barbaric! datalist • by Andreas J.
AD&D 2E - datalists, lots of datalists • by Peter B.

Changelog

April 30th - the css @import bug was fixed source^(Forum)

Roll20 Wiki

Navigation

Personal tools

Toolbox

Character Sheet Enhancement

From Roll20 Wiki

Contents