ridículo problema de visualización de fuente grande. fontSize rompe palabras por todas partes

Question

Estoy escribiendo un objeto Slideware de método Lessig en JavaScript (algo divertido, no importante), y sigo encontrando extrañas anomalías en el diseño del texto, que no puedo decir que haya visto. . Y, sin embargo, son penetrantes en mis diapositivas.

El fondo es sencillo. La presentación tiene diapositivas y las diapositivas tienen líneas. Una línea, podría ser una palabra o una frase, y en las imágenes que estoy vinculando, las diapositivas tienen tres líneas.

La presentación " pantalla " es la ventana de visualización de la ventana del navegador. La propiedad de altura de línea CSS de cada línea se calcula por la altura de la vista dividida por el número de líneas. Cada línea es un div con un tamaño de fuente cómodamente debajo de la altura de la línea (90%, pero configurado en px).

Una diapositiva atractiva se parece a la primera en esta página: bbby.org/share/so_pics.html

(solo puedo agregar un enlace).

Aquí es donde se pone raro: Debido a que todo se calcula en función del tamaño de la ventana gráfica, tener la consola Firebug activada o cambiar al modo de pantalla completa ajusta el tamaño de todo (al actualizar). En algunos casos, las primeras una o tres letras de una palabra se desplazan hacia la izquierda de la pantalla y se apilan unas encima de otras. Lo único diferente es que pasé a pantalla completa y actualicé (y se calcularon nuevos tamaños).

Dependiendo del modificador de tamaño de fuente que configuré (90%, 80%, pero nuevamente configurado en px), podría ocurrir en una vista normal (no en pantalla completa).

¿Alguien ha visto algo así antes?

Answer 1

Es curioso que haya insignias para trolling. Odio ver que este sitio se convierta en el nuevo youtube o se publique el failblog en nuestros comentarios.

Aparte de eso, el efecto es controlable (aunque todavía no se explica). Al ajustar el tamaño de fuente a través del script, puedo ver en qué punto se desmoronan ciertas letras de las palabras.

Por ejemplo, en un div con lineHeight = 269, las letras " ri " de la palabra " derecha " vuela como se muestra en la publicación original con fontSize > = 209, pero nada debajo. La letra & Quot; l & Quot; en la palabra " izquierda " tiene un número mayor, posiblemente aumentado porque " f " también es una letra alta.

Para una solución actual consistente para este problema muy real y problemático (tyvm), estoy configurando el atributo fontSize para que sea el 73% de lineHeight en el contenedor principal.