Character/Letter Widths

[matthewfelgate]

Is there any way to set the widths of characters/letters in CSS?

I.E. Is there any way to make a non-monospaced font, monospaced?

I’m making center aligned countdown timer so some transitions eg 38 to 31 look odd because the ‘3’ moves (because the center point changes).

[Paulie_D]

That doesn’t sound like a character sizing issue..sounds more like an alignment orf positioning issue.

[Paulie_D]

I could see the issue happening with letters, but I believe most fonts give digits the same width.

Same height maybe…but width?

You could be right, it would make a sort of sense….I suppose it’s all in how the glyph was designed.

[Paulie_D]

Indeed…that does seem to be the case.

As I said, sounds like an (vertical) alignment issue…or perhaps a transform-origin one?

Can’t comment much further without seeing it.

[matthewfelgate]

http://codepen.io/matthewfelgate/pen/GgazeZ

Here is a codepen I copied and changed the font to show the issue.

[matthewfelgate]

lettering.js looks like a solution, but how would I add it to my Countdown javascript below?

$(".js-seconds .starbox__num")
    .countdown("2015/08/22 13:00", function(event) {
        $(this).text(
        event.strftime('%-S')
        );
    });

[Paulie_D]

Since we’re now moving to JS…I’ll push this over there.

[matthewfelgate]

Me too. But I can I chain lettering.js on after each time countdown.js updates it.

Something like:

$(".js-seconds .starbox__num").countdown(...).lettering();

Is it possible? (my javascript skills aren’t great :$)

Then I can just have some CSS something like:

.char1, char2 { 
    display: block;
    float: left;
    width: 100px;
}

[Author]

Posts