Add D100 Support for DiceFont

[IndentYourCode]

In response to issue #3347.

Hey all, this is my first time contributing to open source. Please let me know if there's ways to improve this. This was also my first time using Less, but I think I was able to get this functionality working as intended.

New CSS class names are supported using the "df d100-##" format. As such, they the "##" will be parsed as if it were a number 0-99. The numbers will be parsed, and then use the diceFont fonts to display two d-10s with the corresponding percentile dice result.

Let me know if there's anything else that should be changed.

Here are some examples:

<div class="df d100-0"></div>
<div class="df d100-1"></div>
<div class="df d100-2"></div>
<div class="df d100-3"></div>
<div class="df d100-4"></div>
<div class="df d100-5"></div>
<div class="df d100-6"></div>
<div class="df d100-7"></div>
<div class="df d100-8"></div>
<div class="df d100-9"></div>

[calculuschild]

Hi @IndentYourCode ! Thanks for your contribution.

I just want to be sure with @5e-Cleric , but if I read the original issue correctly, I think the desire is to add actual additional icons to the font, containing the double-digit numbers, rather than displaying two d10's side by side. Is that right?

[IndentYourCode]

Ahh I could see that. I'm not sure how I'd go about editing a font to achieve this. But I'm interested in giving it a shot! I'll hang back and wait for next steps 🫡

[5e-Cleric]

The original issue was that, but we could do two dice, after all when we roll a d100 on the table, we use two dice.

I'd say we do this either way, but if we go with two dice, we could go further into the real world, and have the dice look like they would do, with two numbers on one and one on the other:

(00-90)(0-9)

I don't have any strong opinion on this, it's just an idea, perhaps @G-Ambatte has something to say, he brought the font in the first place.

[IndentYourCode]

Any idea how that would be implemented? Would I need to go make custom .svg's for the font if that's the case? I could probably do that.

The dice might be cluttered with two digits on one d10, but I suppose that could just be fixed by having the user increase font size. Either way, I'm happy to contribute!

[calculuschild]

@Gazook89 has some recent experience adding icons to icon fonts. Perhaps he can give you some basic steps.

I believe https://icomoon.io/app is a good tool for converting between svg and font, and Inkscape is a good free svg editor.

[G-Ambatte]

I did a quick mock up of two digits on a die:

My personal preference is two separate dice with one digit in each. That said, I can also foresee a scenario where the users want the two digits on a single die.

Here's a suggestion, although it's somewhat inconsistent with the existing implementation - custom die numbers, allowing the digits 000-999.

Unfortunately, the inconsistency is that the font size sets the size of the displayed die number, whereas in the current implementation, it sets the size of the entire icon. The end result is that the proposed custom icon is approximately three times larger than before, and I don't see any way to change that without further complicating the syntax.

Content:

{{font-size:20px
{{df,d10,custom 48}} {{df,d10-1}}
}}

Style:

.df.custom {
    position: relative;
    margin: 1em;
    bottom: 0.75em;
}
.df.custom::before {
    font-size: 3em;
    position: absolute;
    left: 50%;
    top: -100%;
    translate: -50%;
}

[Gazook89]

I don't like being able to set any number. That's too obtuse and finnicky, and is not truly an icon.

There are already plenty of dice with two digits, such as d10's and d20s. Granted, the 1 in 10 is a narrow glyph, but I'm not sure there is much to worry about.

Is there any use of these types of dice fonts in source material (DND books, or really any TTRPG resource)? As @5e-Cleric mentioned, I would expect two dice, but with one being the 10's and the other being 1's-- or said in another way, the 00-90 and the other 0-9.

Regarding the 'process', I could probably make the font glyphs or someone else can do them...but here is the rough idea:

1. download the svg of the d10-- i would likely get the svg of each d10 1 thru 10 so i had the digits
2. edit in an SVG editor (inkscape, illustrator, designer, etc) to get a new file for each glyph
3. upload the batch of new files to icomoon.io and download the new font files
4. look at PR RPG Awesome Redux #3420 for guidance on how to get the font included
   • look at this particular new file and the regex at the top to transform icomoon's output to something useable in HB.
   • a few other steps i can detail if needed, but mostly just building on prior work since you are just adding more icons to an existing font.

[IndentYourCode]

This is great! I'll take a look tonight and tomorrow and see what I can do if that's okay? I think I'd like to try out editing the svg as well.

[calculuschild]

With all of this, keep in mind we just merged the emoji syntax :df_d10_10:. Whatever solution we make should continue to be compatible with that, so something like

{{font-size:20px
{{df,d10,custom 48}} {{df,d10-1}}
}}

is probably not going to interact cleanly with that.

Is there any use of these types of dice fonts in source material

It is pretty common to reference a "d100". This generally means roll 2 d10s, but the accompanying table of results will show a range of say 10-25, not (1)(0) - (2)(5). If our intrepid user wants to use the new fancy dice icons to show the ranges in the table, instead of boring numbers, having a single die for each number would just look kind of cluttered I think. "Is this 2 d10's of value 9 and 5, or is this the number 95?"

That specific example aside, there are real d10's with a 0 at the end, so ranging from 0 (or 00) to 90 as @5e-Cleric mentions. If we are going to add those, might as well just add all the numbers in between while we're making the effort. Compared to something like FontAwesome, another 90 icons isn't really a lot.

[calculuschild]

FWIW, there are also real d100 dice. Might be cute to add a d100 graphic that is basically just a ball.

[calculuschild]

I did a quick mock up of two digits on a die:

I am also not fully opposed to tweaking the die silhouette to widen the center face a little if it makes things more legible.

[Gazook89]

I am also not fully opposed to tweaking the die silhouette to widen the center face a little if it makes things more legible.

I would rather keep a consistent dice shape, and add a "stroke" around the numbers. The stroke wouldn't be another color, but just an 'erased' stroke...and the actual svg wouldn't actually have a true stroke.

Edit

my words aren't good. Here is what I mean:

[Gazook89]

funny, a kagi search of 'd10 svg' returned this game-icons.net github discussion:

game-icons/icons#914

[5e-Cleric]

Saw a version with three digits up there why would we do that?

we only would need 00-99 in one die, or 00-90 + 0-9, i don't care between the two, but apart from reaching a decision this looks like fruitless. No need for erasing strokes or fancy stuff.

Lets do 00-99

(remember 00 is 100 in a d100)

[calculuschild]

Right. @IndentYourCode If you want to keep working on this, just go ahead and add the double-digit numbers (00-99) to the icon font using the same original style to keep it simple. Sorry we bombarded your first PR with lots of side discussion.

Everyone else, let's pause the discussion here unless it directly ties to IndentYourCode's progress, and move talks about fancier dice out to a separate issue.

[IndentYourCode]

Haha y'all are good! It should be kinda expected that a PR for a minor thing on a project with a bunch of D&D and software nerds would result in a multi-discussion chain about the all the best/possible/optimal ways to represent a D100.

I guess a follow up for @5e-Cleric and @Gazook89 would be about Less? In the original issue it was suggested to use a loop to generate these? But it's sound like since we're modifying the font itself, I'd need to at least go through and create 100 unique svgs for the fonts. Is there a quicker way to do this that I'm not connecting? I think that's why I went about my way to begin with.

[5e-Cleric]

uh.. the appropiate way to go is to create an svg for every number with the die, then compile them into a font, ideally, the DiceFont, using a font maker tool like https://www.glyphrstudio.com/app/

loading the font in otf or ttf, and copying glyphs.

BUT, i can offer another option, way less time consuming:

You will still have to make the less, but you could do a loop here, you would need to get the actual numbers from the dice font though and add them inside the font. If you think it is too much we can step in.

[calculuschild]

BUT, i can offer another option, way less time consuming:

G-Ambatte already suggested a dynamic solution like this above. I think we need to just stick to adding the new images to the font. Maybe more initial effort, but much more straightforward result. Keep consistent with all the other numbered dice in this font.