[Script] Markdown Handouts and Bios

Here's what I'm doing so far with my hr's --- produces blank space *** produces the maroon colored dart used in statblocks ___ produces a burnt yellow line like you see under h3 (###) headings. This is very much a work in progress though. 5e doesn't use a lot of horizontal rules, so I'm not sure of the best use. Blank space can already be simulate by typing a tab or four spaces on their own line, so that will probably be the first to get the ax. hr.style2 (***) is pretty solid, though. h3, again, that element is never used on its own. I'm open to ideas for h1 and h2.

Thanks for the HR inclusions! That looks great! I've been working on a Pathfinder 2e version. Luckily, Paizo uses MUCH simpler formatting than D&amp;D 5e. The style (which I copied off Keith and edited):&nbsp; bg&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;padding: 30px; &nbsp;&nbsp;&nbsp;&nbsp;padding-top: 1px; &nbsp;&nbsp;&nbsp;&nbsp;margin: -30px; } p&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;font-size: 14px; &nbsp;&nbsp;&nbsp;&nbsp;font-family: 'Roboto Condensed', 'Roboto', Lato, serif; &nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:0px; &nbsp;&nbsp;&nbsp;&nbsp;text-indent: 1em; } h1&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;font-family: Lato; &nbsp;&nbsp;&nbsp;&nbsp;color: #212529; &nbsp;&nbsp;&nbsp;&nbsp;font-weight: bolder; &nbsp;&nbsp;&nbsp;&nbsp;text-transform: uppercase; &nbsp;&nbsp;&nbsp;&nbsp;font-size: 26px; &nbsp;&nbsp;&nbsp;&nbsp;margin-top: 20px; &nbsp;&nbsp;&nbsp;&nbsp;margin-bottom: 4px; &nbsp;&nbsp;&nbsp;&nbsp;padding-top: 40px; &nbsp;&nbsp;&nbsp;&nbsp;clear: both; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom: 2px solid; } hr&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;height: 2px; &nbsp;&nbsp;&nbsp;&nbsp;background-color: #212529; &nbsp;&nbsp;&nbsp;&nbsp;display: block; &nbsp;&nbsp;&nbsp;&nbsp;border: 0; &nbsp;&nbsp;&nbsp;&nbsp;margin-top: 0px !important; &nbsp;&nbsp;&nbsp;&nbsp;margin-bottom: 0px !important; } blockquote&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:inline; &nbsp;&nbsp;&nbsp;&nbsp;background: #5e0000; &nbsp;&nbsp;&nbsp;&nbsp;color: #FFFFFF; &nbsp;&nbsp;&nbsp;&nbsp;text-transform: uppercase; &nbsp;&nbsp;&nbsp;&nbsp;margin: 0.1em 0.15em 0.1em 0.15em; &nbsp;&nbsp;&nbsp;&nbsp;padding: 0.2em 0.5em; &nbsp;&nbsp;&nbsp;&nbsp;font-size: 14px; &nbsp;&nbsp;&nbsp;&nbsp;font-family: 'Roboto Condensed', 'Roboto', Lato, serif; &nbsp;&nbsp;&nbsp;&nbsp;border: 0px; } The Pathfinder 2e compendium handouts don't yet have formatting, except for bolding. You can use a Paste to Markdown tool (like&nbsp; <a href="https://euangoddard.github.io/clipboard2markdown/" rel="nofollow">https://euangoddard.github.io/clipboard2markdown/</a> &nbsp;) to change the handouts to markdown. The only changes to the markdown is adding an # to make the first line an h1, and a &gt; to the second line to make it a block quote (in the books, these traits are individually wrapped, but I didn't want to have to wrap them each in spans for every handout). The h1 has its own border beneath it, but you'll need to also add *** in the appropriate places. The handout should look something like # **Healer's Gloves (Item 4+)** &gt; Invested, Magical, Necromancy **Usage** worn gloves; **Bulk** L ****

Looks awesome, Mik!

Btw Mik, I'm testing out your template and the blockquote in your post might have a typo because the traits section is showing up like this # **Barkskin Potion (Item 4)** &gt; Abjuration, Consumable, Potion, Primal **Price** 15 gp **Usage** held in 1 hand; **Bulk** L All the text is there, it's just white. Am I just missing the fonts? Also, do you have any suggestions for adding the Action Icons? I tried the following line, but the image ends up far bigger than the text (adding ' =22.8x15' to the end of the url isn't supported) **Activate** ![Single Action](<a href="http://2e.aonprd.com/Images/Actions/OneAction.png" rel="nofollow">http://2e.aonprd.com/Images/Actions/OneAction.png</a>) Interact While this is it's size in the source material Activate Interact Is there another way I can set it to resize either through markdown or by adding to your css?

Try.... // This in the Markdown **Activate** ![single_action Single Action](<a href="http://2e.aonprd.com/Images/Actions/OneAction.png" rel="nofollow">http://2e.aonprd.com/Images/Actions/OneAction.png</a>) **Interact** // This in the CSS single_action {width: 22px; height: 22px;}&nbsp;&nbsp;

That worked! Thanks, Stephen :)

Likely will start a new thread soon, explaining the entire markdown script better. Kind of just wanted to get it out there and get ideas. Image work as below. [MD] &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | &nbsp; |&lt;-1st word-&gt;|&lt;-otherstuff&gt;| |&lt;--------image source--------------------------&gt;| &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | ![single_action Single Action](<a href="http://2e.aonprd.com/Images/Actions/OneAction.png" rel="nofollow">http://2e.aonprd.com/Images/Actions/OneAction.png</a>) [CSS] |&lt;-1st word-&gt;|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| |&lt;----css---&gt;|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| |&lt;-selector-&gt;|&lt;---decoration------------&gt;| |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;| single_action {width: 22px; height: 15px;}&nbsp;&nbsp; ///final HTML &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&lt;--------image source--------------------------&gt;|&nbsp; &nbsp; &nbsp; &nbsp; |&lt;-otherstuff&gt;|&nbsp; &nbsp; &nbsp; &nbsp;|&lt;---decoration-----------&gt;| &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | &lt;img src="<a href="http://2e.aonprd.com/Images/Actions/OneAction.png" rel="nofollow">http://2e.aonprd.com/Images/Actions/OneAction.png</a>)" title="Single Action" style="{width: 22px; height: 15px;}"&gt;

keithcurtis had a great suggestion for image styling on the fly....optional decoration at the end..&nbsp; ![Single Action](<a href="http://2e.aonprd.com/Images/Actions/OneAction.png){width" rel="nofollow">http://2e.aonprd.com/Images/Actions/OneAction.png){width</a>: 22px; height: 15px;}

Seph, for the blockquotes, I'm not sure what the problem is. Try changing the "background" to "background-color" and see if that helps? In addition, if you've got other css (like from Keith's example), something might be overwriting. I am definitely not an expert as CSS.

You can run into some problems with the Roll20 text editor, since it was built for styled text, not plain text. You can sometimes solve problems in handouts or style declarations by cutting all text pasting it into a plain text editor (ex. Notepad for Windows, TextWrangler for Mac) and then cutting and pasting it back into your handout. One quirk I have noticed is that sometimes you will need to do a find/replace all in the text editor to get rid of double returns that will sometimes crop up.

Mik, I fixed it by changing the blockquotes display from 'inline' to 'inline-block' :)