- Guide to CSS – Styling a Character Sheet
- HTML – The Building Blocks
- Guide to the Guide
- Sheet Workers – Automating The Sheet
This is the first part of the Roll20 Sheet Author Guide. See the Site Introduction for the overall plan.
This chapter is a reference guide to using HTML in character sheet design. Covering the entirety of HTML is way too big of a task – there are whole websites devoted to that. Instead, this guide gives you the specific information you need to do the HTML part of a Roll20 character sheet.
The HTML Guide
This section of the Guide could be huge, so it is broken up into several posts:
- Headings and Line BreaksLearn how to create the simplest HTML elements, and discover the basic structure of all HTML elements.
- Inputs and AttributesThe best way to create attributes in Roll20 sheets is to use Inputs. Learn how to make them here.
- Displaying Text – span & textareaHow to display text on a character sheet – spans, paragraphs, and textareas.
- Containers – div, section, detailsAn introduction to Containers, including the ever-present DIV.
- Choosing from a List – select, datalistWhen you want to present the player with a list of options, use a select or datalist.
- Conditional Inputs – checkboxes, radios, labelsWhat are checkboxes and radio buttons? What are labels for? Find out here.
- Using Buttons to Make RollsAdd rolls and macros to the character sheet, that work with just a click!
- HTML ImagesImages make a sheet prettier and nicer to use. Here’s one way to add them to your sheets.
- HTML FundamentalsThe previous pages cover HTML Elements. This is a grab-bag of everything else.
- Character Sheet – HTML ExampleAn example of building a roll20 Character Sheet for Castle Falkenstein
Together these posts make up everything you need to make a functional sheet. It won’t be pretty – for that, you’ll need CSS.
Other HTML Posts
While HTML is pretty self-contained, I may add extra posts relating to HTML in the future. You’ll find them here (or through the navigation bar at the top of every page).
- Buttons that Create Other ButtonsHow to create attack rolls that include a damage button, and similar buttons.
- Things You Might Not Know About The Disabled AttributeThe disabled attribute crops up in a lot of HTML elements – let’s learn more about it.
More About HTML
Character Sheet Enhancement
If you are not using the Character Sheet Enhancement (added to Roll20 in 2021), then datalist and details won’t work. Everything else should work fine.
Missing Elements
The eagle-eyed reader already familiar with HTML might notice one element absent from the list. TABLE is a very seductive element for people new to HTML because of how easy it is to use to create layouts. Resist that temptation!
There is no gentle way to say this: do not use TABLE for sheet layouts.
Aside from good coding practices, the most important reason for you and me is that Roll20 summarily rejects all sheets using TABLE for layout.
So there is no good reason to ever use it. As it happens, there are simpler ways to lay out a sheet, so you don’t need it.
There’s another missing element: lists. I’ve never actually used lists in a character sheet, and this series is about essential items. But there are some clever things you can do with lists, so I’ll add a post covering them at some point. And there may be more posts about different ways of using the existing elements.
Summary
The chapters of this guide will teach you about all the HTML Elements you need on Roll20, like div, input, and span, and how many have attributes, like name, value, and type.
You’ll learn how many elements can be used as containers, most often divs and labels. And how some elements – like inputs, selects, and textareas – are often used to store values, and how the name of such elements must begin with attr_.
You can create and launch your own macros which use roll buttons, which must have type=”roll” and a name that starts with roll_.
With these simple elements, you can construct the basics of a character sheet. It won’t look very attractive (that’s what next month’s chapter on CSS is for), but it handles the function of the sheet.
Finally, there is an example character sheet: Castle Falkenstein Design – 1 HTML, which shows a worked example of a simple character sheet where you can see all many of these elements put into practice.
