Grow your CSS skills. Land your dream job.

Proportionally expanding to fit text content?

  • # December 14, 2011 at 4:29 am

    I’ve created this iOS style notifier…

    http://jsfiddle.net/jwtcS/8/

    but would welcome any suggestions to allow it to accomodate numbers with more digits, either by making the text size smaller, or (perhaps easier) proportionally resizing the circle to fit?

    # December 14, 2011 at 6:54 am

    So what should it do when there’s a huge number in it, like 5 digits? Should it still be a large circle, or should it be an ellipse?

    # December 14, 2011 at 6:55 am

    A larger circle I think (or smaller text). TBH, though, I’m expecting a reasonable maximum of 999 for this particular project.

    # December 14, 2011 at 7:09 am

    Personally, I would choose this option: http://jsfiddle.net/jwtcS/10/

    Indeed it would be a bit tricky to have the height of the circle/bubble be the same as the width; I think the problem would be to detect the actual width of the bubble, being a pseudo/sub element and all.

    # December 14, 2011 at 7:18 am

    Yes. Thanks very much. That looks to be a ‘visually tidy’ solution. :D

    # December 14, 2011 at 7:31 am

    Ah perfect, that’s just the way iOS handles it too :D

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".