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 .
×
Create a free account

How to Display a specific dice font in a roll20 character sheet

March 29 (4 months ago)
GiGs
Pro
Sheet Author
API Scripter

This feels like it should be obvious, so maybe I'm missing something.

Roll20 has dice fonts, I want to use the d10 font: dicefontd10

I have a roll to generate a number between 1 and 10. How do I display that in chat as the dice font (where a = 1 in that font)?

March 29 (4 months ago)

Edited March 29 (3 months ago)
GiGs
Pro
Sheet Author
API Scripter

I realised I made a silly mistake and the problem is solved, but i'll leave this up to see if people post methods.

March 29 (4 months ago)

Edited March 29 (4 months ago)
vÍnce
Pro
Sheet Author

I would probably do this;
Use a roll template to test for a roll of 1 and apply the font to an empty sibling span of the roll using css content. (I'm sure there are other, more elegant methods)

<!-- template -- >
<div class="sheet-key">Roll:</div>
{{#rollTotal() d10roll 1}}
<div class="sheet-value"><span class="d10-font">{{d10roll}}</span><span></span></div>
{{/rollTotal() d10roll 1}}
{{#^rollTotal() d10roll 1}}
<div class="sheet-value">{{d10roll}}</div>
{{/^rollTotal() d10roll 1}}

/*css*/
.sheet-rolltemplate-example .sheet-d10-font {
visibility:hidden;
}

.sheet-rolltemplate-example .sheet-d10-font + span::after {
content: 'a';
font-family: dicefontd10;
font-size: 2em;
margin-left: -1em;
position: relative;
}

test roll
<button type="roll" name="roll_d10_test" title="%{d10_test}" value="&{template:example}{{d10roll=[[d10]]}}">d10</button>



March 30 (3 months ago)

Edited March 30 (3 months ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

I've usually just done conditional logic to wrap the inline roll in a class and then used the before element to display the font. (done this a lot for some recent sheets that have specialty dice)

HTML

<rolltemplate class="sheet-rolltemplate-number">
  {{#rollTotal() roll 1}}
    <div class="roll result-1">
      {{roll}}
    </div>
  {{/rollTotal() roll 1}}
  {{#rollTotal() roll 2}}
    <div class="roll result-2">
      {{roll}}
    </div>
  {{/rollTotal() roll 2}}
</rolltemplate>

CSS

.sheet-rolltemplate-number .sheet-roll .inlinerollresult{
  display: grid;
  grid-template-areas: 'content';
  color: transparent;
  position: relative;
  place-items: center;
}
.sheet-rolltemplate-number .sheet-roll .inlinerollresult:before{
  grid-area: content;
  position: absolute;
  font-family: 'dicefontd10';
}
.sheet-rolltemplate-number .sheet-result-1 .inlinerollresult:before{
  content: 'A';
}
.sheet-rolltemplate-number .sheet-result-2 .inlinerollresult:before{
  content: 'B';
}

This maintains the ability to hover over the roll and get the tooltip showing the quantum roll information. It also keeps the information for screen readers to parse.