Input textbox width and font width

Question

I would like to make a uniform class to set the width of both text and a text input box so that any platform will print both pre-defined and user-input digits inline. So far, it seems that there is no way to get an input text box and a font width to be equal on all platforms?

You have to be much more specific.. what is font width? what platforms? what do you mean by "print both pre-defined and user-input digits inline" ? — webkit, Jun 24 '14 at 05:27

GAEfan · Answer 1 · 2014-06-24T06:24:13.257

0

Fonts have slightly different widths on different OS's. Best you can do is to choose a fixed-width universal font, so you use the same (well, very similar) font on each system. Then, set the width of the text box using css width: XXXpx;

I would start with this font:

http://www.google.com/fonts#UsePlace:use/Collection:Droid+Sans+Mono

(not sure why that links redirects. Try copy/pasting it)

That will get you pretty close.

edited Jun 24 '14 at 06:24

answered Jun 24 '14 at 05:54

GAEfan

11,244
2
17
33

I didn't know about fixed width fonts. That's interesting and helpful. Thank you. But still, I think there will be a serious difference between the width of a particular fixed-width font and the assigned pixel width between, say, an iPad and IE. I'm thinking I might have to create a division for each digit, whether I put it on the screen or the user enters it in, if I want them all to be in line? – Mark Leavenworth Jun 24 '14 at 06:08
1

No, try it. They are very similar across devices. – GAEfan Jun 24 '14 at 06:21
Thank you for the encouragement. The different ratios between the text box width and the text width from platform to platform is still a problem for me on this project, even though the pixel settings are the same for all. It looks like I will either have to design platform specific code or division elements per digit. Too bad for me that bankers and elementary students need access to the same kinds of tools. – Mark Leavenworth Jun 24 '14 at 08:16
It looks like I'm just succumbing to senseless misanthropy, and the actual solution is in setting the padding to 0, because different platforms have different default text box padding. – Mark Leavenworth Jun 24 '14 at 08:41
1

Yes, always good to set the styling, including padding, explicitly. Not sure who the misanthropy comment us directed at. – GAEfan Jun 24 '14 at 13:35
The misanthropy comment was directed at myself! It's easy to get discouraged and suspicious in developing this technology, as it seems there is an unexpected pitfall at every minute detail. But with an art that is so flexible in every detail, and without any recourse to nature for blending-in error, any difficulty is precisely equal to the detail overlooked by the workman. – Mark Leavenworth Jun 25 '14 at 14:09
Me. It was directed at me. – Mark Leavenworth Dec 18 '21 at 04:51

score 0 · Answer 2 · answered Jun 24 '14 at 14:54

There are several reasons why a string of digits in normal content may have a width different from a string of digits as the value of a text input box: the font faces may differ, the font sizes may differ, and the input box may have some padding, some margin, or some border by default. To deal with this, set those properties explicitly. Example:

<style>
span, input {
  font-family: Arial, sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 0;
  border: none;
}
</style>
<span>1234567890</span><br>
<input value=1234567890>

The input box value will then look like normal content, and this is a serious usability problem. To deal with this, set a border of the same width for both elements but a transparent one for the span:

<style>
span, input {
  font-family: Arial, sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 0;
  border-width: 1px;
}
span {
  border-style: solid;
  border-color: transparent;
}
</style>

(Since transparent as border-color value is not universally supported, it might be safer to use a specific color value that matches the background color of the enclosing element.)

Input textbox width and font width

2 Answers2