Difference between revisions of "Character Sheet Development/Restrictions"
From Roll20 Wiki
Andreas J. (Talk | contribs) m |
m (→CSE: grammatical corrections) |
||
| (5 intermediate revisions by 2 users not shown) | |||
| Line 3: | Line 3: | ||
Restrictions in Roll20's [[Character Sheet Development]]-framework. Checking [[Character Sheet Development/Bugs & Quirks]] is also recommended. | Restrictions in Roll20's [[Character Sheet Development]]-framework. Checking [[Character Sheet Development/Bugs & Quirks]] is also recommended. | ||
{{NavSheetDoc}}</noinclude> | {{NavSheetDoc}}</noinclude> | ||
| − | Generally speaking, character sheets are created with [[HTML]], [[CSS]], and [[JavaScript]] (for [[Sheet Worker Scripts|Sheetworkers]]), but there exist some constraints & security filtering that restricts what can be used in character sheet code.<noinclude> | + | Generally speaking, character sheets are created with [[HTML]], [[CSS]], and [[JavaScript]] (for [[Sheet Worker Scripts|Sheetworkers]]), but there exist some constraints & security filtering that restricts what can be used, and where, in character sheet code.<noinclude> |
__TOC__ | __TOC__ | ||
| − | |||
==HTML & CSS== | ==HTML & CSS== | ||
</noinclude> | </noinclude> | ||
| + | ===Security Filtering=== | ||
| + | * '''Using the word <code>eval</code> anywhere in the sheet code will stop everything from working.''' Roll20 have put this as a security measure to prevent eval from used even in a roundabout way. You cant have attribute or class names that includes it. | ||
| + | ** Known list of forbidden words: {{code|data:}}, {{code|eval}}, {{code|cookie}}, {{code|window}}, {{code|parent}}, {{code|this}}, {{code|behaviour}}, {{code|behavior}}, {{code|expression}}, {{code|moz-binding}} | ||
| + | ** this also prevent you from importing fonts that contain {{code|eval}} as part of the name, like "Medi{{red|eval}}Sharp" | ||
| + | * All images will be passed through the Roll20 image proxy to prevent security attacks. This should be largely transparent to you and shouldn't affect anything, but it's something to be aware of. [[Image use in character sheets#General|Images in Sheets]] | ||
| + | |||
===[[CSE]]=== | ===[[CSE]]=== | ||
'''[[Character Sheet Enhancement]]''' is the new sheet code style that was released in March 2021. It has expanded features, is closer to baseline HTML/CSS, and is generally less restrictive compared to [[Legacy Sheet|Legacy Sheets]]. | '''[[Character Sheet Enhancement]]''' is the new sheet code style that was released in March 2021. It has expanded features, is closer to baseline HTML/CSS, and is generally less restrictive compared to [[Legacy Sheet|Legacy Sheets]]. | ||
| Line 14: | Line 19: | ||
In the Roll20, the character sheet code is basically wrapped inside a giant <code><form></code> tag(so don't use it). | In the Roll20, the character sheet code is basically wrapped inside a giant <code><form></code> tag(so don't use it). | ||
| − | * Most [https://www.w3schools.com/whatis/whatis_htmldom.asp DOM] functionalities can't be used | + | * Most [https://www.w3schools.com/whatis/whatis_htmldom.asp DOM] functionalities can't be used. |
| − | * Do not use Root HTML elements such as <code><html></code> <code><head></code>, <code><title></code>, or <code><body></code> | + | * Do not use Root HTML elements such as <code><html></code> <code><head></code>, <code><title></code>, or <code><body></code> in your HTML. Doing so will prevent your character sheet from loading in the virtual tabletop. |
| − | ** HTML Elements that | + | ** HTML Elements that don't work: <code><meter></code>, <code><progress></code>, <code>link</code>, <code>video</code>, <code>iframe</code>, <code>meta</code>, <code>input type="color"</code>. Trying to add any of these to a sheet will either result in Roll20 removing them or behave like they are a <code><nowiki><div></nowiki></code>. |
** Restricted attributes examples: <code>autoplay</code>, <code>download</code>, <code>onclick</code> | ** Restricted attributes examples: <code>autoplay</code>, <code>download</code>, <code>onclick</code> | ||
| − | * Elements that now | + | * Elements that now work: <code><datalist></code>, <code><details></code>, <code><summary></code>, <code><a href></code>, <code>main</code>, <code>section</code> |
* Enable use of [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id #id] in HTML elements, & <code><nowiki><a href=#></nowiki></code> | * Enable use of [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id #id] in HTML elements, & <code><nowiki><a href=#></nowiki></code> | ||
* Attribute names are case-insensitive when checked for uniqueness. All <code><input></code>, <code><select></code>, <code><textarea></code> etc. should have unique attribute names if intended to be independent. Two inputs with same attr name will mirror each other and update if the other one is changed. | * Attribute names are case-insensitive when checked for uniqueness. All <code><input></code>, <code><select></code>, <code><textarea></code> etc. should have unique attribute names if intended to be independent. Two inputs with same attr name will mirror each other and update if the other one is changed. | ||
* To create a section where you can dynamically add new entries, the [[Building_Character_Sheets#Repeating_Sections|Repeating Sections]] method is used through the <code><fieldset></code>-element. | * To create a section where you can dynamically add new entries, the [[Building_Character_Sheets#Repeating_Sections|Repeating Sections]] method is used through the <code><fieldset></code>-element. | ||
* <code><input></code> and <code><button></code> elements are restricted to a limited number of types. This is likely true with other elements. | * <code><input></code> and <code><button></code> elements are restricted to a limited number of types. This is likely true with other elements. | ||
| − | * All images will be passed through the Roll20 image proxy to prevent security attacks. This should be largely transparent to you and shouldn't affect anything, but it's something to be aware of. [[Image use in character sheets|Images in Sheets]] | + | * All images will be passed through the Roll20 image proxy to prevent security attacks. This should be largely transparent to you and shouldn't affect anything, but it's something to be aware of. [[Image use in character sheets#General|Images in Sheets]] |
| − | * | + | * {{code|[https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg <svg>]}}-element aren't supported directly, but they can be used if saved as separate<code>.svg</code> files: {{repo|roll20/roll20-character-sheets/blob/94b205a0a7aab896fd10fcf7fa362fce41c83908/DD5thEditionLegacy/5th%20Edition%20Legacy.css#L4661 Example}} |
* All attributes in [[Building_Character_Sheets/Roll_Templates|Roll Templates]] need to be written with double quotes, as single quotes results in roll template code being completely ignored. | * All attributes in [[Building_Character_Sheets/Roll_Templates|Roll Templates]] need to be written with double quotes, as single quotes results in roll template code being completely ignored. | ||
** classes called in Roll Templates must use the <code>sheet-classname</code> format, like is used with [[Legacy Sheet]] | ** classes called in Roll Templates must use the <code>sheet-classname</code> format, like is used with [[Legacy Sheet]] | ||
* If using the [[Designing_Character_Sheet_Layout#Roll20_columns.2Frows|roll20-made rows & columns]], need to prefix <code>sheet-</code> to their use in the HTML(likely in the CSS also). | * If using the [[Designing_Character_Sheet_Layout#Roll20_columns.2Frows|roll20-made rows & columns]], need to prefix <code>sheet-</code> to their use in the HTML(likely in the CSS also). | ||
| − | * You cannot refer to external CSS stylesheets | + | * You cannot refer to external CSS stylesheets. Everything needs to be in the CSS file. |
<br> | <br> | ||
| Line 35: | Line 40: | ||
* Certain(?) [https://www.w3schools.com/css/css_rwd_mediaqueries.asp Media queries] can now be used | * Certain(?) [https://www.w3schools.com/css/css_rwd_mediaqueries.asp Media queries] can now be used | ||
* Do not use <code>.sheet-new-window</code> as a CSS class name, as Roll20 already uses it and will block you from trying to override it. [https://app.roll20.net/forum/post/8618852/css-compiler-error-with-new-window-class/ Forum thread] | * Do not use <code>.sheet-new-window</code> as a CSS class name, as Roll20 already uses it and will block you from trying to override it. [https://app.roll20.net/forum/post/8618852/css-compiler-error-with-new-window-class/ Forum thread] | ||
| − | * Roll20 have some predefined CSS classes for | + | * Roll20 have some predefined CSS classes for its [[Designing_Character_Sheet_Layout#Roll20_columns.2Frows|custom row/column system]] and other default, so very generic class names like: <code>.sheet-row</code>, <code>.sheet-col</code>, <code>.sheet-3colrow</code>, <code>.sheet-2colrow</code>. |
| − | * <code>.sheet-character</code> is best to be avoided when naming your own CSS classes. If you use the predefined classes, you need to call them by their full name | + | * <code>.sheet-character</code> is best to be avoided when naming your own CSS classes. If you use the predefined classes, you need to call them by their full name in the HTML. |
* [[BCS/Repeating_Sections#Definition_.26_Restrictions|Repeating Sections Restrictions]] | * [[BCS/Repeating_Sections#Definition_.26_Restrictions|Repeating Sections Restrictions]] | ||
* '''Default Fonts:''' The following fonts can be accessed by default: <code>Arial</code>, <code>Patrick Hand</code>, <code>Contrail One</code>, <code>Shadows Into Light</code> and <code>Candal</code> | * '''Default Fonts:''' The following fonts can be accessed by default: <code>Arial</code>, <code>Patrick Hand</code>, <code>Contrail One</code>, <code>Shadows Into Light</code> and <code>Candal</code> | ||
** '''[[#Google Fonts|Google Fonts]]:''' can be used with the <code>@import</code>-function ['''Note:''' If you use <code>@import</code> with Google’s own generated URL, you may see the following error: <code>Potential CSS security violation; character sheet template styling thrown out.</code> To work around this issue, change <code>css2?family</code> to <code>css?family</code> in the URL (i.e., remove the “<code>2</code>”).] | ** '''[[#Google Fonts|Google Fonts]]:''' can be used with the <code>@import</code>-function ['''Note:''' If you use <code>@import</code> with Google’s own generated URL, you may see the following error: <code>Potential CSS security violation; character sheet template styling thrown out.</code> To work around this issue, change <code>css2?family</code> to <code>css?family</code> in the URL (i.e., remove the “<code>2</code>”).] | ||
* Enable use of [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id #id] in HTML elements | * Enable use of [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id #id] in HTML elements | ||
| − | * You can't refer to external CSS stylesheets | + | * You can't refer to external CSS stylesheets. Everything needs to be in the CSS file. |
===Legacy Sheet=== | ===Legacy Sheet=== | ||
| Line 48: | Line 53: | ||
See [[Legacy Sheet#Legacy Sheet Restrictions]] for details. | See [[Legacy Sheet#Legacy Sheet Restrictions]] for details. | ||
<noinclude> | <noinclude> | ||
| + | ===Repeating Sections=== | ||
| + | The [[Repeating Section]]s are a Roll20-specific design implemented inside <code><fieldset></code>-elements, and comes with their own challenges & quirks that interact with other of the sheet system, such as sheetworkers. | ||
| + | |||
| + | Details: '''[[Character_Sheet_Development/Repeating_Section#Definition_.26_Restrictions|Repeating Sections - Restrictions]]''' | ||
===Roll Templates=== | ===Roll Templates=== | ||
| − | Roll Templates are part of character sheets, but also functions somewhat disjoint, having it's own quirks. | + | [[Roll Templates]] are part of character sheets, but also functions somewhat disjoint, having it's own quirks. |
Details: '''[[Building_Character_Sheets/Roll_Templates#Restrictions|Roll Templates - Restrictions]]''' | Details: '''[[Building_Character_Sheets/Roll_Templates#Restrictions|Roll Templates - Restrictions]]''' | ||
| Line 67: | Line 76: | ||
==Tools== | ==Tools== | ||
| − | To truly test sheets, one needs to do so inside Roll20 using either available tool, and any try at offline/local testing will lack connection to Roll20's | + | To truly test sheets, one needs to do so inside Roll20 using either available tool, and any try at offline/local testing will lack connection to Roll20's back-end & the default CSS libraries/styling Roll20 has for character sheet elements. |
* [[Sheet Sandbox]] | * [[Sheet Sandbox]] | ||
* [[Sheet Editor]] | * [[Sheet Editor]] | ||
| + | * [[VS Code]]''(recommendation)'' | ||
==See Also== | ==See Also== | ||
Latest revision as of 17:36, 19 November 2023
 | Page Updated: 2023-11-19 |
 | This is related to Editing(coding) Character Sheets, which require Pro info to be able to use.Main Page: Building Character Sheets |
Main Page: Building Character Sheets
Restrictions in Roll20's Character Sheet Development-framework. Checking Character Sheet Development/Bugs & Quirks is also recommended.
Character Sheet Development
Getting Started
- Using Custom Sheets
- Building Sheets
(Main Page) - Glossary
- Code Restrictions
- Best Practice
- Common Mistakes
- Tutorials
- Examples, Templates
- Pattern Libraries
- HTML & storing data
- CSS & Styling
General
- Updates & Changelog
- Known Bugs
- Character Sheet Enhancement(CSE)
- Custom Roll Parsing
- Legacy Sheet(LCS)
- Beacon SDK
Reference
- Buttons
- Repeating Sections
- Sheetworkers
- Roll Templates
- sheet.json
- Translation
- Auto-Calc
- Advanced
- All SheetDev Pages
Tools & Tips
Git/GitHub 
Other
Generally speaking, character sheets are created with HTML, CSS, and JavaScript (for Sheetworkers), but there exist some constraints & security filtering that restricts what can be used, and where, in character sheet code.
Contents |
[edit] HTML & CSS
[edit] Security Filtering
- Using the word
evalanywhere in the sheet code will stop everything from working. Roll20 have put this as a security measure to prevent eval from used even in a roundabout way. You cant have attribute or class names that includes it.- Known list of forbidden words:
data:,eval,cookie,window,parent,this,behaviour,behavior,expression,moz-binding - this also prevent you from importing fonts that contain
evalas part of the name, like "MedievalSharp"
- Known list of forbidden words:
- All images will be passed through the Roll20 image proxy to prevent security attacks. This should be largely transparent to you and shouldn't affect anything, but it's something to be aware of. Images in Sheets
[edit] CSE
Character Sheet Enhancement is the new sheet code style that was released in March 2021. It has expanded features, is closer to baseline HTML/CSS, and is generally less restrictive compared to Legacy Sheets.
HTML:
In the Roll20, the character sheet code is basically wrapped inside a giant <form> tag(so don't use it).
- Most DOM functionalities can't be used.
- Do not use Root HTML elements such as
<html><head>,<title>, or<body>in your HTML. Doing so will prevent your character sheet from loading in the virtual tabletop.- HTML Elements that don't work:
<meter>,<progress>,link,video,iframe,meta,input type="color". Trying to add any of these to a sheet will either result in Roll20 removing them or behave like they are a<div>. - Restricted attributes examples:
autoplay,download,onclick
- HTML Elements that don't work:
- Elements that now work:
<datalist>,<details>,<summary>,<a href>,main,section - Enable use of #id in HTML elements, &
<a href=#> - Attribute names are case-insensitive when checked for uniqueness. All
<input>,<select>,<textarea>etc. should have unique attribute names if intended to be independent. Two inputs with same attr name will mirror each other and update if the other one is changed. - To create a section where you can dynamically add new entries, the Repeating Sections method is used through the
<fieldset>-element. -
<input>and<button>elements are restricted to a limited number of types. This is likely true with other elements. - All images will be passed through the Roll20 image proxy to prevent security attacks. This should be largely transparent to you and shouldn't affect anything, but it's something to be aware of. Images in Sheets
-
<svg>-element aren't supported directly, but they can be used if saved as separate.svgfiles: Example - All attributes in Roll Templates need to be written with double quotes, as single quotes results in roll template code being completely ignored.
- classes called in Roll Templates must use the
sheet-classnameformat, like is used with Legacy Sheet
- classes called in Roll Templates must use the
- If using the roll20-made rows & columns, need to prefix
sheet-to their use in the HTML(likely in the CSS also). - You cannot refer to external CSS stylesheets. Everything needs to be in the CSS file.
CSS:
- Certain(?) Media queries can now be used
- Do not use
.sheet-new-windowas a CSS class name, as Roll20 already uses it and will block you from trying to override it. Forum thread - Roll20 have some predefined CSS classes for its custom row/column system and other default, so very generic class names like:
.sheet-row,.sheet-col,.sheet-3colrow,.sheet-2colrow. -
.sheet-characteris best to be avoided when naming your own CSS classes. If you use the predefined classes, you need to call them by their full name in the HTML. - Repeating Sections Restrictions
- Default Fonts: The following fonts can be accessed by default:
Arial,Patrick Hand,Contrail One,Shadows Into LightandCandal- Google Fonts: can be used with the
@import-function [Note: If you use@importwith Google’s own generated URL, you may see the following error:Potential CSS security violation; character sheet template styling thrown out.To work around this issue, changecss2?familytocss?familyin the URL (i.e., remove the “2”).]
- Google Fonts: can be used with the
- Enable use of #id in HTML elements
- You can't refer to external CSS stylesheets. Everything needs to be in the CSS file.
[edit] Legacy Sheet
Legacy Sheet is the old sheet coding framework/method, which is more restrictive than CSE.
See Legacy Sheet#Legacy Sheet Restrictions for details.
[edit] Repeating Sections
The Repeating Sections are a Roll20-specific design implemented inside <fieldset>-elements, and comes with their own challenges & quirks that interact with other of the sheet system, such as sheetworkers.
Details: Repeating Sections - Restrictions
[edit] Roll Templates
Roll Templates are part of character sheets, but also functions somewhat disjoint, having it's own quirks.
Details: Roll Templates - Restrictions
[edit] Mobile
See Character Sheet Development/Mobile
[edit] Javascript
Main Section: Sheetworkers - Restrictions
Many JavaScript functions or functionalities can't be used within Roll20, are limited to the Sheetworker framework.
If you're attempting to do any slightly more advanced data-handling, check existing sheet for user-cases. There shouldn't be any differences between Legacy Sheet and CSE for sheetworkers.
[edit] Translation
See Character Sheet Translation for how internationalization of sheets work.
[edit] Tools
To truly test sheets, one needs to do so inside Roll20 using either available tool, and any try at offline/local testing will lack connection to Roll20's back-end & the default CSS libraries/styling Roll20 has for character sheet elements.
- Sheet Sandbox
- Sheet Editor
- VS Code(recommendation)
