clagnut / TODS

Typography and Opentype default stylesheet
7 stars 1 forks source link

Prevent OpenType utility classes overwriting each other #1

Closed RoelN closed 1 week ago

RoelN commented 3 weeks ago

Currently the following wouldn't work:

<div class="tnum zero">0123</div>

As the latter would overwrite the former:

.tnum { font-variant-numeric: tabular-nums; }
.zero { font-variant-numeric: slashed-zero; }
clagnut commented 3 weeks ago

Ah. You're right. I thought they would build upon each other, not overwrite each other. How annoying. Don't really want to go down the route of CSS custom properties for this too. Maybe just make it clear that one utility would overwrite the other if used together?

clagnut commented 3 weeks ago

Because the same will apply to other font-variant-* properties.

RoelN commented 3 weeks ago

An alternative could be to account for all combinations...

.tnum { font-variant-numeric: tabular-nums; }
.zero { font-variant-numeric: slashed-zero; }
.tnum.zero { font-variant-numeric: tabular-nums slashed-zero; }
clagnut commented 1 week ago

or maybe. seeing as I'm using classes anyway, I can set up custom properties for the possible values within each font-variant-* property.

Or... remove the utilities altogether as they are not necessarily in the spirit of applying middle opinionated typographic styles...?

I suppose anyone using it could just remove them if they see fit.

clagnut commented 1 week ago

Couldn't get the custom properties route to work fully for some reason. However I have kept the utilities there and just added some combination classes per Roel's suggestion.