Modificar fuentes con JavaScript y Plumin.js

Gracias a CSS, hay muchas opciones para editar texto. También puede usar fuentes personalizadas a través de fuentes web. La biblioteca de JavaScript Plumin.js va un paso más allá. Le permite manipular una fuente dentro de un sitio web. Los símbolos pueden ser reemplazados por formas individuales.

Elegir una fuente y manipular letras

Si bien la mayoría de las bibliotecas de JavaScript requieren que acceda a los elementos HTML en los que desea que se use la biblioteca, este no es el caso para ciruela.js. Aquí, se aborda una fuente que desea manipular con la biblioteca. Los cambios realizados tienen efecto en todas las áreas de uso de la fuente en el documento.

En primer lugar, se crea un espacio de dibujo HTML5 invisible, que Plumin.js utiliza internamente.

<canvas id="plumin-canvas" width="1024" height="1024" hidden />

En el siguiente paso, la biblioteca accede a dicho espacio de dibujo.

plumin.paper.setup("plumin-canvas");

Posteriormente, se crea una función. Con esta función se definen la fuente y los símbolos que serán reemplazados, así como las formas que reemplazarán a los símbolos anteriores.

(function(p) {
  …
})(plumin)

Todo lo que sucede después tiene que estar ubicado dentro de esta función. Primero, se debe ingresar el nombre de la fuente que desea modificar.

var schrift = p.Font({
  familyName: "NameOfTheFont",
  ascender: 800,
  descender: -200
});

„familyName“ define el nombre de la fuente. Opcionalmente, puede ingresar valores para el „ascendente“ y el „descendente“ de la fuente. Esto ayuda con el posicionamiento de las formas.

A continuación, elegiremos los símbolos que queremos reemplazar con formularios personalizados. Para ello, se añade un nombre a cada símbolo. A través de «unicode», elige el símbolo y a través de «advanceWidth» elige el ancho de ese símbolo.

var A = p.Glyph({
  name: "A",
  unicode: "A",
  advanceWidth: 500
});

En este ejemplo, la letra A se agrega a la variable „A“. En el tercer paso, diseñamos una forma que pretende reemplazar el símbolo.

var formA = p.Path.RegularPolygon({
  center: [250, 350],
  sides: 3,
  radius: 350
});

formA.rotate(180);

Aquí, estamos creando un triángulo equilátero a través de „RegularPolgyon()“. El centro de la forma se define mediante «centro», el número de lados mediante «lados» y el radio mediante «radio». Luego, este triángulo se gira por „rotar()“, de modo que el pico apunte hacia arriba.

A continuación, asignamos la forma a la letra A.

A.addContour(formA);

En el último paso, agregaremos todas las letras editadas a la fuente.

font.addGlyphs([A]).updateOTCommands().addToFonts();

Ahora, cada vez que se usa la fuente en el documento, la A grande se reemplaza por el triángulo que construimos a través de Plumin.js.

Un ejemplo de un texto alterado con Plumin.js

Buen juguete que es útil en proyectos adecuados

Por supuesto, Plumin.js se puede usar como un juguete como se hace en el sitio web de la biblioteca. Sin embargo, también se puede usar para reemplazar ciertos símbolos con íconos personalizados para renunciar a una fuente web. Plumin.js se distribuye bajo la licencia MIT y no requiere bibliotecas de JavaScript adicionales como, por ejemplo, jQuery. La licencia MIT permite el uso gratuito para fines personales y comerciales, incluidos los proyectos de los clientes.

La documentación en el sitio web es bastante deficiente. Sin embargo, se muestran algunos buenos ejemplos y se agregan al paquete de descarga para darle una buena idea de la biblioteca.

(dpe)