Vertikale Überschrift (im header) die zentriert ist und sich links befindet

[Rolf B]

Hallo einsiedler,

nein, du brauchst kein writing-mode. Man kann es bspw. mit einem textPath machen, der an einen vertikalen path gebunden wird:

  <svg viewBox="0 0 50 250" preserveAspectRatio="xMidYMid meet"
       xmlns="http://www.w3.org/2000/svg">
   <path id="verticalPath" fill="none" stroke="none"
         d="M40,250 V0"/>
   <text x="125" text-anchor="middle">
   <textpath href="#verticalPath">Tassilo Sturm</textpath>
   </text>
   <rect x=4 y=4 width=42 height=242 stroke-width="5" stroke="orange" fill="none"/>
  </svg>

Wie man ein solches SVG allerdings korrekt in einen linksseitigen Rahmen einbindet, da muss ein SVG Experte ran. Bei mir skaliert das nicht so wie ich will. Im Fiddle hätte ich gerne, dass das h1 schmaler wird wenn das SVG sich wegen zu geringer Höhe schmaler macht. Sicherlich kann man das mit Media-Queries schaffen, aber dann gibt's Sprünge. Ich suchte eine Lösung mit gleitendem Übergang. Geht das?

https://jsfiddle.net/Rolf_b/25zos9c1/

Rolf