Bookmarklet zum Einfärben von Text zwischen 45 und 75 Zeichen (zum Zeilenlängen Testen)

Kürzlich habe ich auf der CSS Dev Talk Clarissa Petersons Vortrag zur responsiven Webtypografie besucht. Ein Teil davon befasste sich mit Zeilenlänge und Lesbarkeit. Natürlich gibt es für jede Regel Ausnahmen und Ihre Erfahrungen können variieren, aber das traditionelle Denken besagt, dass Fließtext (langer Text, mehrere Absätze, der mehr als einen Blick zum Lesen benötigt ...) zwischen 45 und 75 Zeichen pro Zeile liegen sollte, um angenehm zu sein. Kürzer ist umständlich, länger macht es leicht, den Platz zu verlieren und die nächste Zeile zu finden.

In einer Welt fester Breiten ist es relativ einfach, diesen Text zwischen 45-75 Zeichen pro Zeile zu bringen. Sie wählen eine gute Fließtextschriftart, passen die Schriftgröße und die Breite des Containers an, damit es ungefähr stimmt.

Aber was tun Sie in einer Welt flexibler Breiten?

Nun, nur weil sich die Containerbreite ändern kann, bedeutet das nicht, dass Sie eine angenehme Zeilenlänge opfern müssen. Sie können die Breite des Containers sowie die Schriftgröße an bestimmten Haltepunkten (Media Queries) anpassen, um sie so nah wie möglich zu bringen. Denken Sie daran, dass es nicht exakt sein muss, das ist keine exakte Wissenschaft.

Aber wie testet man, wie viele Zeichen in einer bestimmten Zeile stehen? Clarissa hatte eine clevere Idee, einfach über 45 Zeichen zu zählen und eine span-Umgebung einzufügen, die Sie gestalten, um die Textfarbe zu ändern, und diese span-Umgebung dann bei 75 Zeichen zu schließen. So können Sie visuell sehen, wo diese Brüche sind. Hier sind Clarissas Folien (eingebettet), auf der Folie mit der span-Idee

Ich dachte, das wäre eine nette Sache, um sie zu automatisieren, damit man sie auf jeder Seite verwenden kann. Bookmarklets sind dafür großartig. Also hier sind wir

Siehe den Stift Bookmarklet, das den Text zwischen 45 und 75 Zeichen rot färbt. von Chris Coyier (@chriscoyier) auf CodePen

Sie ziehen diesen Button in Ihre Lesezeichenleiste und klicken dann auf jede Seite, auf der Sie ihn verwenden möchten. Zuerst klicken Sie darauf, um ihn zu aktivieren, dann klicken Sie auf ein Fließtextelement (wie einen Absatz). Dann können Sie das Fenster umher verschieben, um zu sehen, wo die Zeile bricht, und versuchen, es passend zu machen.

Ich habe hier keine ausgefallenen Algorithmen verwendet, aber durch einfaches Anpassen der Dinge habe ich es bei einer einfachen zentrierten Textspalte ziemlich gut hinbekommen

Was aus diesem CSS stammt

body {
  font-family: "Lucida Grande", sans-serif;
  margin: 20px auto;
  width: 95%;
  font-size: 70%;
  line-height: 1.4;
}
@media (min-width: 400px) {
  body { width: 90%; font-size: 75%; }
}
@media (min-width: 700px) {
  body { width: 80%; font-size: 90%; }
}
@media (min-width: 850px) {
  body { width: 70%; font-size: 100%; }
}
@media (min-width: 1000px) {
  body { width: 60%; font-size: 110%; }
}
@media (min-width: 1100px) {
  body { width: 50%; font-size: 115%;}
}
@media (min-width: 1450px) {
  body { width: 40%; font-size: 125%; }
}