Mit CSS Text in einem Kreis anordnen

Möchtest du mit HTML und CSS Text innerhalb der Form eines Kreises setzen? Das ist doch verrückt, oder?

Nicht wirklich! Dank shape-outside und etwas reiner CSS-Trickerei ist es möglich, genau das zu tun. 

Allerdings kann dies eine knifflige Layout-Option sein. Wir müssen viele verschiedene Dinge berücksichtigen, wie Zeichenanzahl, Wortanzahl, Schriftartvariationen, Schriftgrößen, Schriftformatierung und responsive Anforderungen, um nur einige zu nennen. Eine Größe passt hier nicht für alle. Aber hey, machen wir es trotzdem.

Das ist unser Ziel: Wir wollen ein <blockquote> und eine Autorenangabe (Name) innerhalb einer Kreisform anzeigen. Wir wollen das Layout auch so flexibel wie möglich gestalten. Dieses Layout erfordert keine zusätzlichen Dateien und hält den HTML-Markup makellos sauber.

Das ist es, was wir anstreben

Die Funktion shape-outside wird zum Zeitpunkt des Schreibens in Internet Explorer oder Microsoft Edge 18 und darunter nicht unterstützt.

Zuerst das HTML

Wir werden letztendlich ein Wrapper-Element benötigen, um dies zu realisieren. Nehmen wir also die semantische <blockquote> als innerelement. Der äußere Wrapper kann ein div sein

<div class="quote-wrapper">
  <blockquote class="text" cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p>Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.</p>
    <footer>– Jesse James Garrett</footer>
  </blockquote>
</div>

Wenn Sie an einer detaillierten Untersuchung des HTMLs von Zitaten interessiert sind, haben Sie Glück. Wir werden das Zitat selbst in einem <p> und den Namen des Autors in einem <footer> setzen. Wir haben Klassennamen für die CSS-Styling-Hooks, die wir benötigen.

Als Nächstes einige Basis-CSS

Beginnen wir mit dem div-Wrapper. Zuerst setzen wir die minimale (responsive) Quadratgröße auf 300px, damit es auf kleineren Bildschirmen passt. Dann fügen wir eine relative Positionierung hinzu (da wir sie später benötigen werden). 

.quote-wrapper {
  height: 300px;
  position: relative;
  width: 300px;
}

Jetzt lassen wir die Blockquote den gesamten Wrapper ausfüllen und simulieren eine Kreisform mit einem radialen Gradienten als Hintergrund. (Das stimmt, wir verwenden in diesem Beispiel kein border-radius).

.text {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  height: 100%;
  width: 100%;
}

Eine Sache, die zu beachten ist, ist, dass 70% einen viel raueren Rand aufweisen. Ich habe manuell sehr kleine Prozentinkremente hinzugefügt und festgestellt, dass 70,3% am glattesten aussehen.

Jetzt haben wir unseren Basis-Kreis eingerichtet. Fügen Sie diese zusätzlichen Stilregeln zu .text hinzu.

.text {
  color: white;
  position: relative;
  margin: 0;
}

Hier ist, was wir bisher haben:

Dem Text die CSS-Behandlung geben

Formatieren wir zuerst den Absatz

.text p {
  font-size: 21px;
  font-style: italic;
  height: 100%;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

Seit der Veröffentlichung dieses Artikels haben andere unten über eine alternative Technik mit radial-gradient als shape-outside kommentiert. Dies ergibt eine glattere halbkreisförmige Kurve über Polygone.

Wir werden das ::before Pseudo-Element der Blockquote verwenden, um unsere Formgebung zu erstellen. Hier kommt die Eigenschaft shape-outside ins Spiel. Wir legen die polygon()-Koordinaten fest und floaten sie nach links, damit der Text innerhalb der Form umbricht.

.text::before {
  content: "";
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 7%;
}

Ändern wir die radiale Hintergrundfarbe in Rot. Die Polygonpunkte und Verbindungslinien des Pfadeditors sind ebenfalls blau. Wir ändern diese Farbe vorübergehend für einen besseren Kontrast mit dem Editor-Tool.

background: radial-gradient(
  ellipse at center,
  rgba(210, 20, 20, 1) 0%,
  rgba(210, 20, 20, 1) 70%,
  rgba(210, 20, 20, 0) 70.3%
);

Ich mag die Entwicklertools von Firefox, weil sie super praktische Funktionen wie einen shape-outside Pfadeditor haben. Klicken Sie auf die Polygonform im Inspektor, um die aktive Form im Browserfenster zu sehen. Ein großes Lob an das Mozilla-Dev-Team für die Erstellung einer sehr coolen Oberfläche!

Das Firefox Shape Editor Tool funktioniert auch für clip-path und <basic-shape> Werte.

Das haben wir bis zu diesem Punkt

Wir können dasselbe mit dem ::before Pseudo-Element des Absatzes machen. Wir verwenden shape-outside, um dasselbe Polygon umgekehrt zu erstellen, und float es dann nach rechts.

.text p::before {
  content: "";
  float: right;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    2% 0%,
    100% 0%,
    100% 100%,
    2% 100%,
    50% 94%,
    76.6% 82.7%,
    94% 65.6%,
    100% 50%,
    94% 32.6%,
    76.6% 17.3%,
    50% 6%
    );
  shape-margin: 7%;
}

Sieht gut aus, aber wo ist der Footer hin? Er ist aus der <blockquote> herausgefallen (wo der kreisförmige farbige Hintergrund ist), daher können wir diesen weißen Text auf weißem Hintergrund nicht sehen.

Den Footer stylen

Jetzt können wir den <footer> stylen und ihm eine absolute Position geben, um ihn wieder über den Kreis zu bringen.

.quote-wrapper blockquote footer {
  bottom: 25px;
  font-size: 17px;
  font-style: italic;
  position: absolute;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  width: 100%;
}

Auch hier können Sie die Hintergrundfarbe nach Belieben ändern.

Hier kommt der knifflige Teil. Der Text selbst muss so formatiert werden, dass die Anzahl der Wörter und Zeichen in die Form passt. Ich habe diese CSS-Regeln verwendet, um ihn gut passen zu lassen

• font-size
• shape-margin (wir haben zwei Ausschlussbereiche anzupassen)
• line-height
• letter-spacing
• font-weight
• font-style
• min-width  und min-height (für die Größe des .quote-wrapper Containers)

Hinzufügen des Anführungszeichens für etwas Flair

Haben Sie das riesige Anführungszeichen in der ursprünglichen Demo gesehen? Das wollen wir als Nächstes machen.

Wir werden das ::before Pseudo-Element für .quote-wrapper nutzen. Wieder einmal wird dies viel Feintuning erfordern, um gut auszusehen. Ich habe festgestellt, dass line-height einen großen Einfluss auf die vertikale Position des Zeichens hat.

.quote-wrapper::before {
  content: "\201C";
  color: #ccc;
  font-family: sans-serif, serif;
  font-size: 270px;
  height: 82px;
  line-height: 1;
  opacity: .9;
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 1;
}

Es gibt tatsächlich einen Unterschied zwischen geschweiften ("smarten") und geraden (dummen) Anführungszeichen. Ich würde vorschlagen, geschweifte Anführungszeichen für Dialoge und gerade Anführungszeichen für Code zu verwenden.

Umgang mit responsiven Stilen

Wir sollten unser Zitat auf größeren Bildschirmen wahrscheinlich größer machen. Ich setze einen Haltepunkt bei 850px, aber Sie möchten vielleicht etwas anderes verwenden.

@media (min-width: 850px) {
  .quote-wrapper {
    height: 370px;
    width: 370px;
  }
  .quote-wrapper::before {
    font-size: 300px;
  }
  .text p {
    font-size: 26px;
  }
  .quote-wrapper blockquote footer {
    bottom: 32px;
  }
}

Da haben wir es!

Wir haben HTML-Text mithilfe einer Kombination aus alten und neuen CSS-Techniken in einer kreisförmigen Form angeordnet, um eine ansprechende <blockquote> zu erstellen, die Aufmerksamkeit erregt. Und wir haben unser Anzeigeziel ohne zusätzliche Abhängigkeiten erreicht und gleichzeitig das HTML-Markup sauber und semantisch gehalten.

Ich hoffe, dieser Artikel ermutigt Sie, neue Layout-Möglichkeiten mit shape-outside zu erkunden. Bleiben Sie dran für shape-inside.