Search code examples
cssinputfontswidthitalic

Why does an input field reduce width with font-style:italic?

When applying font-style: italic; to an HTML input tag, the field is narrower (less computed width) than it otherwise would be.

Minimal reproducible example:

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="text" /><br>
    <input type="text" style = "font-style: italic;" /><br />
</body>
</html>

When saved as an HTML and rendered in Chrome, it looks like this: Two input boxes, with the bottom one less wide.
It's similar in other browsers.

Note: This issue isn't visible when the above HTML is run as a code snippet on Stack Overflow.

Why is this?
Is the factor by which one is narrower than the other constant across browsers?

Solution

  • This is the effect of the HTML5 specification.

    In the rendering section 14.5.5. The input element as a text entry widget. it says:

    If an input element whose type attribute is [text] does not have a size attribute, then the user agent is expected to act as if it had a user-agent-level style sheet rule setting the 'width' property on the element to the value obtained from applying the converting a character width to pixels algorithm to the number 20.

    The converting a character width to pixels algorithm returns (size-1)×avg + max, where size is the character width to convert, avg is the average character width of the primary font for the element for which the algorithm is being run, in pixels, and max is the maximum character width of that same font, also in pixels. (The element's 'letter-spacing' property does not affect the result.)

    That calculation means that the width of the input box depends on the character font. Chrome is taking italic as a separate font from normal characters and applying a different average value, and therefore a different total width.

    You can see this further by altering the font-family for the input element. In some fonts, the italic version results in a longer box, in others, shorter.

    Firefox and Edge currently don't use a different average for italic.