Textgröße automatisch skalieren

Diskutiere Textgröße automatisch skalieren im JavaScript Forum im Bereich Programmierung; Hallo, ich stehe seit längerem vor der Aufgabe eine Seite zu erstellen, wo sich der Text ständig ändert ("Zeichenlänge") den Text bekomme ich von...
  • Textgröße automatisch skalieren Beitrag #1
A
andiregehr
New member
Beiträge
2
Punkte Reaktionen
0
Hallo,
ich stehe seit längerem vor der Aufgabe eine Seite zu erstellen, wo sich der Text ständig ändert ("Zeichenlänge") den Text bekomme ich von einem Webserver.
Mein Problem ist das die Seite keine Scrollbar haben darf (gelöst indem ich es über CSS im Bodytag gesperrt habe) und die Schriftgröße immer so groß wie möglich sein muss.
Und das am besten auf unterschiedlichen Geräten sprich ich bräuchte eine Berechnung für die Schriftgröße.
Hat jemand eine Idee wie man das angehen könnte, ich hoffe der Text ist verständlich.
Code:
<!DOCTYPE html>

<html lang="de">

<head>

  <title> Anzeige </title>

  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <style>



  html{

    background-color: white;

  }

  body {

  overflow: hidden;

  }

  .Box{

    position: absolute;

    top: 12%;

    width: 99%;

    height:90%;

  }

  .input{

    display: flex;

    color: black;

    align-content: center;

    justify-content: center;

    align-items: center;

    height: 75%;

  }

  </style>

</head>



<!----------------------------HTML--------------------------->

<body>



<div class="Box">

     <span class="input" id="Value"></span>

</div>

 

 

<!-------------------------JavaScrip------------------------->

  <script>

    setInterval(function()

    {

      View();

    }, 1000);

    //-------------------------------------------------------

    function View()

    {

      var ViewvalRequest = new XMLHttpRequest();

      ViewvalRequest.onreadystatechange = function()

      {

        if(this.readyState == 4 && this.status == 200)

        {

          document.getElementById("Value").innerHTML = this.responseText;

        }

      };

      ViewvalRequest.open("GET", "data", true);

      ViewvalRequest.send();

    }

  </script>

</body>

</html>
 
Zuletzt bearbeitet:
  • Textgröße automatisch skalieren Beitrag #2
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Hallo und willkommen im Forum!
Ja, der Text ist verständlich, interessante Aufgabe.
ich bräuchte eine Berechnung für die Schriftgröße.
Die gibt es, siehe hier:
https://developer.mozilla.org/en-US...nderingContext2D/measureText?retiredLocale=de
Allerdings nur in Canvas weil sie i. allg. nur dort gebraucht wird. Und sie ist nur für einzeiligen Text brauchbar, d. h. hilft in deinem Fall nicht viel weiter.
Eine Alternative über das DOM wird auch erwähnt: Den Text in ein div schreiben und dessen Größe ermitteln. Das funktioniert auch bei mehrzeiligem Text, allerdings nur, wenn man den Font vorgibt und die Abmessungen wissen will.
Ich sehe da nur die Möglichkeit, es auszuprobieren, natürlich nicht von Hand, sondern durch das Skript: Von einer mittleren Schriftgröße ausgehen und dann, abhängig davon ob der Text in den Container hinein passt, die Schriftgröße schrittweise verändern bis man den optimalen Wert gefunden hat.

BTW: Code besser in Codetags posten, hier ein wenig versteckt das Symbol </>:
1704299201344.png
 
Zuletzt bearbeitet:
  • Textgröße automatisch skalieren Beitrag #3
W
Webdesigner
Active member
Beiträge
35
Punkte Reaktionen
0
Ich halte es auch für in kurzer Zeit machbar, die Textlänge und die enthaltenen Zeichen per PHP zu analysieren und dann die Schriftgröße jeweils per PHP anzupassen.
 
  • Textgröße automatisch skalieren Beitrag #4
A
andiregehr
New member
Beiträge
2
Punkte Reaktionen
0
Danke für die Hinweise, ich habe eine Lösung gefunden über ein jQuery plugin.

jQuery Boxfit v1.2.4​

 
Thema:

Textgröße automatisch skalieren

Oben Unten