Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×

[Script] Handout Formatter - Style Sheets for Roll20 Handouts

1789501448

Edited 1789501559
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Handout Formatter - Style Sheets for Roll20 Handouts Available in One-Click Install | Video Demo Handout Formatter is a Mod Script that takes the plain text you've already written and formatted in a handout's Notes or GM Notes and dresses it up to look like a real prop from your game world — an old letter, a wanted poster, a torn journal page, whatever fits the scene. You can also use it to match your game system's theme instead of looking like plain, unstyled text. Your original writing is never touched — the styling sits on top of it, and can be swapped or removed again at any time. As an added bonus, "Remove Styling" doesn't just strip the applied style — it also cleans up HTML cruft left behind by other programs (like Microsoft Word) and fixes a handful of Roll20 text-editor quirks, like oversized quote blcks or header styles that won't let go. A few things people might use it for: A handwritten letter or diary page for a journal-keeping character A page from an old book A wanted poster, tavern notice, or other in-world prop Giving every handout in a game — not just one — the same consistent, system-appropriate look. It ships with a 5e style, and has instructions on how to pick up a PF2 style. Cleaning up text pasted from outside sources Style hadouts can be transmogrified, or the style itself can be shared as a text file — the file has a link to at least ten more styles. How it works Type !formathandout to open the control panel: pick a handout, pick a style, preview it, click Apply. It's all click driven from a master control handout. Four styles ship built in (Parchment, 5e, Book, Computer), and I have a library of ready-made extras — a carved stone monument, a wanted poster, a redacted classified memo, an unrolled magic scroll, and more. Each style just plain CSS you paste into a handout. Writing your own style is the same: no scripting involved, just CSS in a handout's Notes field. If you are new to CSS, here is a link to Codecademy's free course . It covers everything you'd need for this. Hopefully if this script gains traction, users can share styles they've created in this thread. If so, I can include them in the online style repository. If a styled handout's Notes get manually edited afterward (like you add a section, using Roll20's built in text editor), the panel flags it as out of sync and can re-apply the style in one click, so styling and your own edits don't fight each other. Handout Formatter pairs well with Image Editor if you also want images placed and captioned inside the same handouts. If you have Image Editor installed, a button for it will appear in the interface. Changes made with Image Editor are respected by Handout Formatter. Install One-Click API install — search "Handout Formatter" in your game's API Scripts page. Full docs, the built-in help handout (!formathandout --help), and the style library are all included. Feedback and style sharing welcome! This script was released earlier on my Patreon
1789501729

Edited 1789501801
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
There are a bunch of extra styles available here . If you come up with cool styles of your own, feel free to post them here and I will make them available in the library.
I will certainly be checking this out!
Oh, my. This sounds really cool.  I've been using a very old markdown script (by Steven S.) for my handouts, which you did a parchment-type style sheet for. This sounds much more flexible. I'm going to have to give this a spin!
1789779198

Edited 1789788543
Seb
Pro
This is brilliant, as usual. Thanks for this contribution. Can we use google fonts in the CSS? (Just started learning CSS to make use of this mod)
1789796900
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
HI Seb! Thanks! You can use any font in your system, but unless the viewer also has it installed on their system, they will see a fallback font. I tried to limit myself to fonts that are either in the VTT (the ones you see in the text label object), or you can Google "web safe fonts" for ones that come pre-installed on most operating systems. When you are designing CSS rules, you can specify which fonts to use in order of preference, and use a descriptor to fall back on. Example: font-family: Futura, Arial, sans-serif; If the OS has Futura, it will use that, if not, nearly everyone on earth has Arial, and for those rare cases that don't, it will default to the font the system or browser has defined as their fallback sans-serif font. I do not think that you can embed Google fonts in the VTT sandbox. It cannot see the Internet at large. And yeah, I learned CSS, HTML, and JavaScript all as a result of wanting to use them in RPGs. I even learned BASIC for the same reason, back in the Stone Age of computing.