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
(How to update sheet to new)
m (Print-Friendly: move to new page)
 
(32 intermediate revisions by 6 users not shown)
Line 1: Line 1:
{{NavSheetDoc}}
+
{{Revdate}}{{BCS}}
{{main|Building Character Sheets}}
+
  
{{notebox| Update is live as of '''March 9th 2021''', see '''{{forum|permalink/9883156/ Character Sheet Enhancements!}}''' for more info }}
+
'''Character Sheet Enhancement'''('''CSE''')(or ''Enhanced Character Sheets(ECS)'') is an update to [[CS|character sheets]] and [[Building Character Sheets|how they are made]], enabling many new features for HTML & CSS, and removing some existing restrictions & quirks [[Sheet Author|sheet creators]] have had to deal with for HTML & CSS, when making sheets.
  
'''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.
+
See [[Legacy Sheet]](LCS) for info on the older system, which can still be used.
 +
{{NavSheetDoc}}
  
 
+
It was first released for testing on the [[Dev Server]] during February, and then released in March 2021. Last critical bugs where fixed by late April/early May, by which point it was seen as stable by the [[Sheet Author]] community.
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=
 
=Info=
* '''{{forum|permalink/9883156/ Character Sheet Enhancements!}}''' (March 9th Release)
+
* '''{{forum|permalink/9883156/ Character Sheet Enhancements!}}''' (Release - March 9th,2021)
 
* {{hc|articles/360061735034-iFrame-and-Sanitization-Changes iFrame-and-Sanitization-Changes}}
 
* {{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
 
* 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  
+
* {{forum|permalink/9750846/  CSE Beta(Dev Server)}} - Pro subforum tread  
  
 
==Features==
 
==Features==
 
A summary of what updates the sheet system will have.
 
A summary of what updates the sheet system will have.
  
* HTML updates:
+
* **HTML** updates:
 
** 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
 
** 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 <code>sheet-</code> to classes in CSS (apart from roll-templates)
 
** No pre-pending of <code>sheet-</code> to classes in CSS (apart from roll-templates)
Line 24: Line 23:
 
** 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 [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 – {{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)
 
** 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:
+
* **CSS** (sanitizer) updates, which now allows for:
 
** [https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries Media queries] that allow responsive design(like [[mobile]] support)
 
** [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 <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}}
 
** 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 [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations CSS Animations] – {{forum|post/9664083/charactersheets-fixing-animation-keyframes-and-allowing suggestion thread}}
 
** 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}}
 +
** You are no longer required to have <code>.sheet-</code> in front of CSS classes in your CSS-file.
 
* 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.
 +
 +
===Dev===
 +
New features that are in testing on [[Dev Server]] and not yet implemented:
 +
* {{fpl|10198129/ Now on Dev Server: Image Attributes}} - Jun 28
 +
* {{fpl|10260300/ jQuery for character sheets}} - July 21
 +
* {{fpl|10260308/ Roll Query Improvements - nesting}} - July 21
  
 
==Restrictions==
 
==Restrictions==
Line 40: Line 46:
 
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.
 
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==
+
=How to update sheet to new=
Here are some instructions of how to update a Legacy sheet to the new CSE environment.  
+
Here are some instructions of how to update a [[Legacy Sheet]] to the new CSE environment.  
====Moving to the new CSE environment====
+
===Using the CSE environment===
As of this writing, sheets on the repository were automatically updated to include in their <code>sheet.json</code> file a new line, <code>"legacy": true</code>.
+
To test CSE using the [[Sheet Sandbox]], you can empty the [[Sheet_Sandbox#Sheet.json_Editor|Sheet.json Editor]], or simply place  <code>{ "legacy": false }</code> there.
 +
 
 +
:::'''Note:''' <code>.json</code>-files use <code>,</code> to separate data pairs/rows, but there is never a <code>,</code> on the last row. See [[sheet.json]] for more.
 +
 
 +
To test CSE using the [[Sheet Editor]], simply uncheck the "Legacy Sheet Sanitation" checkbox.
 +
 
 +
Existing sheets in the {{repo|Roll20/roll20-character-sheets repository}} were automatically updated to include in their [[sheet.json]] the line <code>"legacy": true</code>, and any sheet updated to use CSE should have that changed to <code>"legacy": false</code>.
 +
 
 +
If you use a sheet from the sheet drop-down menu, it will automatically use the correct mode.
 +
 
 +
===Removal of the "sheet-" Prepending===
 +
The most disruptive issue to moving from [[Legacy Sheet]] to CSE, is that the new CSS sanitizer does not automatically prepend <code>sheet-</code> to classes in the HTML code. 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.
 +
 
 +
While this will free up [[Sheet Author|sheet authors]] to name their classes however they wish, and make it so the class-names match both on the HTML & CSS, it will break your sheet styling if you were writing classnames without the <code>sheet-</code> in your html.  
  
If you'd like to use the new environment, you can simply delete this line. It is not necessary to set it as false. Also remember to remove the <code>,</code> on the line above the change in the <code>sheet.json</code> to ensure it loads.
+
This lead to two strategies on how to adjust existing sheets:
  
====Removal of the "sheet-" Prepending====
+
===='''Option 1:''' Remove <code>sheet-</code> from CSS rules====
The most disruptive issue to moving from Legacy to CSE is that the new CSS sanitizer does not automatically prepend <code>sheet-</code> to classes in the HTML code. 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.  
+
This is the preferred direction. You go through the CSS-file, search and remove <code>sheet-</code> from CSS rules targeting the the sheet itself, so that they naturally match your HTML classes.
  
While this will free up sheet authors to name their classes however they wish, this will break your sheet styling if you were allowing the sanitizer to prepend <code>sheet-</code> in your html. This can lead to two strategies.
+
* [[BCS/Rolltemplates|Rolltemplate]] references in the css & html still have to follow the <code>.sheet-rolltemplate-example</code> and the <code><rolltemplate class="sheet-rolltemplate-example"> </rolltemplate></code> format.
 +
* If you're using the [[Designing_Character_Sheet_Layout#Roll20_columns.2Frows|roll20-made rows & columns]] in your sheets, you now need to prefix <code>sheet-</code> to their use in the HTML(likely in the CSS also).
  
====='''Option 1:''' Remove <code>sheet-</code> from CSS rules=====
 
This is the preferred direction. You are simply going through your CSS and removing <code>.sheet-</code> from your CSS rules so that they naturally match your HTML classes.
 
 
{| class="wikitable"
 
{| class="wikitable"
 
|+ Example of CSS
 
|+ Example of CSS
Line 68: Line 86:
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
|'''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.  
+
|'''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, like in Option 2.
 
|}
 
|}
====='''Option 2:''' Mimic the legacy sanitizer=====
+
 
 +
===='''Option 2:''' Mimic the legacy sanitizer====
 
If your sheet explicitly calls for classes that include <code>sheet-</code> in the HTML where your HTML looks more like:
 
If your sheet explicitly calls for classes that include <code>sheet-</code> in the HTML where your HTML looks more like:
 
<pre data-language="html">
 
<pre data-language="html">
 
<div class="sheet-character_biography">
 
<div class="sheet-character_biography">
 
</pre>
 
</pre>
Then removing the legacy line likely didn't break your sheet all that badly. You are certainly free to continue including <code>sheet-</code> in your declared classes. The overall goal here is that the classes in your HTML must match the classes in your CSS.
+
Then removing the legacy line likely didn't break your sheet all that badly. You can continue prefixing <code>sheet-</code> when you declared classes, but it becomes extra work. The overall goal here is that the classes in your HTML must match the classes in your CSS.
  
====CSS Specificity====
+
===CSS Specificity===
One issue that is currently bugging some sheets is that in addition to removing the <code>sheet-</code> prepend, the sanitizer no longer adds an extra <code>.charsheet</code> 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 <code>.charsheet</code> class to your selector.  
+
One issue that is currently bugging some sheets is that in addition to removing the <code>sheet-</code> prepend, the sanitizer no longer adds an extra <code>.charsheet</code> 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, compared to the previous environment. If you find some styling to basic elements, namely the headline elements (<code><nowiki><h1></nowiki></code>,<code><nowiki><h2></nowiki></code>, <code><nowiki><h3></nowiki></code>, etc) and <code><nowiki><label></nowiki></code> elements, to be missing, try manually adding in the <code>.charsheet</code> class to your selector.  
 
{| class="wikitable"
 
{| class="wikitable"
 
|+ Example of CSS
 
|+ Example of CSS
Line 87: Line 106:
 
|}
 
|}
  
It is my personal advice to wrap your character sheet in something like <code><main></main></code> to give yourself a bit more control and having a frame to inject your basic formatting.
 
 
* {{hc|articles/360061735034-iFrame-and-Sanitization-Changes iFrame-and-Sanitization-Changes}}
 
* {{hc|articles/360061735034-iFrame-and-Sanitization-Changes iFrame-and-Sanitization-Changes}}
  
 
=CSE Examples=
 
=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.
+
Collection of examples, user-cases or links to info of some of the new features. Please help expand with code or links to examples/documentation.
 
==ID==
 
==ID==
 
Examples of using the HTML global element [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id #id].
 
Examples of using the HTML global element [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id #id].
  
An id name cannot start with a number.
+
An ID name cannot start with a number.
 +
 
 +
If multiple people look at the same character sheet, and one person clicks on a ID-anchor, the change is only shown to the person, and not to everyone.
 +
* Contrast this to the [[CSS_Wizardry#Tabs|attribute-backed Tabs]]-method of splitting sheets onto multiple pages, where everyone viewing the sheet at the same time end up looking at the same page, due to an attribute keeping track of which page is being viewed.
 +
 
 
===id CSS selector===
 
===id CSS selector===
 
Use an id to select one unique element.
 
Use an id to select one unique element.
Line 131: Line 153:
 
===id Sheet Anchors===
 
===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.
 
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;">
+
<pre data-language="html">
 
//html
 
//html
 
<h2>Sheet Anchor example</h2>
 
<h2>Sheet Anchor example</h2>
Line 154: Line 176:
 
</pre>
 
</pre>
  
==Datalist==
+
===Popup===
{{forum|post/9624869/html5-datalist-for-character-sheets suggestion thread}}
+
code snippet by Roll20 Dev exemplifying how popups can be implemented on CSE sheets.
 
+
"[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" style="overflow:auto;">
+
<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>
+
</pre>
+
 
+
==<details>==
+
A more simple way to create a collapsible section on a sheet than the old [[CSS]] tricks we have.
+
 
+
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" style="overflow:auto;white-space:pre-wrap;">
+
<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>
+
</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
+
 
+
 
+
Roll20 applies some default styling that hides the normal open/closed arrow/triangle for <code><details></code>. set it to <code>display:inline-items;</code> or <code>display:revert;</code> to make it show again
+
* {{fpl|10027218/ first observed}}
+
 
+
==Accessibility==
+
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:
+
https://codepen.io/imprakash/pen/GgNMXO
* 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==
+
A brief explanation of the code:
code snippet by Roll20 Dev exemplifying how popups can be implemented on CSE sheets.
+
* An <code><a></code> link that is styled as a button is targeting the id "popup1".
 +
* The popup wrapper div with the class 'overlay' and the ID of 'popup1' is hidden with <code>visibility: hidden</code>.
 +
* On the CSS side, when the div with <code>.overlay</code> is the current target of a <code><a></code> tag, it sets the visibility to 1 (visible).
 +
* The pop-up box includes a "X to close" <code><a></code> tag styled as a basic button to relink to "#", the pound symbol is basically a non-link fragment and defaults to the behavior of targeting to the top of the current page. Which untargets <code>Overlay</code> and returns visibility to hidden.
  
https://codepen.io/imprakash/pen/GgNMXO
 
  
 
<pre data-language="html" style="overflow:auto;">
 
<pre data-language="html" style="overflow:auto;">
Line 400: Line 277:
 
   overflow: auto;
 
   overflow: auto;
 
}
 
}
 +
</pre>
 +
 +
==Datalist==
 +
{{forum|post/9624869/html5-datalist-for-character-sheets suggestion thread}}
 +
 +
"[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" style="overflow:auto;">
 +
<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>
 +
</pre>
 +
 +
If you want to switch datalists for an input, you can create several inputs and then [[CSS_Wizardry#Show.2FHide_Areas|toggle which input is visible]], changing the options shown from the datalists.
 +
 +
<pre data-language="html" style="overflow:auto;">
 +
<input type="text" list="classmage" name="attr_class" class="mage-skill">
 +
<input type="text" list="classfighter" name="attr_class" class="fighter-skill">
 +
<datalist id="classmage">
 +
    <option value="Spellcraft">Spellcraft</option>
 +
    <option value="Arithmancy">Arithmancy</option>
 +
</datalist>
 +
<datalist id="classfighter">
 +
    <option value="Brawl">Brawl</option>
 +
    <option value="Weapon Mastery">Weapon Mastery</option>
 +
</datalist>
 +
</pre>
 +
 +
There seems to be an issue with translation of datalists as the value of the option is entered as the value of the input which links to the list. The  ARC sheet https://github.com/Roll20/roll20-character-sheets/tree/master/ARC has a workaround with a sheet worker that replaces the value with the translated text.
 +
 +
<pre data-language="html" style="overflow:auto;">
 +
  on("change:repeating_inventory:name", (eventInfo) => {
 +
    const id = eventInfo.sourceAttribute.split("_")[2];
 +
    const updateAttrs = {};
 +
    const name = eventInfo.newValue.trim();
 +
    let translation = getTranslationByKey(name)
 +
    if (translation) {
 +
      updateAttrs[`repeating_inventory_${id}_name`] = translation;
 +
 
 +
      const searchInputs = _.difference(GLOBAL__INVENTORY_INPUTS, ["name"]);
 +
      _.each(searchInputs, (key) => {
 +
        const attr = `repeating_inventory_${id}_${key}`;
 +
        const i18n = `${name}_${key}`;
 +
 
 +
        // check if property exists in global
 +
        if (GLOBAL__INVENTORY[name][key]) {
 +
          updateAttrs[attr] = GLOBAL__INVENTORY[name][key];
 +
        }
 +
        // check if translation exists
 +
        else if (getTranslationByKey(i18n)) {
 +
          updateAttrs[attr] = getTranslationByKey(i18n);
 +
        }
 +
      });
 +
 
 +
      log(updateAttrs)
 +
      setAttrs(updateAttrs, { silent: true });
 +
    }
 +
  });
 +
</pre>
 +
 +
==<details>==
 +
A more simple way to create a collapsible section on a sheet than the old [[CSS]] tricks we have.
 +
 +
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" style="overflow:auto;white-space:pre-wrap;">
 +
<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>
 +
</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
 +
 +
* {{fpl|10613206/ Repeating Section - Skill Openable Menu Help}} example implementation
  
@media screen and (max-width: 700px){
+
Roll20 applies some default styling that hides the normal open/closed arrow/triangle for <code><details></code>. Set the display CSS property of the summary tag to <code>list-item</code> or <code>revert</code> to make it show again. E.G.:
  .box{
+
<pre data-language="CSS" style="overflow:auto;white-space:pre-wrap;">
    width: 70%;
+
summary{
  }
+
  display:list-item;
  .popup{
+
    width: 70%;
+
  }
+
 
}
 
}
 
</pre>
 
</pre>
  
==Make sheet Print-Friendly==
+
* {{fpl|10027218/ first observed}}
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
+
==Accessibility==
 +
Accessibility enhancements: [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute ARIA]
  
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.
+
* 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
  
List of things that can make sheets printer - friendly:
+
===Semantic Elements===
* remove all "redundant" images, except logo.  (minimize ink use)
+
''"[https://www.w3schools.com/html/html5_semantic_elements.asp Semantic Elements] clearly describes its meaning to both the browser and the developer."''
* remove roll buttons
+
* [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines Using HTML sections and outlines]
* 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.
+
  
 +
 +
They work identically to <code><nowiki><div></nowiki></code>, but describes what they represent in the code. Using some Semantic Elements can make the code more readable and more easily distinguing what closing element goes where.
 +
 +
Using <code><nowiki><main></nowiki></code> is more simple than <code><nowiki><div class="main"></nowiki></code>.
 +
 +
{{ex}}
 +
<pre data-language="html" style="overflow:auto;white-space:pre-wrap;">
 +
<main>
 +
  <header>
 +
    <label>Character name: <input name="attr_character_name" type="text" value=""></label>
 +
    <label>Background: <input name="attr_background" type="text" value=""></label>
 +
  </header>
 +
  <section>
 +
    <h3>Attributes</h3>
 +
    <label>Strength: <input name="attr_str" type="number" value=""></label>
 +
    <label>Dexterity: <input name="attr_dex" type="number" value=""></label>
 +
    <label>Mind: <input name="attr_mind" type="number" value=""></label>
 +
  </section>
 +
  <section>
 +
    <label>Equipment</label>
 +
    <textarea name="attr_equipment"><textarea>
 +
    <label>Notes</label>
 +
    <textarea name="attr_notes"><textarea>
 +
  </section>
 +
  <footer>
 +
    <span> For any issues with the sheet, post on the Char Sheet forums:(https://app.roll20.net/forum/category/277980), or contact John Doe.</span>
 +
  </footer>
 +
<main>
 +
</pre>
 +
 +
==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 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]
 +
** works on desktop, doesn't seem to work on mobile''(Oct 2021 [[Andreas J.]] )''
 +
 +
===Mobile===
 +
{{main|BCS/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).
 +
 +
<pre data-language="css" style="overflow:auto;white-space:pre-wrap;">
 +
@media only screen and (max-width: 480px) {
 +
// css that only affects sheet on mobile. Play around with "max-width" value, might differ between phones
 +
}
 +
</pre>
 +
 +
===Print-Friendly===
 +
 +
See [[Character Sheet Development/Print-Friendly]]
 +
 +
==Edit Navbar==
 +
 +
 +
We now have limited access to style the "Bio", "Character Sheet", & the "A&A"-tab.
 +
 +
This following css will keep the navbar at the top, so no need to scroll to change tabs. (by [[Scott C.]]
 +
<pre>
 +
ul.nav-tabs.nav{
 +
    position:sticky;
 +
    top:0;
 +
    background-color:white;
 +
    z-index:9999;
 +
}</pre>
 +
 +
Replace the "character sheet" text with the game's logo(by Scott)
 +
<pre>.characterviewer > ul.nav-tabs a[data-tab="charsheet"]{
 +
    background:{
 +
        image:url('https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pathfinder%2520Community/Images/pf_logo.png');
 +
        size:contain;
 +
        position:center;
 +
        repeat:no-repeat;
 +
    }
 +
    color:transparent;
 +
}</pre>
 
=Sheets Using CSE=
 
=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.
+
List of char sheets that have been updated to at least work normally with CSE, if not adopted to use some of the new features.
 
* {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Hammerheads CortexPrime-Hammerheads}} - Mobile-adaption
 
* {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Hammerheads CortexPrime-Hammerheads}} - Mobile-adaption
 
* [[Mythic D6]] - {{repo|Roll20/roll20-character-sheets/tree/master/MythicD6 Mythic D6 sourcecode}} - datalist, details/summary • by [[Andreas J.]]
 
* [[Mythic D6]] - {{repo|Roll20/roll20-character-sheets/tree/master/MythicD6 Mythic D6 sourcecode}} - datalist, details/summary • by [[Andreas J.]]
Line 442: Line 468:
 
* {{repo|Roll20/roll20-character-sheets/tree/master/Barbaric Barbaric!}} datalist • by [[Andreas J.]]
 
* {{repo|Roll20/roll20-character-sheets/tree/master/Barbaric Barbaric!}} datalist • by [[Andreas J.]]
 
* [[ADnD 2nd Edition Character sheet|AD&D 2E]] - datalists, lots of datalists • by [[Peter B.]]
 
* [[ADnD 2nd Edition Character sheet|AD&D 2E]] - datalists, lots of datalists • by [[Peter B.]]
 +
* [[Stargate]] • by [[Andreas J.]]
 +
* [[Pathfinder Community Sheet]]
  
 
=Changelog=
 
=Changelog=
* April 30th - the css @import bug was fixed {{fpl|10027516/ source}}  
+
* April 30th - the css <code>@import</code> bug was fixed {{fpl|10027516/ source}}  
  
 
=See Also=
 
=See Also=
 
* {{hc|articles/360061735034-iFrame-and-Sanitization-Changes iFrame-and-Sanitization-Changes}}
 
* {{hc|articles/360061735034-iFrame-and-Sanitization-Changes iFrame-and-Sanitization-Changes}}
* [[BCS/Weird]] - recent issues with CSE and sheet development
+
* [[BCS/Bugs]] - known bugs & issues with char sheet development
 
* [[Mobile]] - the app will eventually fully support mobile versions for any sheets, currently it's reliable only for the [[D&D 5E by Roll20]] sheet.   
 
* [[Mobile]] - the app will eventually fully support mobile versions for any sheets, currently it's reliable only for the [[D&D 5E by Roll20]] sheet.   
<br>
+
** [[BCS/Mobile]] - building char sheets with the mobile app in mind
<br>
+
 
 
[[Category:Character Sheet Creation]]
 
[[Category:Character Sheet Creation]]
 +
[[Category:New features in 2021]]

Latest revision as of 13:49, 11 March 2023

Character Sheet Enhancement(CSE)(or Enhanced Character Sheets(ECS)) is an update to character sheets and how they are made, enabling many new features for HTML & CSS, and removing some existing restrictions & quirks sheet creators have had to deal with for HTML & CSS, when making sheets.

See Legacy Sheet(LCS) for info on the older system, which can still be used.


It was first released for testing on the Dev Server during February, and then released in March 2021. Last critical bugs where fixed by late April/early May, by which point it was seen as stable by the Sheet Author community.

Contents

[edit] Info

[edit] 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 datalistssuggestion thread(Forum)
    • Allowing the usage of HTML <details> and <summary>-elements – suggestion thread(Forum) (part of semantic HTML support)
  • **CSS** (sanitizer) updates, 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 Animationssuggestion thread(Forum)
    • You are no longer required to have .sheet- in front of CSS classes in your CSS-file.
  • 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.

[edit] Dev

New features that are in testing on Dev Server and not yet implemented:

[edit] Restrictions

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

CSE Code Restrictions


[edit] 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.

[edit] How to update sheet to new

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

[edit] Using the CSE environment

To test CSE using the Sheet Sandbox, you can empty the Sheet.json Editor, or simply place { "legacy": false } there.

Note: .json-files use , to separate data pairs/rows, but there is never a , on the last row. See sheet.json for more.

To test CSE using the Sheet Editor, simply uncheck the "Legacy Sheet Sanitation" checkbox.

Existing sheets in the repository were automatically updated to include in their sheet.json the line "legacy": true, and any sheet updated to use CSE should have that changed to "legacy": false.

If you use a sheet from the sheet drop-down menu, it will automatically use the correct mode.

[edit] Removal of the "sheet-" Prepending

The most disruptive issue to moving from Legacy Sheet to CSE, is that the new CSS sanitizer does not automatically prepend sheet- to classes in the HTML code. 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.

While this will free up sheet authors to name their classes however they wish, and make it so the class-names match both on the HTML & CSS, it will break your sheet styling if you were writing classnames without the sheet- in your html.

This lead to two strategies on how to adjust existing sheets:

[edit] Option 1: Remove sheet- from CSS rules

This is the preferred direction. You go through the CSS-file, search and remove sheet- from CSS rules targeting the the sheet itself, so that they naturally match your HTML classes.

  • Rolltemplate references in the css & html still have to follow the .sheet-rolltemplate-example and the <rolltemplate class="sheet-rolltemplate-example"> </rolltemplate> format.
  • If you're using the roll20-made rows & columns in your sheets, you now need to prefix sheet- to their use in the HTML(likely in the CSS also).
Example of CSS
Old Class New Class
.sheet-character_biography .character_biography

This direction is particularly helpful when your HTML is already using the "natural" name for your classes or if your HTML looks similar to this:

<div class="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, like in Option 2.

[edit] Option 2: Mimic the legacy sanitizer

If your sheet explicitly calls for classes that include sheet- in the HTML where your HTML looks more like:

<div class="sheet-character_biography">

Then removing the legacy line likely didn't break your sheet all that badly. You can continue prefixing sheet- when you declared classes, but it becomes extra work. The overall goal here is that the classes in your HTML must match the classes in your CSS.

[edit] 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, compared to the previous environment. If you find some styling to basic elements, namely the headline elements (<h1>,<h2>, <h3>, etc) and <label> elements, 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;}

[edit] CSE Examples

Collection of examples, user-cases or links to info of some of the new features. Please help expand with code or links to examples/documentation.

[edit] ID

Examples of using the HTML global element #id.

An ID name cannot start with a number.

If multiple people look at the same character sheet, and one person clicks on a ID-anchor, the change is only shown to the person, and not to everyone.

  • Contrast this to the attribute-backed Tabs-method of splitting sheets onto multiple pages, where everyone viewing the sheet at the same time end up looking at the same page, due to an attribute keeping track of which page is being viewed.

[edit] 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;
}

[edit] 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;
}

[edit] 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 -->

[edit] Popup

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

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

A brief explanation of the code:

  • An <a> link that is styled as a button is targeting the id "popup1".
  • The popup wrapper div with the class 'overlay' and the ID of 'popup1' is hidden with visibility: hidden.
  • On the CSS side, when the div with .overlay is the current target of a <a> tag, it sets the visibility to 1 (visible).
  • The pop-up box includes a "X to close" <a> tag styled as a basic button to relink to "#", the pound symbol is basically a non-link fragment and defaults to the behavior of targeting to the top of the current page. Which untargets Overlay and returns visibility to hidden.


<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;
}

[edit] 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>

If you want to switch datalists for an input, you can create several inputs and then toggle which input is visible, changing the options shown from the datalists.

<input type="text" list="classmage" name="attr_class" class="mage-skill">
<input type="text" list="classfighter" name="attr_class" class="fighter-skill">
<datalist id="classmage">
    <option value="Spellcraft">Spellcraft</option>
    <option value="Arithmancy">Arithmancy</option>
</datalist>
<datalist id="classfighter">
    <option value="Brawl">Brawl</option>
    <option value="Weapon Mastery">Weapon Mastery</option>
</datalist>

There seems to be an issue with translation of datalists as the value of the option is entered as the value of the input which links to the list. The ARC sheet https://github.com/Roll20/roll20-character-sheets/tree/master/ARC has a workaround with a sheet worker that replaces the value with the translated text.

  on("change:repeating_inventory:name", (eventInfo) => {
    const id = eventInfo.sourceAttribute.split("_")[2];
    const updateAttrs = {};
    const name = eventInfo.newValue.trim();
    let translation = getTranslationByKey(name)
    if (translation) {
      updateAttrs[`repeating_inventory_${id}_name`] = translation;
  
      const searchInputs = _.difference(GLOBAL__INVENTORY_INPUTS, ["name"]);
      _.each(searchInputs, (key) => {
        const attr = `repeating_inventory_${id}_${key}`;
        const i18n = `${name}_${key}`;
  
        // check if property exists in global
        if (GLOBAL__INVENTORY[name][key]) {
          updateAttrs[attr] = GLOBAL__INVENTORY[name][key];
        }
        // check if translation exists
        else if (getTranslationByKey(i18n)) {
          updateAttrs[attr] = getTranslationByKey(i18n);
        }
      });
  
      log(updateAttrs)
      setAttrs(updateAttrs, { silent: true });
    }
  });

[edit] <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>

Roll20 applies some default styling that hides the normal open/closed arrow/triangle for <details>. Set the display CSS property of the summary tag to list-item or revert to make it show again. E.G.:

summary{
  display:list-item;
}

[edit] Accessibility

Accessibility enhancements: ARIA

[edit] Semantic Elements

"Semantic Elements clearly describes its meaning to both the browser and the developer."


They work identically to <div>, but describes what they represent in the code. Using some Semantic Elements can make the code more readable and more easily distinguing what closing element goes where.

Using <main> is more simple than <div class="main">.


Example:

<main>
  <header>
     <label>Character name: <input name="attr_character_name" type="text" value=""></label>
     <label>Background: <input name="attr_background" type="text" value=""></label>
  </header>
  <section>
    <h3>Attributes</h3>
    <label>Strength: <input name="attr_str" type="number" value=""></label>
    <label>Dexterity: <input name="attr_dex" type="number" value=""></label>
    <label>Mind: <input name="attr_mind" type="number" value=""></label>
  </section>
  <section>
    <label>Equipment</label>
    <textarea name="attr_equipment"><textarea>
    <label>Notes</label>
    <textarea name="attr_notes"><textarea>
  </section>
  <footer>
    <span> For any issues with the sheet, post on the Char Sheet forums:(https://app.roll20.net/forum/category/277980), or contact John Doe.</span>
  </footer>
<main>

[edit] Responsive Design

Aimed at making adjustment for mobile

[edit] Mobile

Main Page: BCS/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).

@media only screen and (max-width: 480px) {
// css that only affects sheet on mobile. Play around with "max-width" value, might differ between phones
}

[edit] Print-Friendly

See Character Sheet Development/Print-Friendly

[edit] Edit Navbar

We now have limited access to style the "Bio", "Character Sheet", & the "A&A"-tab.

This following css will keep the navbar at the top, so no need to scroll to change tabs. (by Scott C.

ul.nav-tabs.nav{
    position:sticky;
    top:0;
    background-color:white;
    z-index:9999;
}

Replace the "character sheet" text with the game's logo(by Scott)

.characterviewer > ul.nav-tabs a[data-tab="charsheet"]{
    background:{
        image:url('https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pathfinder%2520Community/Images/pf_logo.png');
        size:contain;
        position:center;
        repeat:no-repeat;
    }
    color:transparent;
}

[edit] Sheets Using CSE

List of char sheets that have been updated to at least work normally with CSE, if not adopted to use some of the new features.

[edit] Changelog

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

[edit] See Also