4

I was reading up on changing placeholder text when I stumbled across this question.

I went back and learnt about placeholders, anyway. And one SO answer said something along the lines of:

Be careful when designing your placeholder text, since anything outside of the control will be cut off.

Putting these two answer together, it made me think (yes, I know, bad thing to do!) -

What is the longest letter in EM in Global (language) terms?

(since we are meant to size letters in EM and all).

The longest in the English Alphabet is 'W' apparently (from linked Question) - so in terms of global languages, what is?

If I had a control such like:

+------------------------+
|123456789101112131415161|
+------------------------+

where the placeholder was 24 numbers long. How can i ensure they all fit?

Since numbers seem to be the same EM width:

11111
22222
33333
44444
55555
66666
77777
88888
99999

How can I ensure that 24 characters, no matter what length/EM width will fit?

I could just go:

+------------------------+
|WWWWWWWWWWWWWWWWWWWWWWWW|
+------------------------+

But what if there is a wider letter used from another language? How can I ensure that the placeholder text can be read? (without resizing the input itself dynamically)? I literally want the minimum width it would have to be to display 24 characters, no more - no matter what language is placed in the field.

Here's an example of an even longer 'letter' than English's W:

WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW ŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒŒ ÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆÆ

EDIT

I know how i would test (as above) but not 'contenders' as to which is the widest character in the world?

TylerH
  • 20,799
  • 66
  • 75
  • 101
jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • 1
    "longest" refers to the font and glyph in use. You can select a glyph for the letter "w" such that it is no wider than the letter "m". – Bob Dalgleish Nov 10 '14 at 12:11
  • I'm talking more typical, modern fonts. *In modern typefaces, the character M is usually somewhat less than one em wide* ~[Wikipedia](http://en.wikipedia.org/wiki/Em_(typography)#Incorrect_and_alternative_definitions). For example MVC's standard Font Is **Segoe UI**, and winforms is **Microsoft Sans Serif** – jbutler483 Nov 10 '14 at 12:22
  • Again, what fonts and glyphs are you working with? There are tens of thousands of glyphs. You need to do some research. – Bob Dalgleish Nov 10 '14 at 13:20
  • @BobDalgleish I'm using the default for an mvc web app in visual studio? I'm not quite sure what/where the information you are looking for is exactly? – jbutler483 Nov 10 '14 at 13:22

2 Answers2

0
  1. determine your font (eg. Arial)
  2. determine your font-size (eg. 10px)
  3. determine your font-weight (eg. bold)
  4. determine your character-set (eg. UTF-8)
  5. print a couple of same characters (eg. 24) per row for each character of the character set
  6. devide and conquer -> remove rows that are obviously shorter than others and refresh the page -> repeat removal as long as there are more than one rows on the page (for equally long rows just pick any one)
Quicker
  • 1,247
  • 8
  • 16
  • basically the 'print' in step 5 converts into "write to html page" (eg. with the help of javascript) – Quicker Nov 11 '14 at 12:42
0

Print each character enclosed by a span and then search for the calculated width for that character (either in your browser's devtools or you can automate this with a simple Javascript script that will check the largest of your characters).

tomaoq
  • 3,028
  • 2
  • 18
  • 25