Community Forum

Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

NEWS

Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
B
Bluefox

17

1

3.3k
Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
B
Bluefox

13

1

1.1k
Weihnachtsangebot 2025! 🎄
B
Bluefox

25

1

2.4k

[gelöst]für VIS html Schriftorientation

14 Posts 4 Posters 1.2k Views 4 Watching

@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

Ich hoffe das hilft dir weiter

MFG
CrunkFX

wrote on

#3

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 ?

L liv-in-sky
@CrunkFX

klasse idee - danke dir

habe aber noch ein schönheitsproblem

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

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 ?
C Offline
C Offline
CrunkFX
Forum Testing
wrote on last edited by

#4
@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.
Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
1 Reply Last reply

2
L liv-in-sky
@CrunkFX

klasse idee - danke dir

habe aber noch ein schönheitsproblem

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

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 ?
H Do not disturb
H Do not disturb
Homoran
Global Moderator Administrators
wrote on last edited by Homoran

#5

@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 ;-)
kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -
C 1 Reply Last reply

0
H 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 ;-)
C Offline
C Offline
CrunkFX
Forum Testing
wrote on last edited by

#6

@Homoran Du bist auf dem richtigen Weg :wink:
Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
H L 2 Replies Last reply

0
C CrunkFX

@Homoran Du bist auf dem richtigen Weg :wink:
H Do not disturb
H Do not disturb
Homoran
Global Moderator Administrators
wrote on last edited by

#7

@CrunkFX da haben wir uns überschnitten, am Tablet ist alles was langsamer
kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -
1 Reply Last reply

1
C CrunkFX

@Homoran Du bist auf dem richtigen Weg :wink:
L Offline
L Offline
liv-in-sky

wrote on last edited by

#8

@CrunkFX

genial - vielen dank
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
C 1 Reply Last reply

1
L liv-in-sky

@CrunkFX

genial - vielen dank
C Offline
C Offline
CrunkFX
Forum Testing
wrote on last edited by

#9

@liv-in-sky Wunderbar, auch ich hab mal wieder was dazu gelernt :blush: :call_me_hand:
Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
L 2 Replies Last reply

0
C CrunkFX

@liv-in-sky Wunderbar, auch ich hab mal wieder was dazu gelernt :blush: :call_me_hand:
L Offline
L Offline
liv-in-sky

wrote on last edited by

#10

@CrunkFX

das ganze script - falls interesse

https://forum.iobroker.net/topic/38286/vis-tabelle-für-wlan-wetterstation
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
1 Reply Last reply

1
L Offline
L Offline
liv-in-sky

wrote on last edited by

#11

@Negalein

ist im thread upgedatet - aber diesmal musst du deine settings rüberkopieren
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
N 1 Reply Last reply

0
L liv-in-sky

@Negalein

ist im thread upgedatet - aber diesmal musst du deine settings rüberkopieren
N Offline
N Offline
Negalein
Global Moderator
wrote on last edited by

#12

@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
° Node.js & System Update ---> sudo apt update, iob stop, sudo apt full-upgrade
° Node.js Fixer ---> iob nodejs-update
° Fixer ---> iob fix
1 Reply Last reply

0
C CrunkFX

@liv-in-sky Wunderbar, auch ich hab mal wieder was dazu gelernt :blush: :call_me_hand:
L Offline
L Offline
liv-in-sky

wrote on last edited by

#13

@CrunkFX ich muss aber auch sagen - das mit dem innerhtml ist auch eine coole lösung - schönen abend
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
C 1 Reply Last reply

0
L liv-in-sky

@CrunkFX ich muss aber auch sagen - das mit dem innerhtml ist auch eine coole lösung - schönen abend
C Offline
C Offline
CrunkFX
Forum Testing
wrote on last edited by

#14

@liv-in-sky Das kam mir so in den Sinn:blush: . Auch dir nen schönen Abend
Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
1 Reply Last reply

0

Log in to reply

Support us

640

Online

32.7k

Users

82.3k

Topics

1.3m

Posts