Text auf einem Kreis

Es gibt keine super einfache standardisierte Methode, Web-Typografie auf einem Kreis (oder einer beliebigen Kurve) zu setzen. Aber es ist machbar! Hier werden wir eine Methode erkunden. Aber sei gewarnt, wir werden etwas CSS3 und JavaScript verwenden und uns nicht darum kümmern, ältere Browser, die einige der benötigten Technologien nicht unterstützen. Wenn Sie an so etwas für ein echtes Projekt interessiert sind, ist diese Art von Dingen wahrscheinlich immer noch am besten mit einem Bild mit richtigem Alt-Text oder einer ordnungsgemäßen Feature-Erkennung bedient, die das Bild für diese ausgefallene Technik in Browsern, die sie bewältigen können, umschalten kann.

Ein Beispiel

Gehen wir etwas Einfacheres vor.

Der gesamte Prozess

Nehmen wir als Beispiel einen einfachen Satz

Stellen Sie sich vor, wir würden die Wörter, die wir in einem Kreis setzen wollten, nehmen und in einzelne Buchstaben zerlegen.

Stellen wir sicher, dass jede Box exakt gleich groß ist, indem wir eine nichtproportionale Schriftart verwenden.

Machen wir nun jede dieser Boxen lang, wie ein Fahrradspeiche.

Dann bündeln wir all diese Speichen, sodass sie übereinander liegen.

Stellen Sie sich nun vor, wir befestigen die Enden dieser Speichen an einer zentralen Nabe. Wir drehen jede Speiche ein kleines bisschen mehr als die letzte.

Wenn wir das übergeordnete Element gegen den Uhrzeigersinn drehen und unsere roten Hilfslinien entfernen, haben wir etwas Text auf einem Kreis!

Technische Details

Um jeden Buchstaben so manipulieren zu können, müssen Sie ihn in ein anderes Element einpacken. Lettering.js kann das einfach für Sie erledigen (jQuery und Plugin-Abhängigkeit).

Sie haben also das hier.

<h1>Established 2012</h1>

Sie laden jQuery und Lettering.js und rufen dann dies auf

$("h1").lettering();

Und es wird im DOM zu diesem hier

<h1>
  <span class="char1">E</span>
  <span class="char2">s</span>
  <span class="char3">t</span>
  <span class="char4">a</span>
  <span class="char5">b</span>
  <!-- you get the idea -->
</h1>

Das funktioniert wirklich nur gut mit nichtproportionalen Schriftarten. Selbst wenn Sie die Nichtproportionalität erzwingen, indem Sie jeden Span eine feste Breite geben, ist der Abstand zwischen den Buchstaben falsch und es sieht seltsam aus. Sie könnten es manuell mit Kerning versehen, indem Sie jede Drehung manuell anpassen, wenn Sie verrückt wären.

Für jeden Span möchten Sie die Höhe festlegen, alle an derselben Stelle positionieren und dann den transform-origin auf den unteren Rand der Box setzen (damit sie sich um diese Nabe drehen. Herstellerpräfix hinzufügen).

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

Jetzt brauchen Sie eine ganze Menge Klassenauswähler, die jeweils ein bisschen mehr drehen.

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* and so on */

Siehe den Pen Set Text on a Circle – 2012 von CSS-Tricks (@css-tricks) auf CodePen.

Aber das kann mühsam und unübersichtlich werden. Mit Sass und Compass ist es ein Drei-Zeiler

@for $i from 1 through 100 
  .char#{$i} 
    +transform(rotate(($i*6)+deg))

Update

Hier ist ein Sass (.sass) Mixin von Chris Eppstein für ein erweiterbareres Textrotations-Mixin

=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg)
  $angle-per-char: $angle-span / $num-letters;
  @for $i from 1 through $num-letters
    .char#{$i} 
      +transform(rotate($angle-offset + $angle-per-char * $i))