search

Obsidian-TTRPG-Community / Fantasy-Statblocks-CSS-Development

5 stars 4 forks source link

[Bug] PF2 action icons not rendering on ipad for statblocks #4

Closed pamput closed 1 year ago

pamput commented 1 year ago

PF2 action icons are not rendering on ipad for statblocks.

After a bit of debugging it seems the family face ordering in the css snippet overwrites the action icons of the stat blocks on ipad. Currently this is the list applied in the snippet that should introduce the icons:

    font-family: system-ui, "Pathfinder", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

It's likely that system-ui takes precedence and overwrites the action icons and turns them back into arrows.

Solution 1

Theoretically this should be easily fixable by setting the order as:

    font-family: "Pathfinder",  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

Problem with the above is the injected font doesn't contain only the action characters but also a couple more, including a blank 0 (zero). Blank as in "the type is actually an empty picture".

If you try to apply the above all the zeroes disappear:

Pre change:

image

Post change:

image

Note the "imprecise scent 30" loses its zero.

Solution 2

Select the unicode range or nuke the broken "zero character" from the font like this:

@font-face {
    font-family: "Pathfinder";
    src: url("data:application/x-font-ttf;charset=utf-8;base64,lookatmemomimafont") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+2B32, U+2B3A, U+2B3B, U+2B3D, U+2B53;
}

Unfortunately this doesn't work. It's likely that this font is injected in more than one place with the name "Pathfinder" and gets overwritten.

Solution 3

This works:

/* FONTS */
/* Main Font */
@font-face {
    font-family: "Pathfinder";
    src: url("data:application/x-font-ttf;charset=utf-8;base64,lookatmemomimafont") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+2B32, U+2B3A, U+2B3B, U+2B3D, U+2B53;
}

@font-face {
    font-family: "PathfinderActions";
    src: url("data:application/x-font-ttf;charset=utf-8;base64,lookatmemomimafont") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+2B32, U+2B3A, U+2B3B, U+2B3D, U+2B53;
}

.Pathfinder {
    font-family: "PathfinderActions";
}

.statblock.basic-pathfinder-2e-layout .statblock-markdown p {
    font-family: PathfinderActions, system-ui, Pathfinder, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

It's crude, but it works. It's almost 4am on this side of the pond so I'm too tired to make a PR. If someone smarter than me wants to pick this up and make a better fix, feel free. Happy to elaborate if there should be questions (once I'm rested...).

I'm going to sleep 💤

sigrunixia commented 1 year ago

Moving this to the Pathfinder 2E Statblock Dev Repo.

pamput commented 1 year ago

I suspected it was statblock's fault yesterday, but it was late and I wanted to drop all the information I had in my brain before going to bed.

https://github.com/Obsidian-TTRPG-Community/Pathfinder-2E-Statblocks-Development/blob/master/src/scss/components/_font.scss#L7

Here I think is the culprit font. Is there any reason why there is a blank zero in among the types? Just an error or some font wizardry I'm not aware about?

sigrunixia commented 1 year ago

On my side, looking at the source font, there is no blank 0 included in the font family. Only the 5 action glyphs. So I suspect what may be happening is on iPad that 0 is being read as the start of a pathfinder glyph but it finds nothing.

We'll likely need to add media screen rules to Address the iPad solution specifically. We're going to be working on a CSS update in #3 and we'll include this fix in it.

mProjectsCode commented 1 year ago

I don't own any Apple device so I will be of no help here xD

sigrunixia commented 1 year ago

I got you covered! :)

pamput commented 1 year ago

On my side, looking at the source font, there is no blank 0 included.

My knowledge of font types is very limited, but this is what I see via font forge:

image

Also I can confirm that using either a modified version of this font with the zero type nuked OR the unicode range in my css snippet fixes the issue (beside the font family name clash). For reference, these are the characters I see in the font type:

image

The unicode range targets these symbols directly.

I don't own any Apple device so I will be of no help here xD

Happy to lend a hand here.

sigrunixia commented 1 year ago

Bah. I wasn't using font forge, but if it says its there, its there. :( We'll get that fixed then.

pamput commented 1 year ago

Bah. I wasn't using font forge, but if it says its there, its there. :( We'll get that fixed then.

I'm happy to provide you with a ttf without the zero type. For reference, this type also contains:

You probably want to get rid of space too.

sigrunixia commented 1 year ago

Agreed on the space and we'll certainly take it. Saves us some work. :)

pamput commented 1 year ago

Sorry for the delay, it's been a busy couple of days at work :)

Here is the css including the font with the space and zero digit char removed.


@font-face {
    font-family: "PathfinderActions";
    src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+2B32, U+2B3A, U+2B3B, U+2B3D, U+2B53;
}

For good measure I'm also attaching the ttf should you find it useful.

Pathfinder-noSpaceNoZero.zip

Let me know if I can help in any other way.

sigrunixia commented 1 year ago

Sorry for the delay, it's been a busy couple of days at work :)

Here is the css including the font with the space and zero digit char removed.

@font-face {
    font-family: "PathfinderActions";
    src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: block;
    unicode-range: U+2B32, U+2B3A, U+2B3B, U+2B3D, U+2B53;
}

For good measure I'm also attaching the ttf should you find it useful.

Pathfinder-noSpaceNoZero.zip

Let me know if I can help in any other way.

No worries! Technically Lemons (mprojectscode) is still on vacation so we haven't started yet. If you want to be involved in the statblock css overhaul process, we'd be happy to have you.

sigrunixia commented 1 year ago

I have added the CSS to the development structure but haven't updated the Fantasy Statblocks Repo yet, as some more refactoring needs to happen this coming weekend/week. See #3