Bessere Absatzabstände

Nachdem Sie im vorangegangenen Beitrag Absatzabstände ( Über ) die Gestaltung von Absätzen für das Web kennengelernt haben, wird in diesem Folgeartikel die Geschichte der Absatzgestaltung erläutert: Über . Außerdem wird erklärt, warum Absätze wichtig sind, wie sie mit HTML und CSS gestaltet werden können, und es werden alternative Methoden zur Kennzeichnung von Absätzen angeboten, wie z. B. die Verwendung des Pfeilzeichens (¶).

Was soll es also sein? Pfeilspitzen, Einzüge oder Zeilenumbrüche? Sie können eine ästhetische Entscheidung treffen, je nachdem, was gut aussieht und sich gut anfühlt. Oder wenn der Arbeitsablauf in Bezug auf HTML und CSS und die langfristige Verwaltung der Dinge ein Thema ist, können Sie einen Ansatz verfolgen, bei dem weniger mehr ist. Wie auch immer Sie die Dinge handhaben, es geht um mehr als nur den Abstand zwischen den Absätzen.

Absatz Ursprünge

Das Wort, das wir als Absatz kennen, stammt von dem französischen Wort paragraphe ab, dessen Wurzeln im mittelalterlichen Latein liegen. Und dann gibt es noch das griechische Wort paragraphos, das frei übersetzt " neben dem Schreiben" bedeutet. Im griechischen Schriftsystem, das vor langer Zeit verwendet wurde, bedeuteten Notationen in der Nähe einer Textstelle oder eines anderen Textes eine Ändern im Dialog. Anhand einer Markierung, einer horizontalen Linie oder einer anderen grafischen Geste konnte man erkennen, wo eine Passage begann und endete. Die Griechen benutzten ihre eigenen Symbole, um diese Trennungen grafisch darzustellen, und auch die Schreiber in anderen Ländern und Kulturen verwendeten eine Vielzahl von Symbolen. Heutzutage verwenden wir die Pilzsäule, die manchmal auch als umgekehrtes P bezeichnet wird. Die Pilzsäule ist ein wenig genutztes Symbol zur Abgrenzung von Absätzen, aber genau wie Absatzumbrüche und Einzüge erfüllt die Pilzsäule ihren Zweck.

Aber hinter diesem verkehrten P steckt mehr, als man auf den ersten Blick sieht. Bevor es so aussah, wie wir es heute kennen, hatte es die Form eines C mit einer durchgehenden Linie. Im Laufe der Zeit wurde das Symbol immer seltener zur Kennzeichnung von Absätzen verwendet, da es zu aufwendig war, ein separates Symbol zusätzlich zum Absatztext zu erstellen. Wenn die Pilzköpfe weggelassen wurden, um Zeit oder Tinte zu sparen, blieb ein Leerraum übrig, der uns die heutigen Einrückungen bescherte.

Jetzt sehen Sie die Pilzkrähe, jetzt nicht mehr. Die Absatzeinzüge verdanken dem Pfeilkreuz eine Menge. Der Pfeil wird weniger als Designkonvention verwendet, sondern eher als Formatierungshinweis, insbesondere in Textverarbeitungsprogrammen und Designsoftware, wo er als unsichtbares Element angezeigt wird, um Nutzer Über zu verdeutlichen, wo Absätze beginnen und enden.

Warum Absätze wichtig sind

Die klare Trennung eines Absatzes von einem anderen hilft den Lesern, zwischen den einzelnen Ideen zu unterscheiden, wobei eine neue Idee in einem neuen Absatz beginnt. Absätze bilden auch eine Reihe von kleinen Textabschnitten, was ansprechender ist als ein riesiger, ununterbrochener Textstrom. Würden Sie den eng gesetzten, dichten Text unten lesen wollen?

Dieses riesige Rechteck würde die meisten Leser einschüchtern. Absätze sind ein Muss, und ganz gleich, wie Sie sie gestalten, beachten Sie diese HTML- und CSS-Grundlagen.

Trennen Sie Absätze durch eine Einleitung <p> und Schließen </p> Element.

<p>First Paragraph</p>
<p>Second Paragraph</p>

Stellen Sie sicher, dass Sie die Zeilenhöhe in CSS anpassen, damit die Textzeilen in den einzelnen Absätzen offener wirken. Und denken Sie daran, dass Zeilenhöhe für einen Schrift kann für einen anderen nicht dasselbe sein.

Sie können Absätze mit Umbrüchen erstellen, wie oben gezeigt, damit die Absatzblöcke eine klare und deutliche Trennung aufweisen. Im folgenden Beispiel wird der Abstand zwischen den Absätzen durch einen vergrößerten Marge im CSS angegeben.

Einzüge, manchmal auch Tabulatoren genannt, eignen sich auch gut zur Kennzeichnung von Absätzen. Einzüge können groß oder, im Fall von extremen Einzügen, extra groß sein.

Extreme Einrückungen sehen in der Regel nicht sehr ansprechend aus. Kleinere Einzüge funktionieren am besten. Kleinere Einzüge sind für den Leser einladender, weil sie ruhiger sind und den Gestaltungsraum besser ausnutzen.

Gestalten Sie Ihre Einzüge so, dass sie für eine Reihe von digitalen Bildschirmen geeignet sind, von desktop bis hin zu kleineren Bildschirmen für Laptops, Tablets und Smartphones. Und wenn es darum geht, zusätzlichen Zeilenabstand zwischen Absätzen und Einrückungen zu verwenden, denken Sie daran, dass Sie nicht beides brauchen, zumal einige Stilrichtlinien vorschlagen, dass es wie das Tragen eines Gürtels und von Hosenträgern ist.

Klügere, nicht härtere Einrückungen

Im vorangegangenen Beitrag, Absatzabstand, wurden verschiedene Möglichkeiten zur Angabe von Einzügen in HTML und CSS vorgestellt. In allen Fällen erhalten Sie die gleichen Ergebnisse, wenn der Text in einem Browser angezeigt wird. Aber jede Methode hat ihre eigenen Vor- und Nachteile.

Für den Anfang können Sie eine Klasse verwenden, die sich als nützlich erweist, wenn Sie nur ein paar Absätze einrücken wollen, die hier und da eingerückt sind.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
.indented {
text-indent: 3em;
}

<p>No indent would appear in this one.</p>
<p class="indented">This paragraph would be indented.</p>
<p class="indented">This paragraph would also be indented.</p>

Das Einfügen einer Klasse nach der anderen ist nicht die beste Nutzung Ihrer Zeit. Wenn Sie also Einzüge in Ihrem gesamten Layout wünschen, müssen Sie intelligenter arbeiten, nicht härter. Sie könnten die :first-child CSS-Pseudoklasse, um den ersten Absatz nicht haben einen Einzug, wobei nachfolgende Absätze eingerückt sind.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
text-indent: 3em;
}
p:first-child {
text-indent: 0;
} 

<p>No indent occurs because it is the first-child.</p>
<p>This paragraph would be indented.</p>
<p>This paragraph would be indented.</p>

Die oben genannten Methoden mit Klassen oder :first-child funktionieren beide und liefern die gewünschten Ergebnisse. Aber im Hinblick auf Effizienz und Sauberkeit sind beide ungeschickt, wenn Sie ein ganzes Layout - oder eine ganze Website - mit Absatzeinzügen versehen wollen. Sie wollen nicht Klasse für Klasse in Ihr HTML schreiben. Und die ganze :first-child kann etwas verwirrend werden. Schlimmer noch, es gibt unterschiedliche Berichte über die Unterstützung: Einige behaupten, dass Microsoft® Internet Explorer® 7, 8 und 9 die :first-childaber andere Berichte deuten darauf hin, dass nur Explorer 9 und höher.

Es gibt eine bessere Lösung, die breiter unterstützt wird. Und das Beste daran? Es ist aufgeräumt. Wenn Sie wissen, dass Sie immer den ersten Absatz brauchen nicht eingerückt, aber nachfolgende Absätze eingerückt, verwenden Sie den Nachbarschaftsselektor (+), auch bekannt als Nächste-sibling selector oder adjacent sibling selector.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
p+p {
text-indent: 3em;
}

Im Falle des oben genannten CSS, p+p gestaltet jeden Absatz nach die erste mit einem Einzug. Außerdem werden 103 Zeichen in CSS verwendet, während die :first-child Methode verwendet 128. In diesem Fall ist weniger definitiv mehr, was zu einem ordentlichen CSS führt und uns auch von der Verwirrung befreit, die der Umgang mit :first-child.

Unterstützung für die Verwendung des benachbarten Selektors (+) ist in modernen Webbrowsern weit verbreitet, obwohl zum Zeitpunkt der Erstellung dieses Dokuments berichtet wurde, dass Versionen von Microsoft Internet Explorer, insbesondere Explorer 6, Probleme bereiten. Internet Explorer 6 wird laut einem Bericht von Microsoft, der sich auf Daten von Net Applications aus dem Jahr 2015 stützt, von weniger als 1 % der Internetnutzer verwendet. Man kann also sagen, dass die Verwendung des benachbarten Selektors (p+p) ist eine sichere Sache. Wenn Sie sich jedoch Sorgen machen, dass Über Besucher auf Ihre Website kommen und einen älteren, nicht unterstützten Browser verwenden, formatieren Sie Absätze als einfache Blöcke mit Zeilenumbrüchen und Zeilenumbrüchen allein.

Blockabsätze erledigen diese Aufgabe, ohne dass Sie CSS zur Gestaltung von Einzügen hinzufügen müssen. Weder die Verwendung des angrenzenden Selektors (p+p) noch :first-child noch text-indent in Ihrem CSS verwendet sogar noch weniger Zeichen. Mit 89 Zeichen für die Definition von Absätzen als Blöcke, verglichen mit 128 und 103 Zeichen für Einzüge, sorgen Blockabsätze für ein aufgeräumtes CSS - wenn Sie ein Freund von weniger ist mehr sind.

Die Pilzkrähe für Paragraphen

Wenn Sie Ihrem Webdesign einen altmodischen Anstrich geben wollen, können Sie die Pilzkrähe verwenden, um einen Absatz von einem anderen zu trennen. Dazu müssen Sie sie als ¶ Entität in HTML. Aber nicht so schnell. Bevor Sie eine Pilzkrähe als ¶ in jeden einzelnen Absatz Ihrer Website Webseite einfügen möchten, bedenken Sie bitte, dass dies mühsam und zeitaufwändig ist. Wenn Sie den Prozess automatisieren wollen, verwenden Sie ::vor in CSS, um am Anfang eines jeden Absatzes eine Pilzkrähe einzufügen.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
p::before {
content: "B6";
margin-right: 0.5em;
color: gray;
} 

Im obigen CSS, "B6" ist der Unicode der Pilzkrähe. Sie können auch den angrenzenden Selektor beim Rendern von Pilcrows verwenden, wenn Sie möchten, dass der erste Absatz nicht eine Krähe haben, sondern die nachfolgenden, um die Krähe zu benutzen.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
p+p::before {
content: "B6";
margin-right: 0.5em;
color: gray;
} 

Da Sie ein Designelement hinzufügen, um die Dinge zu variieren, sollten Sie auch Schriften variieren. Sie können den Absatz in einer Schrift und die Pilzkrähe in einer anderen setzen. Im folgenden Beispiel wird die Helvetica® Schrift für den Fließtext und die Times® Schrift für die Pilgerzeichen verwendet.

Es gibt eine Vielzahl von Fonts , aus denen Sie für Ihre Pilzköpfe wählen können. Jede Schrift hat eine andere, von fett bis dünn, von rund bis blockig, von kurz bis hoch, von kalligraphisch bis mechanisch und noch viel mehr.

Von links nach rechts: Pilzköpfe in den Schriftarten Adobe Garamond™, Aachen™, ITC Souvenir®, Kairos® und Posterama™ 1901 Schriften.

Abgelegen

Designkonventionen kommen und gehen. Stile wachsen und schwinden. Die Praxis der Gestaltung von Absätzen hat sich über Jahrhunderte hinweg entwickelt, und einige der vor langer Zeit verwendeten Methoden werden immer noch angewandt. Andere gelten als überholt. Wie kann man also entscheiden, was am besten funktioniert? Testen Sie verschiedene Absatzstile mit den Benutzern, um zu sehen, was sie bevorzugen und wie sie mit der Typografie interagieren. Wenn Sie verschiedene Schriften ausprobieren und verschiedene Gestaltungsmöglichkeiten in Betracht ziehen, sollten Sie auch die Absatzabstände testen, am besten durch Nutzer auf einer Vielzahl von Bildschirmgrößen. Testen Sie auch die Pfeilspitzen, denn wer weiß, vielleicht funktioniert sie ja bei den Lesern. Es ist wichtig zu wissen, wie der Leser mit dem Design interagiert - ob mit oder ohne Pilzköpfe - und das Testen bringt Sie in Kontakt mit der Benutzerfreundlichkeit und Funktionalität. Dieser Kontakt ist wichtig, denn Sie wollen kein Weltraumkadett sein, der der Erfahrung von Nutzer keine Aufmerksamkeit schenkt.