[gelöst]für VIS html Schriftorientation

liv-in-sky

weiß jmd vielleicht, wie man sowas in einem html widget hinbekommt und einem css eintrag- das ist nur ein beispiel - es soll später in einer tabelle genutzt werden

D
E
Z
E
M
B
E
R

Image 3.png

habe schon rotate getestet -funktioniert zwar, aber dann kann man den hintergrund der spalte nicht mehr ändern und der tesxt geht auch nicht von uben nach unten

es gibt zwar ein css property "text-orientation" - dieses wird aber nicht von der vis erkannt, bzw nur in firefox

jmd eine idee

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

Ich hoffe das hilft dir weiter

MFG
CrunkFX

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

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

@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.