iFrame and Sanitization Changes

We have now included two systems of code sanitization for sheet development: Legacy System and New System.

Code Sanitization Changes

For sheet development, code sanitization is now split into two systems to choose from without the disruption of changes.

Legacy System

The legacy sanitization system uses more restrictive guidelines for the sanitization of both HTML and CSS.

How do I enable it?

By default, all existing sheets from our GitHub repositories have been opted into the legacy system. This allows sheet authors to transition over to the new system at their own pace while all existing sheets on the legacy system remain working the same as before.

If you're on the new sanitization system and want to swap back to Legacy, follow the steps below:

• GitHub Repo Sheets
  • In your sheet.json file, add the following key/value pair:
  • “legacy”: true

• Sheet Sandbox
  • In the sheet.json editor, add the following key/value pair:
  • “legacy”: true

• Custom Sheet Editor
  • In your game’s settings page, select the “Legacy Sanitization” checkbox, which sits above the code editor.

How do I create a sheet for this?

The community has a great Wiki article about this in HTML, CSS, and Javascript options and restrictions, seen here: https://wiki.roll20.net/Building_Character_Sheets#Restrictions.

New System

The new sanitization system no longer santizes incoming CSS and greatly lessens the restrictions and rules appended to incoming HTML as well.

How do I enable it?

By default, all new sheets from our repo, custom sheets, and custom sheet sandbox games are opted into the new system! Easy peasy!

If you're on the legacy system and want to swap to the new system, follow the steps below:

• GitHub Repo Sheets
  • In your sheet.json file, remove the following key/value pair:
  • “legacy”: true

• Sheet Sandbox
  • In the sheet.json editor, remove the following key/value pair:
  • “legacy”: true

• Custom Sheet Editor
  • In your game’s settings page, deselect the “Legacy Sanitization” checkbox, which sits above the code editor.

How do I create a sheet for this?

Start writing HTML and CSS as you would normally! We want the experience to be as close to traditional development as possible. Most items will work including classes, id’s, breakpoints, and animations.

However, there are still a few limitations for now which should be considered:

• Not all HTML elements and attributes are available, there are still a few restrictions. 
  • Restricted tag examples: link, video, iframe, meta
  • Restricted attributes examples:  autoplay, download, onclick

• Javascript is still restricted and must be utilized via Sheetworkers
  • You can read more about sheetworkers here: https://wiki.roll20.net/Sheetworkers
• Roll templates are still going to use the legacy sanitization system, which means they will follow the rules and restrictions as outlined here: https://wiki.roll20.net/Building_Character_Sheets#Restrictions

Migrating from Legacy to New System

This may seem like a daunting task, but we’re hoping these changes will allow for you to develop sheets in a much more efficient and improved manner.

This is a general outline of what you might do to convert to the new system, but by no means encompasses everything and is dependent on your own process and flow.

• Swap to the new sanitization system via your preferred method (GitHub, sheet sandbox, or custom sheet editor)
• Remove any hard-coded references to the following from your CSS and HTML and fix whatever issues it has caused.
  • “Sheet-” class
•  If you’re using our provided Roll20 grid, add “sheet-” to your HTML class attributes where those classes are being used.
• Convert as many things to roll buttons as you can to better utilize our macro quickbar!

Additional Development Considerations

As you migrate to this new system, consider these great tips to add to your sheet while you work:

• Better accessibility support
  • We now support aria tags, semantic HTML, and other natively supplied functions.
  • Here are some great reading materials that only scratch the surface of this discipline:
    • 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
  • 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

• Print styling
  • You can print a character sheet by opening it in a separate window and using the browser or devices native print functions. As a note, character sheet styling and some data may be missing or affected.
  • We now support the print media query, which should allow sheet authors to style their sheets specifically for when a user wants to print them.