Vertically align characters inside input

Answers (9)

Reputation: 4362

The Problem

In some fonts, characters with descenders, like g, p, q, and y, "overflow" the vertical space defined by the font-size property. Normally, that's not a problem, because the line-height property provides enough extra space to accommodate the descenders. However, if the characters are placed in a container element with a fixed height that's less than the line-height, the descenders may get clipped if that's how the container handles overflow (text inputs being one example of such).

If you were hoping to bump the text up a few notches to avoid the clipping, then you'll be disappointed to know that there is currently no way to reposition text within its own line-height. (vertical-align, in case you were wondering, positions an inline element relative to its parent.) However, there are a few CSS tricks that we can use to achieve the same visual effect...

Solution 1 (Webkit only)

This one works by giving the input a large enough height to fit the font's lower extremities, and then using clip-path to trim it back down to 28px. This is probably the most elegant solution, but unfortunately, clip-path isn't well supported outside of Webkit browsers (Chrome, Safari, Opera).

input {
  display: inline-block;
  padding: 0;
  border: none;
  height: 32px;
  font-size: 28px;
  line-height: 32px;
  font-family: arial;
  background: #cdcdcd;
  vertical-align: baseline;
  -webkit-clip-path: inset(4px 0px 0px 0px);
  clip-path: inset(4px 0px 0px 0px);
}

input: <input value="asdg">

Solution 2

This one was inspired by DebRaj's answer, but mine uses an inline-block wrapper instead of a block (not sure how you would use it otherwise). Like the previous solution, it increases the height of the input, but instead of using clip-path to trim it back down, it uses a container element with overflow: hidden;. This is probably the most practical approach until support for clip-path improves.

.text {
  display: inline-block;
  vertical-align: baseline;
  overflow: hidden;
  margin: 7px 0 -7px 0;
  height: 28px;
}
.text > input {
  margin-top: -4px;
  border: none;
  padding: 0;
  background: #cdcdcd;
  font-size: 28px;
  line-height: 32px;
  font-family: arial;
}

input:<span class="text"><input value="asdg"></span>

Solution 3

Although you can't reposition text within its own line-height, this may be the next best thing. If you set the line-height to something less than the font-size, the text will indeed move upward relative to its normal baseline. That means you can bring the clipped parts into view without changing the container height. Unfortunately, if you try this with a text input, you'll discover a strange quirk: line-height is completely ignored if it's less than the input's height. So we'll have to substitute a different element, and turn it into an editable textbox somehow. That can be accomplished with the contenteditable attribute.

.fauxTextInput {
  display: inline-block;
  vertical-align: baseline;
  margin: 6px 0 -6px 0;
  padding: 0 3px 0 3px;
  width: 9em;
  height: 28px;
  overflow: hidden;
  font-size: 28px;
  line-height: 23px;
  font-family: arial;
  background: #cdcdcd;
}

Faux input: <span class="fauxTextInput" contenteditable>asdg</span>

Upvotes: 4

Gust van de Wal

Reputation: 5291

Although there have been plenty of answers. I thought I'd add my solution to the bunch.

In this Fiddle, you can see how I managed to create an input field with a span tag, and the contenteditable attribute. The pros of taking this route are that the input field can stretch and wrap and that we can make it exactly 28px high.

In the CSS, I've added the following rules that are important:

span{
  display: inline-block;
  font-size: 25px; /*higher than 25px simply doesn't fit a 28px container*/
  line-height: 1;
  padding: calc(-.5em + 14px) 0;
}

display, of course, to style the bunch
font-size to declare the height of the font
line-height of 1 to make sure the text actually takes up 25px by default.
a padding of calc(-.5em + 14px) 0. And that's the tricky part

Because of this padding, the element will stay 28px high, while still centering the text. See the table below to see how the calculation works. The font-size and output * 2 always add up to a minimum of 28.

font-size | calculation          | output |
--------------------------------------
50px      | calc(  -25px + 14px) |  -11px | a negative padding translates to a padding of 0
25px      | calc(-12.5px + 14px) |  1.5px |
20px      | calc(  -10px + 14px) |    4px |
15px      | calc( -7.5px + 14px) |  6.5px |
10px      | calc(   -5px + 14px) |    9px |

With this code, you can edit the span's height by editing the 14px part in the calc, and edit the font-size without having to recalculate yourself

Hope this helps

Upvotes: 1

Thomas Ayoub

Reputation: 29431

There is no padding top, it's about font size. I've changed your snippet input with a special char that fit the whole height (I'll explain below):

input {
    font-family: arial;
    font-size: 28px;
    line-height: 28px;
    height: 28px;
    padding: 0;  
    border: none;
    outline: none;
    background-color:#cdcdcd;
}

<input value="ￂgs">

This image:

Explain how a font is construct. 99% of the time you'll see characters with Body < EM and that's why we may think that there is a sort of padding-top.

Sometimes, you'll cross characters for which Body == EM, that's the case of ￂ (and a lot of others).

What you are seeing is not a bug but a feature. From here you have 3 choices:

Changing the font-size;
Changing the input height;
Changing the font-family for one that doesn't "overflow".

The choice is all yours.

Upvotes: 5

reatlat

Reputation: 70

Just change height and line-height to 40px or more. https://jsfiddle.net/525raf3L/

input {
    font-family: arial;
    font-size: 28px;
    line-height: 40px;
    height: 40px;
    padding: 0 12px;  
    border: none;
    outline: none;
    background: yellow;
}

<input value="asdg">

Upvotes: -4

DebRaj

Reputation: 599

As @Thomas mentioned there is a default spacing as per font construction rules. If we concentrate the output you want to achieve is make font exact same height at the input area, you can wrap your input into a div and give that a height to adjust the input into it using as a mask.

Here is the code:

<div class="input-wrapper">
  <input value="asdg">
</div>

CSS:

.input-wrapper{
  position: relative;
  font-family: arial;
  width: 100%;
  height: 90%;
  padding: 0;
  background-color: #fff;
  overflow: hidden;
}
.input-wrapper input {
    display: block;
    width: 100%;
    height: 124%;
    margin-top: -0.19em;
    margin-bottom: 0em;
    font-size: 28px;
    padding: 0;
    outline-offset: 0;
    border: none;
}
.input-wrapper input:focus{
   outline-offset: 0;
   outline: 0;
   border: none;
   box-shadow: none;
}

fiddle: https://jsfiddle.net/x8jmLp8m/12/

Hope that helps.

Upvotes: 3

WitVault

Reputation: 24130

I hope this will help you know what you want to achieve

In CSS, the line-height property sets the height of an entire line of text, so the difference between the font- size and the line-height is equivalent to the leading (as shown in the diagram above).

And our css is this

input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;  
border: none;
outline: none;
background-color:#cdcdcd;

}

Here we have set line-height and font size equal and because of that decent is getting cut.So you either need to decrease font-size or increase line-height.

Upvotes: 0

JamieC

Reputation: 607

Just decrease the font-size:

input {
    font-family: arial;
    font-size: 20px;
    line-height: 28px;
    height: 28px;
    padding: 0;  
    border: none;
    outline: none;
    background-color:#cdcdcd;
}

<input value="asdg">

Upvotes: 0

aarzoo

Reputation: 19

  input {

  height:34px;

    }

Upvotes: -4

Jay

Reputation: 1678

Edited your fiddle here

The problem is your font is larger than the height of the element enclosing it. So you just need to set both the height and line-height to a couple of px larger than the font size you're using.

Hope this helps.

Upvotes: 0

Vertically align characters inside input

Answers (9)

The Problem

Solution 1 (Webkit only)

Solution 2

Solution 3

Related Questions