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…

    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:

    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".