Home
Games
Marketplace
Compendium Character Vault Roll20 for iPad and Android
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 "Legacy Sheet Sanitization"

From Roll20 Wiki

Jump to: navigation, search
(create page)
 
m (copy Legacy restrictions from main BCS page)
Line 2: Line 2:
 
{{NavSheetDoc}}
 
{{NavSheetDoc}}
 
{{stub}}
 
{{stub}}
−
'''Legacy Sheet Sanitization''' refers to the older and more restricted method used for creating custom character sheets.
+
'''Legacy Sheet Sanitization''' ('''LCS''') refers to the older and more restricted method used for creating custom character sheets that was the only mode for sheets until March 2021 when [[CSE]] was revealed.{{source|https://app.roll20.net/forum/permalink/9883156/}}
  
 
'''[[Character Sheet Enhancement]](CSE)''' is the new sheet creation method released March 2021, with new features and less restrictions than Legacy Sheets. Legacy Sheets are not compatible with CSE straight away, and need to be adjusted first. Check the [[CSE]] page for more info.
 
'''[[Character Sheet Enhancement]](CSE)''' is the new sheet creation method released March 2021, with new features and less restrictions than Legacy Sheets. Legacy Sheets are not compatible with CSE straight away, and need to be adjusted first. Check the [[CSE]] page for more info.
−
</noinclude>
+
__TOC__
 +
==Legacy Sheet Restrictions==</noinclude>
 +
'''HTML:'''
  
−
==Restrictions==
+
In the Roll20, the character sheet code is basically wrapped inside a giant <code><form></code> tag(so don't use it).
−
* [[Building_Character_Sheets#Legacy_Sheet]] -roll20-specific restrictions on how to make your sheet code.  
+
* [https://www.w3schools.com/tags/att_id.asp Id attributes] cannot be used. (Any  ID attributes on one character's sheet would affect another character's sheet in the same campaign when opened)
 +
* Any [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> which are used to  in your  HTML. Doing so will prevent your character sheet from loading in the virtual tabletop.
 +
* HTML Elements that doesn't work: <code><section></code>, <code><header></code>, <code><footer></code>, <code><a></code>, <code><meter></code>, <code><progress></code>, <code><datalist></code>, <code><details></code>, <code><summary></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>.
 +
* 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.
 +
* <code><input></code> and <code><button></code> elements are restricted to a limited number of types(listed later in the guide). This is likely true with other elements.
 +
* All CSS classes referenced in the HTML that don't start with <code>attr_</code>, <code>repeating_</code>, <code>roll_</code> or <code>sheet-</code>, will be prefixed with <code>sheet-</code> automatically when rendered in Roll20. The <code>sheet-</code> prefix is only required on the CSS file.
 +
* 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.
 +
* <code><svg></code>-tag isn't supported directly, but there are ways to use <code>.svg</code> files, [https://github.com/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.
 +
* You can't refer to external CSS stylesheets, everything need to be on the CSS file
 +
<br>
 +
 
 +
'''CSS:'''
 +
 
 +
* In the CSS file, all general classes should have a start with a <code>sheet-</code> prefix for Roll20 to read them.
 +
* [https://www.w3schools.com/css/css_rwd_mediaqueries.asp Media queries] can't currently be utilized
 +
* 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 it's [[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>3colrow</code>, <code>2colrow</code> and <code>.sheet-character</code> is best to be avoided.
 +
* [[Building_Character_Sheets#Repeating_Sections|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>
 +
* '''[[#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>”).]
 +
* You can't refer to external CSS stylesheets, everying need to be on the CSS file
 +
<br>
 +
 
 +
'''JavaScript:''' (''Main Article:'' '''[[Sheet_Worker_Scripts|Sheetworkers]]''')
 +
 
 +
Many JavaScript functions or functionalities can't be used within Roll20, and everything  and one should check existing sheet for user-cases, if you're attempting to do any slightly more advanced  data-handling.
 +
* See [[Sheet_Worker_Scripts#JavaScript_Restrictions|JavaScript Restrictions]] for more details
  
 +
==== Only Use Classes, not IDs  ====
 +
You should not use IDs on your tags (for example, DO NOT do <code><input type='text' id='name' /></code>). Since there are multiple copies of each sheet in the DOM at once, using an ID is incorrect since IDs should only be used on unique elements.
  
 +
This does mean that you cannot utilize ID-linked <code><label></code> elements (eg, <code><label for="my_id">My Label Text</label></code>). You can place elements inside the label to link them together (eg, <code><label>Label Text <input ... /></label></code>), although that can come at the expense of some flexibility in your CSS.
 +
<noinclude>
 +
==Related Pages==
 +
* [[Character Sheet Enhancement]] the improved version to LCS, with more features and less restrictions
 +
* [[Sheet Author Tips]] - misc advanced tips
 
<br>
 
<br>
 
<br>
 
<br>
−
[[Category:Character Sheet Creation]]
+
[[Category:Character Sheet Creation]]</noinclude>

Revision as of 17:31, 15 April 2021

Main Page: Building Character Sheets

Character Sheet Development
Getting Started

General

Reference

Tools & Tips

Git/GitHub Githublogo.png

Other

This article is a stub. You can help the Roll20 Community Wiki by expanding it.


Legacy Sheet Sanitization (LCS) refers to the older and more restricted method used for creating custom character sheets that was the only mode for sheets until March 2021 when CSE was revealed.
[1]

Character Sheet Enhancement(CSE) is the new sheet creation method released March 2021, with new features and less restrictions than Legacy Sheets. Legacy Sheets are not compatible with CSE straight away, and need to be adjusted first. Check the CSE page for more info.

Contents

Legacy Sheet Restrictions

HTML:

In the Roll20, the character sheet code is basically wrapped inside a giant <form> tag(so don't use it).

  • Id attributes cannot be used. (Any ID attributes on one character's sheet would affect another character's sheet in the same campaign when opened)
  • Any DOM functionalities can't be used
  • Do not use Root HTML elements such as <html> <head>, <title>, or <body> which are used to in your HTML. Doing so will prevent your character sheet from loading in the virtual tabletop.
  • HTML Elements that doesn't work: <section>, <header>, <footer>, <a>, <meter>, <progress>, <datalist>, <details>, <summary>. Trying to add any of these to a sheet will either result in Roll20 removing them or behave like they are a <div>.
  • 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(listed later in the guide). This is likely true with other elements.
  • All CSS classes referenced in the HTML that don't start with attr_, repeating_, roll_ or sheet-, will be prefixed with sheet- automatically when rendered in Roll20. The sheet- prefix is only required on the CSS file.
  • 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.
  • <svg>-tag isn't supported directly, but there are ways to use .svg files, Example
  • All attributes in Roll Templates need to be written with double quotes, as single quotes results in roll template code being completely ignored.
  • You can't refer to external CSS stylesheets, everything need to be on the CSS file


CSS:

  • In the CSS file, all general classes should have a start with a sheet- prefix for Roll20 to read them.
  • Media queries can't currently be utilized
  • Do not use .sheet-new-window as 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 it's custom row/column system and other default, so very generic class names like: .sheet-row, .sheet-col, 3colrow, 2colrow and .sheet-character is best to be avoided.
  • Repeating sections Restrictions
  • Default Fonts: The following fonts can be accessed by default: Arial, Patrick Hand, Contrail One, Shadows Into Light and Candal
  • Google Fonts: can be used with the @import-function [Note: If you use @import with 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, change css2?family to css?family in the URL (i.e., remove the “2”).]
  • You can't refer to external CSS stylesheets, everying need to be on the CSS file


JavaScript: (Main Article: Sheetworkers)

Many JavaScript functions or functionalities can't be used within Roll20, and everything and one should check existing sheet for user-cases, if you're attempting to do any slightly more advanced data-handling.

Only Use Classes, not IDs

You should not use IDs on your tags (for example, DO NOT do <input type='text' id='name' />). Since there are multiple copies of each sheet in the DOM at once, using an ID is incorrect since IDs should only be used on unique elements.

This does mean that you cannot utilize ID-linked <label> elements (eg, <label for="my_id">My Label Text</label>). You can place elements inside the label to link them together (eg, <label>Label Text <input ... /></label>), although that can come at the expense of some flexibility in your CSS.

Related Pages



Retrieved from "https://wiki.roll20.net/index.php?title=Legacy_Sheet_Sanitization&oldid=24507"