Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. VIS Automatisch Text verkleinern wenn Text zu lang

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    UNSOLVED VIS Automatisch Text verkleinern wenn Text zu lang

    This topic has been deleted. Only users with topic management privileges can see it.
    • nik82
      nik82 Most Active last edited by

      Hallo,
      ich mache mir gerade ein VIS für Kodi, ich habe für den Titel das Widget "basic-string" genommen, leider wird bei einer bestimmten Text Größe der Titel abgeschnitten:

      7.JPG

      Ist soweit ja auch klar und verständlich, meine Frage ist jetzt nur, gibt es ein Widget oder eine CSS Möglichkeit das der Text automatisch verkleinert wird wenn dieser nicht in den vorgegebenen Block passt?

      Habe schon gegoogelt und im Forum geschaut, finde aber leider nichts dazu.
      Vielleicht hat da ja jemand eine Idee.
      Danke im Voraus.

      1 Reply Last reply Reply Quote 0
      • SBorg
        SBorg Forum Testing Most Active last edited by SBorg

        @nik82 Da bieten sich eigentlich Bindings an 🙂
        Du änderst "basic-string" in "HTML" ab. Dort gibst du dann als HTML bspw. ein:

        {wert:DATENPUNKT;wert.length < 13 ? "<font size='18'> {DATENPUNKT}</font>" :: "<font size='10'> {DATENPUNKT}</font>"}
        

        DATENPUNKT ersetzt du mit mit der ID des Titels (die {} musst du belassen!).
        Die "13" ist die maximale Länge des Textes in Großschrift (=Aushilfsgang)
        Der Rest bedeutet dann: wenn weniger als 13 Zeichen, schreibe DATENPUNKT in Fontgröße 18, sonst halt in Fontgröße 10

        1 Reply Last reply Reply Quote 1
        • nik82
          nik82 Most Active last edited by

          Ah, perfekt, das probiere ich aus.
          Vielen Dank:-)

          1 Reply Last reply Reply Quote 0
          • nik82
            nik82 Most Active last edited by

            @SBorg
            Habe das jetzt mal probiert, mein HTML Code schaut dann quasi so aus:

            {wert:kodi.0.info.label;wert.length < 13 ? "<font size='28'> {kodi.0.info.label}</font>" :: "<font size='10'> {kodi.0.info.label}</font>"}
            

            Leider bringt er mir immer die gleiche Schrift, also bei "App" die gleiche Schriftart wie bei "Aushilfsgangster" und irgendwas schmeckt ihm nicht mit der Formatierung, denn er zeigt vor dem Titel noch 0"::" an:

            10.JPG

            11.JPG

            Aber jetzt eine Frage, selbst wenn das geht, wird er ja wahrscheinlich Leerzeichen auch mit zählen.
            Das heißt ich hätte (nur als Beispiel) bei dem Film "Ant-Man and the Wasp" auch eine kleine Schriftart, da ich aber mehrere Zeilen habe möchte ich nur eine kleine Schrift wenn ein Wort im kompletten Titel über 13 Zeichen ist.

            Jetzt wirds richtig kompliziert oder? Also ich bräuchte da eher etwas dynamisches, wo quasi das längste Wort an die Breite anpasst.
            Hab jetzt auch im Internet noch ein paar Sachen gelesen mit einem dynamischen Test mit so wie hier:


            <!DOCTYPE html>
            <html>

            <head>
            <meta charset='UTF-8'>

            <title>Dynamische Anpassung der Schriftgröße</title>
            
            <style>
                h1 {
                    font-size: 6.0vw;
                }
                .dynamisch > h2 {
                    font-size: 4.0vw;
                }
                .dynamisch > p {
                    font-size: 2.0vw;
                }
            </style>
            

            </head>

            <body>

            <div id="wrapper">
            
                <h1>Dynamische Anpassung der Schriftgröße</h1>
            
                <section>
                    <div class="dynamisch">
            
                        <h1>Diese Schriftgröße passt sich dynamisch an</h1>
            
                        <p>Diese Schriftgröße passt sich dynamisch an</p>
                        <p>Diese Schriftgröße passt sich dynamisch an</p>
                        <p>Diese Schriftgröße passt sich dynamisch an</p>
                        <p>Diese Schriftgröße passt sich dynamisch an</p>
                        <p>Diese Schriftgröße passt sich dynamisch an</p>
                        <p>Diese Schriftgröße passt sich dynamisch an</p>
                    </div>
                    <div class="statisch">
                        <h2>Diese Schriftgröße passt sich nicht an</h2>
            
                        <p>Diese Schriftgröße passt sich nicht an.</p>
                        <p>Diese Schriftgröße passt sich nicht an.</p>
                        <p>Diese Schriftgröße passt sich nicht an.</p>
                        <p>Diese Schriftgröße passt sich nicht an.</p>
                        <p>Diese Schriftgröße passt sich nicht an.</p>
                        <p>Diese Schriftgröße passt sich nicht an.</p>
                    </div>
            
                </section>
            

            </body>

            </html>

            Aber ich komme da leider auch nicht weiter, dafür hab ich einfach zuwenig HTML oder CSS Kenntnisse.
            Vielleicht hast du ja noch ne Idee 🙂

            SBorg 1 Reply Last reply Reply Quote 0
            • SBorg
              SBorg Forum Testing Most Active @nik82 last edited by

              @nik82 Mist wenn man (=ich) blöd ist... 😉
              Gleich zwei Böcke geschossen...
              Erst mal die Version die funktioniert:

              {wert:kodi.0.info.label;wert.length <13 ? "<div style='font-size: 24px'>"+wert+"</div>" :: "<div style='font-size: 10px'>"+wert+"</div>"}
              

              ...und ja, Leer- und sonstige Zeichen zählen mit. Bin leider auch nicht der HTML/CSS-Spezi, langt nur für den Hausgebrauch. Deswegen dynamischer Text, keine Ahnung...
              Mit Bindings wird das nur sehr schwer möglich, da würde sich eher ein Javascript anbieten. Aber auch das geht nicht so einfach.

              1 Reply Last reply Reply Quote 0
              • nik82
                nik82 Most Active last edited by

                @SBorg
                Vielen Dank, das klappt jetzt. Ist zwar wie schon gesagt nicht genau das was ich Suche, aber schonmal eine gute Hilfe.

                Vielleicht liest ja diesen Threat noch ein Webdesigner der hier noch einen guten Tip geben kann 🙂

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post

                Support us

                ioBroker
                Community Adapters
                Donate

                897
                Online

                31.9k
                Users

                80.1k
                Topics

                1.3m
                Posts

                vis
                2
                6
                674
                Loading More Posts
                • Oldest to Newest
                • Newest to Oldest
                • Most Votes
                Reply
                • Reply as topic
                Log in to reply
                Community
                Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                The ioBroker Community 2014-2023
                logo