CODEWITHSUNDEEP
htmlcssfonts
David Jones
David Jones

Reputation: 10219

Adjusting the vertical position of the text cursor (relative to the text itself) in an HTML input

I've noticed that the metrics of some web fonts cause very poor vertical alignment with the text in HTML input fields (see the image below, which is a rendering of "Gill Sans" obtained via MyFonts). text cursor with poor vertical alignment I believe this is an issue with the font itself, and therefore cannot be solved with CSS (although I've included the CSS tag in case I'm wrong about that). Adjusting the line height does not solve the issue, because line height affects the positioning of the text and cursor together.

Upvotes: 0

Views: 186

Answers (1)

David Jones
David Jones

Reputation: 10219

I ended up fixing the vertical metrics using Transfonter (be sure to check "Fix vertical metrics"). To figure out what the tool was doing, I used the TTX command (FontTools) to convert the original and fixed fonts into XML format. It seems that this tool is adjusting the ascent and descent values in the HHEA and OS/2 tables (possibly by iterating over all glyphs and finding the maximum ascent and minimum descent values).

Original HHEA Table

<hhea>
  ...
  <ascent value="750"/>
  <descent value="-250"/>
  ...
</hhea>

Fixed HHEA Table

<hhea>
  ...
  <ascent value="911"/>
  <descent value="-230"/>
  ...
</hhea>

Original OS/2 Table

<OS_2>
  ...
  <sTypoAscender value="750"/>
  <sTypoDescender value="-250"/>
  <usWinAscent value="926"/>
  <usWinDescent value="274"/>
  ...
</OS_2>

Fixed OS/2 Table

<OS_2>
  ...
  <sTypoAscender value="911"/>
  <sTypoDescender value="-230"/>
  <usWinAscent value="911"/>
  <usWinDescent value="230"/>
 ...
</OS_2>

fixed cursor position

Upvotes: 1

Related Questions