html - ejemplo - Entrada de texto en Chrome: la altura de la línea parece tener un mínimo

acronimo html

Question

Estoy intentando diseñar un ingreso de texto con un valor, entrada de texto con un marcador de posición y un lapso idéntico en Chrome. Específicamente, me gustaría controlar la altura de la línea independientemente del tamaño de la fuente.

Sin embargo, parece haber algún tipo de altura de línea mínima (o algo que causa un efecto similar) en el valor de entrada, que parece empujar el texto de alguna manera que impide el estilo idéntico.

Ejemplo de HTML:

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

CSS:

div {
  line-height: 50px;
  font-family: Arial;
}

input,
span {
  font-size: 50px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

Y los resultados se pueden ver en

http://plnkr.co/edit/oHbhKDSPTha8ShWVOC7N?p=preview y en la siguiente captura de pantalla desde Chrome 44.0.2403.155 (64 bits) en Linux:

Extrañamente, el marcador de posición parece estar diseñado con la altura de línea deseada, mientras que el valor de texto de la entrada se coloca de forma diferente. No me preocupa el color del marcador de posición en este punto.

¿Cómo puedo estilo los 3 elementos para que el texto esté en la misma posición, donde estoy usando una altura de línea personalizada?

Entiendo que puedo establecer la altura de la línea como normal o 1.2 , o reducir el tamaño de la fuente, para que los elementos aparezcan idénticamente, pero no tendrían la apariencia visual que estoy buscando.

Answer 1

¿Por qué está pasando esto?

Esta desalineación está causada por el símbolo de intercalación y, como tal, no creo que encuentre una manera de alinear el texto si el font-size y line-height son iguales.

¿Por qué es el carnet culpable?

El cursor tiene una height mayor que el texto que está haciendo que la alineación esté sesgada.

Hay algunas cosas que apoyan esto:

1. Puedes ver el tamaño del cursor

• Haga clic en la input y mantenga presionado el botón izquierdo del mouse. Arrastra hacia arriba y hacia abajo y verás que el texto se moverá
• Eliminar height: 50px; de input, span . El tamaño de la input aumentará ahora a la height del cursor

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  line-height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

2. El texto del marcador de posición está alineado correctamente

• El texto de marcador de posición no se ve afectado por el símbolo de intercalación, por lo que está alineado correctamente
• Tan pronto como se agrega texto a la input la alineación se descarta

El resultado de que el cursor tenga una height mayor es que la height la line-height se aumenta artificialmente, lo que hace que el texto esté fuera de línea.

Esto puede ser probado por:

• Cambiar line-height a 58px . La alineación del texto del marcador de posición y el span será la misma que la input

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 50px;
  line-height: 58px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

• Cambiar font-size a 45px . El cursor ahora encajará en la height 50px

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

¿Qué se puede hacer?

Como no hay forma de diseñar el propio cursor (para hacerlo más pequeño), la manera más eficiente de asegurar que el texto esté alineado sería usar un font-size que sea más pequeño que el line-height de la line-height . Esto, a su vez, hará que el cursor sea más pequeño y evitará que aumente artificialmente la line-height de line-height de la input .

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

Alternativamente , puede eliminar la height y simplemente especificar una line-height igual a la height del cursor:

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 50px;
  line-height: 58px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

Answer 2

Pregunta SO - 33185205

OP

http://plnkr.co/edit/oHbhKDSPTha8ShWVOC7N?p=preview

FORK

Explotación: <input> es un elemento reemplazado por lo que el agente de usuario no procesa el contenido.

Para obtener detalles, consulte: HTML5: elemento no reemplazado vs. reemplazado?

Solución :

Ver FORK o Snippet

html {
  height: 100vh;
  width: 100vw;
  font: 400 10px''Arial'';
}
body {
  height: 100%;
  width: 100%;
  background-color: grey;
  color: #111;
}
#form {
  display: inline-table;
}
.box {
  display: table-row;
}
span,
input {
  font: inherit;
  font-size: 40px;
  /* */
  height: 50px;
  /* */
  line-height: 50px;
  /* */
  width: 100px;
  display: table-cell;
  outline: 2px solid red;
  border: 5px solid transparent;
  /* */
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <form id="form">
    <div class="box">
      <input id="in1" type="text" placeholder="Text" value="Text">
      <input id="in2" type="text" placeholder="Text" value="">
      <span>Text</span>
    </div>
  </form>
</body>

</html>

1. Establezca la height y line-height de line-height de <input> s por igual. (por ejemplo, 50 px)

2. Establezca el font-size a un tamaño menor que height y height line-height . (por ejemplo, 40 px)

3. Ajuste la top e bottom del padding o border a la diferencia de los valores previos dividido por 2. (ej. ((50px - 40px) / 2) = 5px)

Answer 3

¡Creo que lo hice!

En mis pruebas, parece que la altura de la línea debe ser al menos ~ 115% del tamaño de la fuente, por lo que si quiere un elemento de 50px de alto debe tener ~ 43px para que todo se alinee:

Fig. 1. Tamaño de fuente 86% de 50px de altura de línea. Las cosas se alinean pero no respetan el tamaño de letra de 50 píxeles solicitado por OP.

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 43px Arial;
    line-height: 50px;
    padding: 0;
    vertical-align: middle;
 width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Si aumenta el tamaño de fuente al 50px deseado, la altura mínima de línea respetada por el cuadro de entrada es ~ 58px. Cualquier intento de compensar esto con la alineación vertical no tuvo ningún efecto en la entrada, pero podemos corregir la altura del elemento y ocultar el desbordamiento para proporcionar una apariencia consistente (aunque no del todo respetable):

Fig. 2. Texto de 50 píxeles que fuerza una altura de línea de 58 píxeles que se recorta con el desbordamiento oculto.

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 50px Arial;
    line-height: 58px;
    padding: 0;  
    height:50px;
    vertical-align: top;
    width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Cerca, pero no cigarro. Pero eso me hizo pensar, ¿quizás un pseudo elemento podría ser menos restrictivo? Descubrí que puedes aplicarle un estilo a la input::first-line pseudo incluso dentro de una input y que esto respetará la altura, el tamaño de la fuente, la altura de la línea y la alineación vertical.

Así voilà!

Fig. 3. ¡Pseudo elemento de primera línea para la victoria!

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 50px Arial;
    line-height: 50px;
    height: 50px;
    padding: 0;
    vertical-align: middle;
    width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}
input::first-line, span::first-line {
    vertical-align: middle;
}
/* weirdly the placeholder goes black so we have to recolour the first-line */
input::-webkit-input-placeholder::first-line {
    color:grey;
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Aquí hay un jsFiddle del lote para que pueda ver mi ejercicio. ;)

https://jsfiddle.net/romz58cc/4/

Answer 4

Debido a que los diacríticos no son parte de la definición tradicional de tamaño de fuente, nunca se puede tener la altura de línea = tamaño de fuente. Incluso ASCII incluye algunos signos diacríticos (por ejemplo U0060). Diacritics se puede aplicar a letras mayúsculas también, ni siquiera necesita extensiones unicode oscuras, latin1 es suficiente (U00C0, por ejemplo).

Cuando una fuente está diseñada correctamente e incluye el bloque de dibujo de la caja , esto se puede verificar fácilmente: se supone que las líneas de dibujo de la caja son conjuntas, por lo que U2502, por ejemplo, le dará la altura máxima exacta exacta utilizada por la fuente. Su altura será más que A o uno de los otros límites latinos generalmente utilizados para definir el tamaño de fuente. (Desafortunadamente, debido a que las líneas horizontales también se supone que son conjuntas, el bloque de dibujo de la caja solo se puede encontrar en fuentes monoespaciales).

Después de asignar la altura de la fuente, la pila de texto todavía tiene que reservar un lugar donde poner signos diacríticos (hay metadatos en formatos de fuente que definen cuánto consumirá una fuente en particular además del tamaño de fuente para los diacríticos). Por lo general, este lugar se solapa con el espaciado entre líneas. Cuando hay una sola línea, se muestra como altura de línea> tamaño de fuente

Calcular la altura de línea mínima exacta para un tamaño de fuente requiere un conocimiento profundo de la fuente utilizada (a través de una lib específica, algo así como opentype.js) y las características del motor de texto utilizado para representar cada elemento. Dependiendo del avance de este motor de texto, utilizará más (o menos) de los trucos permitidos por la especificación del tipo operantype para minimizar el desperdicio de espacio en situaciones internacionales complejas.

Por ejemplo, a menos que una pila de texto implemente el manejo de la especificación de tipo de tabla base opentype, el espaciado agregado real puede crecer hasta valores enormes (más del 15/20% típico del latín occidental y dado en otras respuestas) tan pronto como uno use una fuente con soporte para Vietnamese , u otros scripts que gustan de apilar muchos signos diacríticos uno encima del otro (incluso si su navegador logra renderizar esta página con una fuente genérica, probablemente comprimirá los signos diacríticos verticalmente en comparación con cuando se instala una fuente vietnamita)

Del mismo modo, la pila de texto sabe si el texto que coloca en una página incluye o no diacríticos complejos. Pero para un elemento de entrada no tiene esa información, eso depende de lo que escriba el usuario. Por lo tanto, debe ser conservador y reservar el alto de línea de caso más desfavorable para los scripts compatibles con la fuente que elija.

Los diseños de sitios web rotos donde la altura de entrada vertical ha sido subasignada son muy comunes, porque los autores de sitios web / js lib / browser viven en un mundo latino de 96dpi sin diacríticos, y piensan que minimizar la altura vertical es hermoso. Eso se rompe tan pronto como el sitio se ve en otro idioma, con glifos unicode levemente más complejos, fuentes ligeramente diferentes o niveles de zoom de texto ligeramente diferentes (debido a hidpi o simplemente al usuario casi a la vista). El texto normal suele estar bien, ya que el diseñador no intentó forzarlo dentro de un cuadro de píxeles fijos demasiado pequeño.

También es común que el tamaño del campo de entrada se rompa, cuando usa fuentes monoespaciales por una razón u otra, y el diseñador web asumió cierta proporción entre sans serif y el monoespacio e intentó "arreglarlo" (generalmente ampliando el espacio simple desde algunos navegadores). enviar con un pequeño espacio por defecto por razones de legado oscuro, aunque no es una regla general).

Answer 5

He hecho un poco de experimentación con alturas de línea dentro de cuadros de entrada y creo que he llegado a algún tipo de conclusión.

Parece que si el tamaño de la fuente en un cuadro de entrada es igual o superior al alto de la línea, entonces el cuadro cambia de tamaño y su contenido (pero no el marcador de posición) también cambia para ajustarse. Esto es obvio si elimina las alturas de su ejemplo.

  input, span {
    padding: 0;
    margin: 0;
    width: 100px;
    padding: 0;
    min-height: 0;
    display: inline-block;
    font-family: inherit;
    border: 2px solid red;
    vertical-align: middle;
  }

  input, input::-webkit-input-placeholder, span {
    line-height: 50px;
    font-size: 50px;
  }

  

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Si configura el font-size la font-size altura inferior a la línea, ya no verá el efecto de altura de línea extraña y todo el texto se ubicará en la misma línea:

  input, span {
    padding: 0;
    margin: 0;
    width: 100px;
    padding: 0;
    min-height: 0;
    display: inline-block;
    font-family: inherit;
    border: 2px solid red;
    vertical-align: middle;
  }

  input, input::-webkit-input-placeholder, span {
    line-height: 50px;
    font-size: 45px;
  }
   

  

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

Aquí hay un ejemplo de lado a lado: http://codepen.io/Jivings/pen/OyOKOV

Espero que esto ayude, y al menos te acerque a una solución en tu propio CSS.

Answer 6

Intenta así

Según el enlace: problema de altura de línea de Firefox con campos de entrada

la altura de línea en la entrada no cambiará a menos que cambie el tamaño de la fuente

por lo tanto, reduzca el tamaño de la fuente: 50px a 45px se verá bien.

Código a continuación

   div { 
line-height: 50px; 
font-family: Arial; 
} 

span,input[type="text"],input[placeholder]{ 
height: 50px; 
width: 100px; 
padding: 0; 
min-height: 0; 
display: inline-block; 
font-family: inherit; 
border: 2px solid red; 
overflow: hidden; 
vertical-align: top; 
font-size:45px; 

} 

::-webkit-input-placeholder { 
color:#000000; 

}

Answer 7

La altura de la línea al valor 1.2 (es decir, el 120% del tamaño de la fuente) funciona perfectamente en cromo

http://plnkr.co/edit/rJmXLRrGFpi46Vv5THm5?p=preview

  div, input, span {
      line-height: 1.2;
  }

El único cambio que hago es cambiar las dos alturas de línea de 50 píxeles a 1.2. No rompe el diseño y los tres elementos están bien alineados.

Entonces tu código original funciona bien en Firefox.

Answer 8

Base actualizada en los comentarios a continuación

Para usar la misma line-height de line-height para cada uno de los elementos, actualicé el CSS a esto:

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div {
  line-height: 50px;
  font-family: Arial;
}

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 50px Arial;
    height: 60px;
    line-height: 60px;
    padding: 0;
    vertical-align: middle;
    width: 100px;
}
input {
    padding-top: 3px;
}

Básicamente, si utiliza el mismo contenido contiene la height y la height line-height el texto se mostrará correctamente uno junto al otro, incluso si cambia el tamaño de la fuente. El tamaño de la fuente debe ser al menos 10 px o más grande que la altura y la altura de la línea, de lo contrario se sesgará nuevamente.

Puedes ver mi JS.Fiddle actualizado aquí . Espero que ayude.