Larghezza dei caratteri: fontWidth()

    let font;
let parola = "illuminazione";

async function setup() {
    createCanvas( 670, 200 );
    font = await loadFont( "UbuntuCondensed.ttf" );
    textFont( font, 64 );
    background( 255 );

    let x = 20;
    for (let i = 0; i < parola.length; i++) {
        text( parola.charAt( i ), x, 80 );
        x = x + 36;                     // passo fisso
    }

    x = 20;
    for (let i = 0; i < parola.length; i++) {
        let lettera = parola.charAt( i );
        text( lettera, x, 160 );
        x = x + fontWidth( lettera );   // passo variabile
    }
}

Con un passo fisso ogni lettera occupa lo stesso spazio: le lettere strette restano isolate, quelle larghe si sovrappongono alle vicine.

fontWidth() restituisce lo spazio che la lettera occupa nella riga, con il font e la dimensione impostati. La lettera successiva parte da lì.

Aggiungere qualche pixel fra una lettera e l’altra, ad esempio con x = x + fontWidth( lettera ) + 6;, oppure sostituire la parola con una che alterni lettere strette e larghe.

In p5.js 2 textWidth() misura invece la sola parte disegnata della lettera, senza lo spazio che il font lascia ai lati, e non serve a disporre le lettere una dopo l’altra. In p5.js 1 restituiva lo spazio occupato nella riga, come oggi fontWidth().

Disegnando una lettera alla volta si perde la crenatura, cioè le correzioni che il font applica allo spazio fra alcune coppie di lettere: con questo font e questa dimensione “To” occupa 53 pixel scritta intera e 57 come somma delle due lettere.

Strutturazione dei file:

Approfondimenti: