Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [gelöst]für VIS html Schriftorientation

    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

    [gelöst]für VIS html Schriftorientation

    This topic has been deleted. Only users with topic management privileges can see it.
    • CrunkFX
      CrunkFX Forum Testing @liv-in-sky last edited by CrunkFX

      @liv-in-sky
      Ich hab dir da mal was gebaut, ich verwende ein kleines Javascript in dem HTML Code welches den Text nach jedem Buchstaben mit einem Zeilenumbruch ausstattet. Um dir das besser zu veranschaulichen, hab ich mal eine kleine Tabelle vorbereitet.

      Die eigentliche Funktion besteht aus:

      CSS Teil:

      yourtext span {
                  display: block;
                  }
      

      Skript

      
      var text = document.getElementsByTagName('yourtext')[0];
      text.innerHTML = '<span>' + text.innerHTML.split('').join('</span><span>') + '</span>';
      
      

      Verwendung

      <yourtext>Oktober</yourtext>
      

      Beispiel:

      <head>
          <style>
              yourtext span {
                  display: block;
              }
      
              #table1 td,
              th {
                  border: 1px solid #999;
                  padding: 0.5rem;
              }
          </style>
      </head>
      
      <body>
          <table id="table1" class="blueTable">
              <thead>
                  <tr>
                      <th></th>
                      <th>Wetterwerte</th>
                      <th colspan="3">2020</th>
                  </tr>
                  <tr>
                      <td rowspan="4" style="font-size:26px">
                          <yourtext>Oktober</yourtext>
                      </td>
                      <td>Durchschnitt</td>
                      <td>23°C</td>
                      <td>74°F</td>
                      <td>10%</td>
                  </tr>
                  <tr>
                      <td>Minimum</td>
                      <td>18°C</td>
                      <td>68°F</td>
                      <td>2%</td>
                  </tr>
                  <tr>
                      <td>Maximum</td>
                      <td>31°C</td>
                      <td>91°F</td>
                      <td>30%</td>
                  </tr>
                  <tr>
                      <td>Mirfällnixein :)</td>
                      <td>200°C</td>
                      <td>542°F</td>
                      <td>1000%</td>
                  </tr>
          </table>
          <script>
              var text = document.getElementsByTagName('yourtext')[0];
              text.innerHTML = '<span>' + text.innerHTML.split('').join('</span><span>') + '</span>';
          </script>
      </body>
      
      

      Ergebnis
      e76d9006-c8b3-4ac6-86d6-a2ea070fa74c-image.png

      Ich hoffe das hilft dir weiter

      MFG
      CrunkFX

      liv-in-sky 1 Reply Last reply Reply Quote 3
      • liv-in-sky
        liv-in-sky @CrunkFX last edited by

        @CrunkFX

        klasse idee - danke dir

        habe aber noch ein schönheitsproblem

        damit es gut aussieht, brauche ich schriftart monospace - also Nichtproportionale Schriftart

        Image 1.png Image 2.png

        habe es etwas anders umgesetzt - liegt es daran

        let choseMonthArr=choseMonth.split('')
        let test=""
        for (let i=0;i<choseMonthArr.length;i++){
            log(choseMonthArr[i])
            test=test+choseMonthArr[i]+`
            `    
        }
        

        hast du da vielleicht eine idee dazu ?

        CrunkFX Homoran 2 Replies Last reply Reply Quote 0
        • CrunkFX
          CrunkFX Forum Testing @liv-in-sky last edited by

          @liv-in-sky Da fällt mir was ein:

          <head>
              <style>
                  #badlyalignedtext{
                      text-align: center; 
                      vertical-align: middle;
                  }
              </style>
          </head>
          <body>
                  <td id="badlyalignedtext" rowspan="4" style="font-size:26px">
                  <yourtext>Oktober</yourtext>
                  </td>
          </body>
          

          Also weise dem <td> die CSS Eigenschaft zu die ich hier Stilvoll badlyalignedtext genannt hab. Das sollte klappen.

          1 Reply Last reply Reply Quote 2
          • Homoran
            Homoran Global Moderator Administrators @liv-in-sky last edited by Homoran

            @liv-in-sky sagte in für VIS html Schriftorientation:

            hast du da vielleicht eine idee dazu ?

            als absoluter Laie würde ich sagen, das muss zentriert werden

            edit: scheint @CrunkFX cschon schneller gesehen zu haben 😉

            CrunkFX 1 Reply Last reply Reply Quote 0
            • CrunkFX
              CrunkFX Forum Testing @Homoran last edited by

              @Homoran Du bist auf dem richtigen Weg 😉

              Homoran liv-in-sky 2 Replies Last reply Reply Quote 0
              • Homoran
                Homoran Global Moderator Administrators @CrunkFX last edited by

                @CrunkFX da haben wir uns überschnitten, am Tablet ist alles was langsamer

                1 Reply Last reply Reply Quote 1
                • liv-in-sky
                  liv-in-sky @CrunkFX last edited by

                  @CrunkFX

                  genial - vielen dank

                  Image 3.png

                  Image 4.png

                  CrunkFX 1 Reply Last reply Reply Quote 1
                  • CrunkFX
                    CrunkFX Forum Testing @liv-in-sky last edited by

                    @liv-in-sky Wunderbar, auch ich hab mal wieder was dazu gelernt 😊 🤙

                    liv-in-sky 2 Replies Last reply Reply Quote 0
                    • liv-in-sky
                      liv-in-sky @CrunkFX last edited by

                      @CrunkFX

                      das ganze script - falls interesse

                      https://forum.iobroker.net/topic/38286/vis-tabelle-für-wlan-wetterstation

                      1 Reply Last reply Reply Quote 1
                      • liv-in-sky
                        liv-in-sky last edited by

                        @Negalein

                        ist im thread upgedatet - aber diesmal musst du deine settings rüberkopieren

                        Negalein 1 Reply Last reply Reply Quote 0
                        • Negalein
                          Negalein Global Moderator @liv-in-sky last edited by

                          @liv-in-sky sagte in [gelöst]für VIS html Schriftorientation:

                          ist im thread upgedatet - aber diesmal musst du deine settings rüberkopieren

                          perfekt
                          Danke dir/euch

                          1 Reply Last reply Reply Quote 0
                          • liv-in-sky
                            liv-in-sky @CrunkFX last edited by

                            @CrunkFX ich muss aber auch sagen - das mit dem innerhtml ist auch eine coole lösung - schönen abend

                            CrunkFX 1 Reply Last reply Reply Quote 0
                            • CrunkFX
                              CrunkFX Forum Testing @liv-in-sky last edited by

                              @liv-in-sky Das kam mir so in den Sinn😊 . Auch dir nen schönen Abend

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

                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              869
                              Online

                              31.9k
                              Users

                              80.1k
                              Topics

                              1.3m
                              Posts

                              vis
                              4
                              14
                              817
                              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