Ajuste del interletraje en CSS

Question

¿Es posible con CSS ajustar el interletraje en CSS? Me gustaría poder kern un bloque de texto de modo que realmente se vea como un bloque de texto (los bordes izquierdo y derecho están alineados).

EDITAR: El uso de http://letteringjs.com/ junto con http://www.kernjs.com/ hace que el kerning sea bastante bueno. En cuanto al problema original, http://fittextjs.com/ lo resuelve muy bien.

Answer 1

cierto control sobre el ajuste entre caracteres se puede lograr en el CSS usando the letter-spacing attribute.

Sin embargo, si todo lo que necesita es "alinear los bordes izquierdo y derecho", puede intentar usar text-align: justify.

EDIT: CSS3 define una propiedad font-kerning que se puede usar para habilitar o deshabilitar el kerning para elementos específicos.

Answer 2

La alineación tipográfica tanto a la izquierda como a la derecha se llama justificación. Kerning es más sobre el ajuste de espacios entre letras, y no tiene mucho que ver con la alineación (porque justificar texto es más ajuste de espacios entre palabras que caracteres). De todos modos, desea establecer la propiedad text-align a justify:

<p style="text-align:justify"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum tincidunt ante mollis ornare. Nulla id 
nulla justo. Mauris quis sapien ac orci consequat accumsan. Quisque iaculis ipsum ac nulla venenatis sagittis. Aliquam 
hendrerit mi a turpis malesuada nec dictum est vehicula. Curabitur quis dolor eu metus malesuada dictum adipiscing et 
risus. Aliquam erat volutpat. Aenean pharetra aliquam magna, fringilla tempus erat iaculis eu. Suspendisse potenti. 
Sed fringilla lobortis viverra. 
</p> 

Answer 3

Como usuario Typeoneerror respondió, letter-spacing hace no influencia kerning. Consulte el concepto de interletraje en Wikipedia.

El kerning no está controlado por espacio entre letras, y no hay fuente-kerning para CSS1 o CSS2. La nueva especificación, CSS3, no ha sido aprobado como un estándar (Recomendación W3C), pero hay una propiedad propuesto para font-kerning, véase 2012 proyecto,

http://www.w3.org/TR/css3-fonts/#font-kerning-prop

Sólo fuentes específicas, como OpenFonts, have this property.

CSS no "controles de interletraje", pero si se utiliza la letra de espaciado "interletraje humana percepción" se puede perder no es cero. Ejemplo: mejorar el interletraje con letter-spacing:-0.1em y perderlo con letter-spacing:0.5em.

Con CSS1 letter-spacing propiedad se puede perdido o mejorar percepción interletraje, y en un "texto de la carta a espacio" se puede simular el interletraje :

<div style="font-size:20pt;background-color:#bcd"> 

    VAST <small>(normal)</small> 
    <br/> 

    <span style="letter-spacing:-0.1em">VAST</span> 
    <small>(enhance perception)</small> 
    <br/> 

    <span style="letter-spacing:0.5em">VAST</span> 
    <small>(lost perception)</small> 
    <br/> 

    <!-- SIMULATE KERNING AT SPACED TEXT --> 
    <div style="letter-spacing:6pt"> 
    SIMULATE: <span style="letter-spacing:4pt">VA</span>ST TEXT 
    </div> 

</div> 

Véase el above example here.

---

EDITAR : No cambió el texto original por encima de hoy, estoy abriendo la respuesta para los cambios (modo Wiki), por proofreading y actualizaciones. Por el momento esta es la respuesta más votada (21 vs 10) y HTML5 will be a recommendation ...¡Por favor, ayuda a mejorar este texto (y/o el texto vinculado de la Wikipedia!).

Answer 4

Revisa mi proyecto Jerning.com [ver a continuación] para el interletraje de texto.

Su uso es muy simple y se basa en pares de caracteres, por ejemplo:

<h1>Hello World</h1> 

El W y o se verá raro y sin interletraje.

Basta con hacer:

$('h1').jerning("Wo", -0.1); 

la que se aplicará el ajuste entre caracteres en mayúsculas entre todos W s y minúsculas o s en h1 etiquetas.

---

me retiró el proyecto Jerning pero por favor, encontrar el código fuente minified a continuación para su inclusión en el proyecto si lo desea:

(function(b){function e(a,c){var d;if(b.isPlainObject(a))d=a;else try{d=b.parseJSON(a)}catch(f){d=b.parseJSON('{"'+a+'":'+c+"}")}return d}function h(a,c){var d="";b(a).replaceWith(b.map(a.nodeValue.split("").reverse(),function(a,e){var g=a;b.each(c,function(c,e){d==c[1]&&a==c[0]&&(g=b.fn.wrapCharacter(a,e))});d=a;return g}).reverse().join(""))}b.fn.wrapCharacter=function(a,b){return'<span style="letter-spacing:'+b+'em">'+a+"</span>"};b.fn.jerning=function(a,c){var d=e(a,c),f=this.contents();b.each(f, 
function(a,c){1==c.nodeType&&b(c).jerning(d);3==c.nodeType&&h(c,d)});return this}})(jQuery); 

Por desgracia, no tienen la versión no minified más; ¡lo anterior no tiene garantías de que todos los casos funcionen!

Answer 5

El kerning, el espaciado de letras (también conocido como tracking) y los bloques de justificación son tres propiedades de tipografía diferentes.

El vínculo más nuevo que encontré sobre kerning es de TypeKit, con instrucciones sobre cómo habilitar los datos de kerning incrustados con sus webfonts. http://blog.typekit.com/2014/02/05/kerning-on-the-web/#comment-19916

Interletraje manual - ajustar el espacio entre cada letra de una palabra - siempre será una cuestión de gusto y preferencia. Y se puede lograr a través de kern.js o kerning.js

Lo que hace que la solución TypeKit se destaque para mí, ¿es posible habilitar el kerning para todo el texto del cuerpo automáticamente utilizando los metadatos en las fuentes OpenType? ¡Lo acabo de encontrar y estoy muy emocionado de usarlo en mi próximo proyecto!

Para facilitar la consulta, las nuevas propiedades CSS discutidos en el enlace son:

text-rendering: optimizeLegibility; 
font-feature-settings: "kern"; 
font-kerning: normal; 

Con prefijos de font-feature-settings incluyendo:

-webkit-font-feature-settings: "kern"; 
    -moz-font-feature-settings: "kern"; 
    -moz-font-feature-settings: "kern=1"; 

Answer 6

Lo que parece ser necesario es el ajuste entre caracteres dinámica, porque lo que el Thread Opener y también estoy/está en necesidad es esto: justify bloquea la alineación, lo mejor posible, al agregar espacio entre las palabras, lo que deja "agujeros" en el bloque de texto. Ahora tome la línea con alineación izquierda (así que no hay espacio adicional), calcule su ancho físico, compare con el ancho disponible del bloque, divida la diferencia a través del número de letras en esa línea, luego use este valor como la adición del espacio de letras. Esto se verá más como un diseño de periódico que solo un texto-alinear: justificar. Debo decir que no estoy seguro de si se puede acceder a las líneas de un bloque de texto "por número de línea" en un diseño de página dinámico, ¿o sí? editar: Lo intenté ayer. Uso innerHTML para leer el contenido de un bloque de texto, luego lo divido y lo copio en una matriz de la cual cada entrada/línea obtiene su propia identificación y etiqueta DIV. Luego ajusto el espacio de letras en consecuencia. Solo algunos de los navegadores más nuevos admiten el espacio de letras de los píxeles de página, por lo que solo funciona con fuentes de tamaño mediano a grande.El problema con el que me encuentro es que, debido a la ausencia de Subpixelsupport, funciona solo hasta cierto punto, aunque es atractivo, así que traté de justificar el resultado con el atributo text-align, pero no funciona después de haber alterado el espacio de letras. Izquierda y derecha la alineación funciona, pero no "justifica", esta funciona solo antes de agregar el espacio de letras. Podría ser un problema de ópera. Si puedo arreglar esto, entonces publicaré el código.

editar 2. funciona ahora pero por alguna razón no puedo publicar el código aquí. eso es del webkit 10.3.3.13 en el móvil. Envíame un mensaje si estás interesado en el código.