Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 3 down vote favorite

Im designing a DIV container that will contain some rows of text. Every row can contain 0 to 35 chars.

I need to specify a fixed width for the div, but I cannot predict how "wide" the string can be.

An example of strings (all 35 chars):

  • aeR1riPhah9chaicaegae7oobaiz8eiquoL
  • iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
  • da da da 35 chars text With CApital

As you notice, the glyph "i" is less wide than "L".

A possible solution could be to use a Monospaced font, but for some stylistic constraints I need to use Arial (or equivalent font).

The idea is to size the container considering a string that contains the largest glyphs, but I am not sure what is the largest glyph, especially if we consider all the UTF characters..

Any help, advice would be really appreciated!

share|improve this question
it's W. You could try this out yourself - but someone already did the work for you :-) See this - stackoverflow.com/questions/3949422/… but personally I wouldn't design around the widest character as it's almost certainly going to be generally too wide if you allow space for 35 W's – Roger Attrill Jul 21 '11 at 10:43
Thank you very much, that's just perfect! – Rdpi Jul 21 '11 at 11:02
Also related: graphicdesign.stackexchange.com/questions/860/… – e100 Jul 21 '11 at 12:26
3  
Consider your target audience. Are they realistically going to be using Arabic characters or will 99.9% of the users be using latin characters 99.9% of the time? If you're planning on accommodating the widest character 35 times in a row, you're likely affecting the rest of your design for the sake of the unlikely edge case. You may be better served to run a regex in your rendering function to guesstimate width. If too many non-latin characters are detected, apply an extra CSS class to reduce the font-size on that particular row. – Farray Jul 21 '11 at 15:01
Further to Farray's point, █ usually gives a typical wide character width. Or M widths are the classic unit of measurement (hence em). They're not strictly the widest, but something strange will be happening if the average character in a string is wider than this. overflow: auto should cover very strange cases like this. – user568458 Jul 26 '12 at 15:12

migrated from ux.stackexchange.com Jul 21 '11 at 11:04

2 Answers

up vote 4 down vote

Just one thing to say:

WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW

[EDIT] Update - OK - I concede there are some much wider characters: ؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁

share|improve this answer
Very much appreciated! wWwwW – Rdpi Jul 21 '11 at 11:03
-1. While this is true for basic Latin, the question specifically says "the largest glyph" and "especially if we consider all the UTF characters". – e100 Jul 21 '11 at 14:17
@e100. Yes - you are absolutely correct. I'm back ahead of you now though - can I have my vote back :-) – Roger Attrill Jul 21 '11 at 14:47
Done................ – e100 Jul 21 '11 at 14:55
I feel like I'm watching the "Wanda the Witch" skit from very early Sesame Street. :) – Lauren Ipsum Jul 21 '11 at 18:47
up vote 2 down vote

Still checking, but in the set of Latin glyphs,

DŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽDŽ

is looking pretty wide.

Or there's

‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱‱

Or maybe &#xfdfa "ARABIC LIGATURE SALLALLAHOU ALAYHE WASALLAM" (doesn't seem to render in the Tahoma used here):

ﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺﷺ

Obviously these are extreme examples and it's very unlikely anyone's going to type these, but it underlines Farray's point above: you need to find a compromise that will cover the vast majority of cases for your audience, but not necessarily anything that might conceiveably appear.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.