Veröffentlicht in Tutorials.

Kurviger Text entlang einer Form

Finja Wägelein | 11.2022.

Co-Autor(en): Rebecca Wick, Jannik Uhl

In diesem Tutorial erklären wir dir, wie du mit Hilfe von HTML und CSS eine responsive, kurvige Textzeile in deine Webseite einbaust.

Inhalt

Einleitung
Die Basics in HTML
Text entlang einer Form / SVG
CSS Stylesheet
Weitere Variante: Text als Kreis
Quellen

1. Einleitung

Um ein bisschen Abwechslung in deine Webseite zu bekommen, gibt es die Möglichkeit deinen Text kurvig zu gestalten. Dieses Tool eignet sich z.B. gut für Überschriften. Wir erklären dir in diesem Tutorial Schritt für Schritt, wie das geht.

Viel Spaß!

2. Die Basics in HTML

Du beginnst mit dem HTML Grundgerüst.

Wie bei jeder Webseite startest du mit dem Wurzelelement <!DOCTYPE html> und legst die deutsche Programmiersprache mit lang="de" fest.

Darunter sitzt das erste Kindelement <head> , welches für den "Kopfbereich" deiner Webseite steht. Anschließend bindest du den Hauptteil ein mit <body>. Um z.B. das Impressum miteinzubeziehen benötigst du den Tag <footer> ("Fußbereich"), welcher für unser Tutorial nicht relevant ist.

Das Grundgerüst schließt du wieder mit dem Wurzelelement </html> ab.

Merke:
Es ist immer wichtig die Tags mit </...> zu beenden, damit du bei den nächsten Schritten keine Schwierigkeiten bekommst. Je nach Editor, werden dir solche Fehler auch farbig markiert.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kurviger Text entlang einer Form</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>

  </body>
</html>

2.1 <head>

Im <head> fügst du nun die Zeichenkodierung <meta charset="utf-8"> ein. Dabei werden moderne und alte Schriften berücksichtigt, als auch Symbole, Emojis und nicht druckbare Steuerzeichen.

Danach folgt der Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Diese Regel ermöglicht es, dass deine Webseite auch auf den Bildschirmen mobiler Geräte korrekt angezeigt wird.

Der <title> gibt der Webseite einen Namen. Wir nennen sie in diesem Tutorial nun "Kurviger Text entlang einer Form". Diese Bezeichnung erscheint im Reiter deiner Webseite, wenn du sie im Browser öffnest.

Darunter setzt du den Link, der die HTML Datei mit der CSS Datei verknüpft. Dazu empfiehlt sich, die CSS-Datei schon anzulegen.

Du gehst wie folgt vor <link href="style.css rel="stylesheet" type="text/css">.

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Kurviger Text entlang einer Form</title>
        <link href="style.css" rel="stylesheet" type="text/css">
</head>

2.2 <body>

Du gelangst nun zum wichtigsten Element deiner Webseite - dem <body>. Dieser beherbergt üblicherweise den umfangreichsten Teil deines Contents.

<body>   
    
</body>

3. Text entlang einer Form / SVG

Nun wollen wir uns mit unserem eigentlichen Thema beschäftigen.

Um einen kurvigen Text zu erstellen brauchst du etwas, auf dem dieser entlang läuft. Wir nennen dieses "Etwas" einen Pfad. Dieser könnte eine beliebige Form sein, auf die wir den Text drauf setzen. Im besten Fall, sollte dieser dann die Form des Pfades annehmen.

Wer sich mit einigen Gestaltungsprogrammen auskennt weiß, dass diese oft mit sogenannten Scalable Vector Graphics (kurz: "SVG") arbeiten. Dank der Eigenschaften von SVG's lassen sich diese optimal in HTML/CSS einsetzen und bearbeiten. Wir brauchen sie in diesem Tutorial ( <svg> ), um einen Text entlang ihren Pfades anzupassen und somit zu formen.

Für den Fall, dass du dich etwas genauer über SVG's informieren möchtest, haben wir dir eine Seite verlinkt, die das gut erklärt:

Eigenschaften von SVG's

Weiter im Text:

Nachdem du die Basics im HTML angelegt hast, widmest du dich dem <body> , denn genau da baust du deine "Textkurve" ein.

Dein erster Tag, den du hier einfügst lautet: <svg width="1000" height="500", viewBox="0 0 425 300">
Die width (Breite) und height (Höhe) nach dem <svg sind wichtig, denn sie geben der Grafik die Größe, die du möchtest. Ohne diese Angaben, wird das Bild automatisch an deine Seite angepasst.

Das viewBox-Attribut definiert in einem Rechteck die Position (Koordinaten) und die Dimension des sichtbaren Ausschnitts der Grafik. Die viewBox ist Quasi das Fenster, durch das wir unsere Textkurve betrachten wollen. Ohne viewBox wäre deine Grafik statisch fest und könnte sich weder vergrößern, noch verkleinern lassen. Sie wäre also nicht responsiv.

Zusammengefasst:
svg width/height = Größe der Grafik
viewBox = sichtbarer Ausschnitt der Grafik + responsives Verhalten

<body>   
    <svg width="1000" height="500", viewBox="0 0 425 300">
  
    </svg>       
</body>

3.1 <path>

Jetzt bist du am <path>-Attribut mit der zugehörigen ID "curve"angelangt. Der Code lautet wie folgt:

<path id="curve" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145"/>

Den Tag <path> nutzt du, um einen Pfad zu definieren. Dieser beinhaltet das dafür notwendige Attribut 'd', welches für "engl. data" steht und Punkte (Koordinaten), sowie Kommandos festlegt. Sie bestimmen, wie der Pfad zu verlaufen hat.

<body>   
    <svg width="1000" height="500", viewBox="0 0 425 300">
    <path id="curve" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145"/>



    </svg>       
</body>

3.2 <text>

Um deinem Text, der gerade entsteht, eine Größe zu verleihen, verwendest du das Attribut <text font-size="30"> (in diesem Fall z.B. Schriftgröße "30").

<body>   
   <svg width="1000", height="500", viewBox="0 0 425 300">
    <path id="curve" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145"/>
    <text font-size="30">
     
    </text>
    </svg>   
</body>

3.3 <textPath>

Du bist nun am letzten HTML-Tag für die Erstellung deiner Textkurve angelangt. Dem <textPath>. Er beinhaltet eine Verlinkung xlink:href="curve", um deine Kurve jederzeit in CSS optimieren zu können. Damit dein Pfad auch einen Text bekommt, schreibst du diesen nun nach <textPath xlink:href="#curve"> rein und beendest das Ganze mit </textPath>.

<body>   
   <svg width="1000", height="500", viewBox="0 0 425 300">
    <path id="curve" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145"/>
    <text font-size="30">
      <textPath xlink:href="#curve">
        Tutorial von Finja, Beccy & Jannik.
      </textPath>
    </text>
    </svg>      
</body>

Die Grundlagen für unseren kurvigen Text sind soweit vorhanden, doch wie du siehst, braucht er noch etwas Feinschliff. Wie du das aktuelle HTML-Ergebnis gestalterisch über CSS etwas verschönern kannst, zeigen wir dir in den folgenden Abschnitten.

4. CSS Stylesheet

Es wäre möglich in HTML über den Tag <style> direkt mit CSS zu arbeiten. In unserem Tutorial zeigen wir jedoch anhand eines extra angelegten Stylesheets, wie du deinen Textzug gestalten kannst. Diesen haben wir im Optimalfall bereits angelegt.

4.1 path

Zunächst einmal soll der Text sichtbar werden, da dieser noch vom Pfad verdeckt wird. Deshalb geben wir zu erst den Selektor path { } ein. Dort brauchst du die Eigenschaft fill: transparent;diese Regel bewirkt, dass der Path unsichtbar wird und du deinen kurvigen Schriftzug einwandfrei lesen kannst.

Achtung:
Das Semikolon ; am Ende einer Deklaration - hier: transparent- darf nie vergessen werden, da die Regel sonst nicht ausgeführt wird.

path {
  fill: transparent;
}

4.2 body

Damit deine Kurve ein bisschen Farbe und Gestaltung erhält, gibst du den Selektor body { } ein. Unter der Deklaration background legst du deine Hintergrundfarbe fest. Der Wert radial-gradient steht für einen radialen (kreisförmigen) Farbverlauf. Die Eigenschaft radial-gradient(rgb(77, 211, 200),white) steht für die Farbe türkis und weiß. Mit der font-family hast du die Möglichkeit eine Schriftart nach deinem Geschmack anzupassen. Gleiches gilt für die font-size, also die Schriftgröße. Zuletzt kannst du dein Element bzw. deinen Text über die Deklaration text-align, z.B. mit center (zentral), ausrichten.

body {
    background: radial-gradient(rgb(77, 211, 200),white);
    font-family: 'Times New Roman';
    font-size: 30px;
    text-align: center;
    
  }

Das Endergebnis des Codes aus diesem Tutorial.

Das sieht doch schon ganz ordentlich aus. Hier kannst du dich nun gestalterisch austoben und Farbe, Schriftart, Schriftgröße und Position natürlich ganz nach deinem Geschmack anpassen.

5. Weitere Variante: Text als Kreis

Es gibt verschiedene Arten von Kurven, die du erstellen kannst. Sofern du dich ein bisschen ausprobieren möchtest zeigen wir dir hier noch eine weitere Variante.

5.1 HTML Datei

Du legst dein HTML Grundgerüst wie oben beschrieben an. Im Prinzip gehst du gleich vor, wie bei deiner Kurve. Hier handelt es sich jedoch um einen Kreis, weshalb sich der <path> wie folgt abändert:

<path id="circle"

d="M 50,50

m -37,0

a 37,37 0 1,1 74,0

a 37,37 0 1,1 -74,0"/>

Da sich die <path id> oben geändert hat, musst du nun auch den <textPath> anpassen. Du ersetzt also das href="#curve" mit href="#circle". Dann ergibt sich der Tag <textPath xlink:href="#circle">.

<svg width="1000", height="500", viewBox="0 0 100 100">
    <defs>
    <path id="circle" 
            d="M 50,50
               m -37,0
               a 37,37 0 1,1 74,0
               a 37,37 0 1,1 -74,0"/>
    </defs>
    <text font-size="10">
      <textPath xlink:href="#circle">
        Wir wünschen dir ganz viel Freude beim Ausprobieren.
      </textPath>
    </text>
    </svg>

5.2 CSS Stylesheet

Das CSS Stylesheet ist identisch zur obigen Kurve. Daher gehst du wie in Punkt 4 vor.

path {
  fill: transparent;
}

  body {
    background: radial-gradient(rgb(77, 211, 200),white);
    font-family: 'Times New Roman';
    font-size: 30px;
    text-align: center; 
  }

Endergebnis des Codes für die Kreis-Variante

Download Codes

Hier kannst du die Codes für beide Varianten downloaden.

Download HTML Code Download CSS Code

Wir wünschen dir viel Freude beim Ausprobieren und Nachstellen unseres Tutorials. 😊

6. Quellen

Curved Text Along a Path | CSS-Tricks - CSS-Tricks (25.11.22)
Das SVG-Bildformat erklärt – So funktionieren die Vektorbilder (phlow.de) (25.11.22)
https://www.w3schools.com/graphics/svg_path.asp (25.11.22)
SVG viewBox – Koordinaten | mediaevent.de (26.11.22)
https://www.youtube.com/watch?v=MnRxB7Y4T-k (27.11.22)
d - SVG: Scalable Vector Graphics | MDN (mozilla.org) (28.11.2022)

Schlagworte

Vorheriger Artikel
Abstraktion geometischer Formen in p5.js

Enter/Eingabe drücken um die Suche zu starten