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

Weihnachtsangebot 2025! 🎄
B
Bluefox

22

1

1.1k
UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
A
apollon77

48

3

9.1k
Monatsrückblick – September 2025
B
Bluefox

14

1

2.4k

[gelöst]für VIS html Schriftorientation

14 Beiträge 4 Kommentatoren 1.1k Aufrufe 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

schrieb am

#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
schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

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 Nicht stören
H Nicht stören
Homoran
Global Moderator Administrators
schrieb am zuletzt editiert von 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 Antwort Letzte Antwort

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
schrieb am zuletzt editiert von

#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 Antworten Letzte Antwort

0
C CrunkFX

@Homoran Du bist auf dem richtigen Weg :wink:
H Nicht stören
H Nicht stören
Homoran
Global Moderator Administrators
schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

1
C CrunkFX

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

schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

1
L liv-in-sky

@CrunkFX

genial - vielen dank
C Offline
C Offline
CrunkFX
Forum Testing
schrieb am zuletzt editiert von

#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 Antworten Letzte Antwort

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

schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

1
L Offline
L Offline
liv-in-sky

schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

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
schrieb am zuletzt editiert von

#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: 20.17.0 NPM: 10.8.2
° Proxmox, Ubuntu 22.04.3 LTS
° Fixer ---> iob fix
1 Antwort Letzte Antwort

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

schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

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
schrieb am zuletzt editiert von

#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 Antwort Letzte Antwort

0

Anmelden zum Antworten

Support us

755

Online

32.5k

Benutzer

81.6k

Themen

1.3m

Beiträge