lexyeevee
@lexyeevee
balketh
@balketh asked:

Eeeeeeveeee! You're an amazing css-crimedoer! I have a question for you. A conundrum!

I (among others) am trying to replicate the Morrowind dialogue UI (or general textbox UI) in Cohost via CSS.

There are numerous challenges to overcome (MW's UI has specifically textured colours, the dialogue window itself has a separate righthand bordered column, etc) but the hardest one is font.

Of course, MW uses an uncommon font that folks aren't likely to have installed on any given system. I've seen methods of doing custom fonts in Cohost-inline-css-ness that require the user to change each character with code, hosting the font itself in a google spreadsheet with staging URLs or some sort've magic...

Is there a way to achieve this? Is there a way to achieve this in a less onerous method? If not, how might one achieve it with such an onerous method?

the fancy border can be done with border-image, the layout can be done with grid, any kind of textured text can be done with background-clip: text;...

but the font is rather a big problem. you need a stylesheet to load fonts, which is a total no-go on cohost

the one thing you can do is use an inline svg as a background-image, and those can have stylesheets (since they're contained to the svg itself)... but when used as an image, an svg can't make network requests, so you also have to embed the entire font...

and now you're base64ing an entire font file twice, which is... kind of... ridiculous.

so i would not call this practical, exactly. it's also not much fun to edit, and since it's svg, text doesn't wrap automatically. and technically it's just an image anyway so we are kind of far away from "styling text with css".

but honestly the morrowind font is not exactly a _joy_ to read, so maybe font-family: serif; is good enough?

(edit: i realize the svg text says it "loads from Google Fonts" but it actually doesn't; i wrote the text when i was attempting to do that and before i discovered it doesn't work lol)


easrng
@easrng

for google fonts specifically if you add &text=the_text_you_use to the css url it'll strip down the font to only include the characters you need :)


You must log in to comment.

in reply to @lexyeevee's post:

what if you rendered each word separately as a path and embedded it as a separate svg, so the words could still wrap, and you don't have to embed the entire font. (not sure the path representation comes out ahead in size for anything other than very short text snippets tho)

This was one of the methods I had seen done in the past, and it's an absurd amount of preprocessing, as Eevee pointed out, even if automated, creating source that is just absolute textvom. So, while possible, not the ideal solution overall.

While the results don't strongly feature practicality (as somewhat expected!), this is a great example of the kind of shenanigans I'm talking about, and very informative regardless.

So, firstly, thank you so much for your time and effort. Secondly, thank you for exploring the difficulties of the topic. Thirdly, serif-ing the text might be enough, but I'll continue to explore other avenues of hopefully less-tedious methods than whole inline-svg-background-images. It might end up being a trade-off between practicality and effect, and much automation can still be done to ease the burden of preprocessing.

The info on texturing and structuring the grid is greatly appreciated, as well.

Thank you, again!