2010-10-19 33 views
5

Estoy usando JavaScript para inflar un lapso de texto alineado a la izquierda hasta que llena su contenedor, o hasta que alcanza umbrales variables en altura o ancho. Este proceso da como resultado una amplia variación de font-size.Alineación de texto con precisión de píxeles

Mi problema es que, con ciertos caracteres, hay una pequeña cantidad de relleno a la izquierda ... y aunque normalmente no se nota, con tamaños de letra muy grandes puede llegar a 10 píxeles o más.

me prepararon rápidamente una página para demostrar el efecto de diversos personajes: http://jsfiddle.net/kBu7S/

El fragmento de texto existe en un diseño en el que todos los demás elementos de bajar la página está alineado píxel por píxel al borde izquierdo, por lo que es muy distracción visual con los tamaños de texto más grandes.

¿Alguien puede pensar en una forma de calcular la cantidad de relleno, para que pueda encontrar la posición relativa del tramo? ¿O tal vez incluso hay una solución de CSS? (letter-spacing y word-spacing no tienen ningún efecto.)

Admitiré que incluso una solución sucia parece bastante improbable ... gracias por su consideración.

Respuesta

3

El relleno a menudo se denomina el "hombro" del tipo, y es intrínseco al diseño del tipo de letra. No hay una forma simple de contrarrestarlo, porque está ahí por razones ópticas, para darle al tipo el espaciado correcto. Después de todo, si escribe IIIIIII, necesita tener un espacio entre las mayúsculas, y eso solo proviene de este relleno. Otros personajes, como WWWWWW, no necesitan ninguno.

Su mejor opción es hacer un experimento con su tipo de letra, y medir el relleno real de cada carácter, luego crear una tabla de caracteres de mapeo en sus rellenos. Entonces puedes ajustar la posición del personaje. Esto es mucho trabajo, pero no sé qué más puedes hacer.

+0

¡Hombro! Así es como se llama. Ni siquiera puedo decirte cuántas maneras diferentes traté de googlear el nombre de ese relleno. Acabo de llegar a casa del trabajo, pero su idea sobre el mapeo de los diferentes hombros (¿tal vez en porcentajes?) Es un buen punto de partida para la mañana ... – JKS

+0

¿No sería eso solo un trabajo local? – Ben

+0

"localmente"? No estoy seguro de lo que quieres decir. –

0

Bueno, podría construir un script para generar una imagen usando el mismo tipo de letra con el mismo tamaño (negro sobre fondo blanco) y leer el mapa de bits para contar la distancia desde el borde izquierdo al primer píxel negro.

Es un poco exagerado, pero es lo único que se me ocurre.

+0

toda esta pregunta es un poco exagerado :) gracias por la idea. – JKS

1

Esto funcionó en el violín:

#text:first-letter { margin-left:-3px}

Se podría ampliar a una clase que ...

.fontCorrection:first-letter { margin-left:-3px }

... y aplicarlo en su caso.

+0

No funcionó para mí. Cambié las letras a la izquierda, pero si creces su tamaño, todavía hay una cantidad variable de espacio. – davr

+0

Luego use Javascript para alterar la regla de CSS en la función de aumento. ¿Dónde está tu solución? – Ben

+0

En realidad '#text: first-letter {margin-left: -0.05em; } 'no es una mala aproximación, pero aún no lo suficientemente cerca. gracias por la idea ... – JKS

Cuestiones relacionadas