Schriftgröße in Abhängigkeit von Zeichenlänge

[Kuddel]

Hallo zusammen,

Ich lasse im Wohnzimmer auf meiner VIS die Infos vom Echo bzgl. Spotify / TuneIn anzeigen.

Je nach dem wie lang die Info (Interpret und Titel ist) wird sie komplett oder abgeschnitten angezeigt.

Kann man die Schriftgröße in Abhängigkeit der Zeichenanzahl setzen?

[OliverIO]

@kuddel

Theoretisch schon möglich
https://stackoverflow.com/questions/18229230/dynamically-change-the-size-of-the-font-size-based-on-text-length

Allerdings funktioniert das meiner Meinung nach nur wenn sich die Texte nur um wenige Zeichen jeweils von der Länge her unterscheidet. Ansonsten kommst du sehr schnell in den Unleserlichbereich, weil die Schrift einfach nur noch vier Pixel hoch ist oder so.

Besser wäre es einen Scroll Effekt einzubauen, bei dem dann der über lange Text einfach durch rollt.

Am einfachsten wäre das marquee Element. Das ist allerdings deprecated.
Du kannst allerdings mal probieren, ob es dein Browser doch noch unterstützt.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
Der Tabelle nach, tun, dass die meisten Browser noch.

Und dann bleibt dann noch die Lösung mit css Animation
https://blog.hubspot.com/website/scrolling-text-css

[Ro75]

@kuddel sagte in Schriftgröße in Abhängigkeit von Zeichenlänge:

Kann man die Schriftgröße in Abhängigkeit der Zeichenanzahl setzen?

mache es doch umgekehrt. Sage wie lang es maximal sein darf und daraufhin wird der Text in der Länge bestimmt. Das können mal mehr und mal weniger Zeichen sein (wegen der Breite der Zeichen - W und I)

var pixelWidth = require('string-pixel-width');

function TextNorm(sText, sFonts, vFontSize, bBold, bItalic, vPixel) {
    if(vPixel == 0) {
        return sText;
    } else {
        let nText;
        for (let i = 0; i < sText.length; i++) {
            nText = sText.slice(0,i+1);
            const width = pixelWidth(nText, { font: sFonts, size: vFontSize, bold: bBold, italic: bItalic });
            if(width >= vPixel) {
                break;
            }
        }
        return nText;
    }
}

console.log('Das ist mein Beispieltext. Der kann ganz schön lang oder auch kurz sein.", 'Georgia', 12, false, false, 330));

Füge string-pixel-width als zusätzliches NPM in den JS Adapter hinzu.

Ro75.

[OliverIO]

@ro75
er hat wahrscheinlich nur begrenzt platz auf dem bildschirm

und irgendwann ist immer schluss.
das ist wohl der längste songtitel der welt

A song from the Hives EP Oh Lord! When? How?
The full name is "Some People Know All Too Well How Bad Liquorice, Or Any Candy For That Matter, Can Taste When Having Laid Out In The Sun Too Long - And I Think I Just Ate Too Much" from 1996

[Ro75]

@oliverio ich habe mir für Parcel ein Ersatz für den OWL geschaffen. Und dort brauchte ich auch so eine Lösung

hier kann man es sehen wie es arbeitet. Genau so wollte ich es. Ggfs. ist es ja auch für andere nutzbar.

Ro75.