A jugar con «span»: logos de LyX, LaTeX y XeTeX en wordpress

En este blog hablo mucho sobre LYX, LATEX y XƎTEX, mencionando cada tanto las «cajas TEX» y demás. El artículo de hoy es para mostrar cómo logro los «logos» correspondientes sin utilizar esos programas, solo con HTML puro y duro.

En HTML, a través del uso de entornos «span» podemos pasar parámetros al texto para cambiar cosas como el tamaño, la posición vertical y la distancia horizontal entre los caracteres (el kerning). Ahora bien, primero que nada debemos saber qué valores necesitamos.

Hace un tiempo descubrí una página en la wiki de LYX que indica cómo construir el «logo» del programa en LATEX. La instrucción es la siguiente

L\kern-.1667em\lower.25em\hbox{Y}\kern-.125emX\@

Allí vemos que la Y que viene luego de la L tendrá un kerning negativo y que tiene que ser «bajada», para finalmente hacer que la X también tenga un kerning negativo. Traduciendo esto a HTML (código que tenemos que copiar en el editor HTML de WordPress) obtenemos

L<span style="vertical-align: -0.25em; margin-left: -0.125em; 
   margin-right: -0.125em;">Y</span>X

lo cual nos da lo que queremos: LYX.

NOTA IMPORTANTE: Por motivos de presentación he quebrado el código en varias líneas, pero es mejor ponerlo todo en una sola. Lo mismo vale para los próximos ejemplos de código.

Viendo que esto funcionaba fue solo cuestión de un poco de prueba y error para obtener

TEX

T<span style="vertical-align: -0.5ex; margin-left: -0.1667em; 
   margin-right: -0.125em;">E</span>X

o LATEX

L<span style="font-size: 70%; margin-left: -0.36em; 
   vertical-align: 0.3em; line-height: 0; 
   margin-right: -0.15em;">A</span>
   T<span style="margin-left: -0.1667em; vertical-align: -0.5ex; 
   line-height: 0; margin-right: -0.125em;">E</span>X

Más complicado ha sido el logo de XƎTEX. Para la «E invertida» he utilizado el carácter Ǝ, U+018E, por lo que en principio el siguiente código debería funcionar

X<span style="margin-left: -0.1667em; vertical-align: -0.5ex; 
   line-height: 0; margin-right: -0.125em;">Ǝ</span>
   T<span style="margin-left: -0.1667em; vertical-align: -0.5ex; 
   line-height: 0; margin-right: -0.125em;">E</span>X

Digo en principio porque no todas las fuentes tipográficas ofrecen este carácter: si el carácter falta el navegador utilizará una fuente substitutiva para el mismo. No creo que sea necesario el comentar que en ese caso la meticulosa alineación indicada por el código se irá al demonio. En esta madriguera hispana utilizo la fuente tipográfica Vollkorn que es lo suficientemente completa, pero siempre hay que prestar atención a estos detalles.

Y esas cosas.

4 comentarios en “A jugar con «span»: logos de LyX, LaTeX y XeTeX en wordpress

  1. No lo he comprobado pero creo que para invertir la E puede usarse la propiedad de CSS:
    transform: scaleX(-1);

    • ¡Gracias por comentar, Cesítar! No estoy muy seguro, pero creo que scaleX sirve para cambiar la escala horizontal de objetos (imágenes, por ejemplo) por lo que no sé si se puede utilizar con texto. Al menos recién probé en el editor de WordPress y no hace nada 😦

      Saludos

      • He hecho algunas pruebas con «transform». Estas son mis conclusiones:

        Si se utiliza en un «formato de párrafo» funciona directamente. Pero en «formatos de carácter», como es este caso (la primera E de XETEX), hay que indicar también: position: absolute;

        Pero no podía ser tan fácil…

        La posición absoluta hace que no se genere el espacio entre los caracteres circundantes (X-T). Lo podemos solucionar de dos maneras:
        · insertando el mismo carácter que deseamos espejar (E) pero aplicándole un estilo de invisibilidad: visibility: hidden;
        · aplicando un estilo al carácter previo (X) y jugando con la cantidad de su margen derecho: margin-right: 0.75em;

        También hay que tener en cuenta que el carácter transformado (E) se dibujará sobre el de su derecha (T). Lo podemos solucionar jugando con la cantidad del margen izquierdo del carácter transformado (E): margin-left: 0.75em;

        Además, parece que «transform» baja un pelín la línea base del carácter (E). Se soluciona jugando con la cantidad de su margen superior: margin-top: -0.01em;

        Así explicado es un poco confuso. Lo mejor es verlo en la práctica. En el siguiente enlace está el código de mis pruebas. Pinchando en «Run» se ve el resultado. Puedes hacer modificaciones y probarlas.

        https://www.w3schools.com/code/tryit.asp?filename=FPG7RFOITE1M

Los comentarios están cerrados.