rpg-cards
rpg-cards copied to clipboard
Browser update changed text size
Hey, first of all, thank you very much for you card editor. It's awesome. I use it to make cards for my players who don't speak english well enough to read the english source books. It's been a big help, so really, thank you very much!
Anyway, I use the rpg-cards in offline mode. I downloaded the archive two weeks ago. Just now chrome updated itself to version 76.0.3809.87. Before that I had the version from 13th of June 2019 I think (I am on holiday and the laptop had no internet access since then).
Now the text on the cards doesn't fit anymore. It's now bigger and all the lines are out of order. I load the exact same save. In fact, I was working on some cards, chrome updated itself, I restarted it and now all the cards are wrong. I tried loading the save in Firefox but that is the same. In IE the text is smaller but still not the way it was in chrome before the update.
Is there anything I can do? I don't know anything about programing though so I'm a bit lost...
Have you tried with the live version (https://crobi.github.io/rpg-cards/generator/generate.html)? I have Chrome 76.0.3809.100, and the text size looks the same as always.
Inspecting the text of the generated card reports a font size of 8pt.
Yeah, I did. I'm back fom holiday now and have full internet access again. On my normal computer it's big as well and there is no difference between Firefox, Chrome and Edge.
I made a screenshot to show you what I mean. The left card is from an pdf I created before Chrome updated itself, the right card is from after the update. So, the letters are smaller, I see that, but I didn't change anything anywhere nor do I know if that is even possible. As I said, I was literally working on cards when Chrome updated itself and after I relaunched it all the text was different...
The font is different. You see the difference if you look at the letter 'g' for example. Maybe the font doesn't load anymore?
Oh, you're right. I didn't even see that. Thanks! Hm, so I guess I should find out what font this is so that I can see wether or not it is still loaded. Any idea how to do that?
Edit: that could be Times I think while the new one is maybe Arial...
Look in chrome devtools if you see any errors. I use the https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en extension to find out what font a website is using. If I read the CSS correctly then you should see "Noto Sans".
Okay, it seems that the bigger cards are written in Noto Sans. If you say it should be Noto Sans, does that mean the bigger ones are how the cards are actually supposed to look and that chrome used a different font for whatever reason before the update?
Is there a way to change the font the cards use?
The cards should indeed use Noto Sans
. It looks that your old Chrome was not able to use the Noto Sans font for some reason (or maybe you had an extension to change fonts on web pages?).
If you run your own copy of the generator, you can change the font in this CSS file.
Otherwise, as a workaround, you can wrap your text in a <span>
to change how the text is rendered:
text | <span style="font-size:8pt;font-family:arial">Lorem ipsum</span>
The above example would print a Lorem ipsum
text in a 8pt Arial font.
Thanks so much for the tips. I did some testing and it seems the old chrome on my laptop used calibri for the subtitles and the card texts but not for the header. I don't know what font it used for that. This is pretty weird. I don't have any extensions and it did look different from before and after the chrome update in internet explorer.
Anyway, I edited the css to use Calibri so that I don't have to reformat all the cards and I'm gonna run with that.
Thank you all very much for your help. :)