Die hängende Interpunktion ist ein leistungsfähiges typografisches Werkzeug zum Erstellen von optisch ausgerichteten Textkörpern. Leider wurde es im Web weitgehend vergessen… bis jetzt. Wir werden einen Blick auf den Wert hängender Interpunktion werfen und aufzeigen, wie Sie sie teilweise mithilfe eines kleinen Javascript und einer CSS-Regel implementieren können, die bereits seit Jahren existiert.
Hängende Interpunktion: Eine Fibel
Als Gutenberg in den 1400er Jahren seine Bibel schuf, entwickelte er einen Satz von Satzzeichen, der bis heute Bestand hat und als „hängende Interpunktion“ (auch als optische Ausrichtung bezeichnet) bezeichnet wird..
Was ist hängende Interpunktion?
Hängende Interpunktion ist eine Methode zum Setzen von Interpunktionszeichen draußen die Ränder eines Textkörpers. Dadurch entsteht eine einheitliche Kante im Text und ein besserer optischer Fluss.
Hängende Satzzeichen wirken sich auf die Art und Weise aus, in der Sie das Layout von Text auf einer Seite wahrnehmen.
Wo hängende Interpunktion auftritt
Hängende Interpunktion tritt an den Rändern außerhalb der Ausrichtung des restlichen Textes auf. Sie können Satzzeichen in linksbündigem, rechtsbündigem oder ausgerichtetem Text aufhängen.
Warum hängen wir die Interpunktion?
Die Theorie, warum hängende Interpunktion wichtig ist, lautet in etwa so:
Interpunktionszeichen im Text nehmen nur eine geringe Höhe der Kappe ein. Normalerweise ist dies kein Problem, aber wenn das Interpunktionszeichen das erste Zeichen an der geraden Kante eines Textkörpers ist, bleiben ungewöhnliche vertikale Abstände, die den visuellen Fluss eines Textkörpers stören können.
Hängende Interpunktion behebt diese Störung. Einige Markierungen fallen natürlich am Rand des Textes auf. Anstatt sie dort zu lassen und den optischen Fluss des Textkörpers zu unterbrechen, mildert der Typograf die Störung, indem er die Interpunktionszeichen an den Rändern hängt.
Welche Interpunktionszeichen können optisch ausgerichtet werden?
Da hängende Interpunktion die Unterbrechung durch kleine Höhenmarkierungen verringert, sollten Sie im Allgemeinen kleine Höhenmarkierungen wie Anführungszeichen ("" ") und Bindestriche (- -) aufhängen. Hängen Sie keine vollen Interpunktionszeichen wie das Ausrufezeichen (!) und das Fragezeichen (?).
Hängende Interpunktion: In Print und im Web
Die Unterstützung für hängende Satzzeichen in Desktop-Publishing-Programmen wie Adobe InDesign ist weit fortgeschritten. InDesign bietet großartige Werkzeuge zum Aufhängen von Satzzeichen in Textkörpern. Das ist natürlich gut für Leute, die mit Desktop-Publishing-Software entwerfen, aber was ist mit Webdesignern??
Das Problem bei der Erzielung hängender Interpunktion im Web besteht darin, dass alles aus Boxen besteht. Stilregeln in CSS verwenden das „Box-Modell“, das alle HTML-Elemente in enthaltenen Boxen einschließt. Diese Felder bestehen aus Rändern, Rändern, Auffüllung und Inhalt.
Standardmäßig befinden sich alle Textzeichen im Web in einer Box. Hängende Interpunktion setzt dagegen voraus, dass die Zeichen vorhanden sind draußen die Kiste. Dies war ein schwieriges Problem, das mit Software gelöst werden konnte. Daher wurde das Implementieren des typografischen Tricks der hängenden Interpunktion im Web von Designern und Browserherstellern weitgehend ignoriert. Wie Mark Boulton feststellt, ist es sehr schade, dass ein so wichtiger Aspekt des Satzes gerade unter den Teppich gekehrt wurde.
Hängende Interpunktion und die Spec
Es kann Sie überraschen, aber hängende Interpunktion befindet sich tatsächlich im CSS3-Textmodul. Die hängende Interpunktionseigenschaft wird jedoch als optional markiert, was dazu beiträgt, dass sie noch nicht implementiert wurde. Wenn die Eigenschaft nicht implementiert wird, ist sie tatsächlich „gefährdet und kann während ihres CR-Zeitraums von der Spezifikation abgeschnitten werden, wenn keine (korrekten) Implementierungen vorliegen.“.
Da diese Eigenschaft noch nicht von Browsern implementiert wurde, gehen wir nicht auf die Details zur Implementierung von ein hängende Interpunktion Eigentum. Wenn Sie jedoch neugierig sind, können Sie die Spezifikation selbst oder Chris Coyers Übersicht über CSS-Tricks lesen, um weitere Informationen zu erhalten.
Satzzeichen zum Aufhängen
Es gibt eine wertvolle Information, die wir aus der Spezifikation entnehmen können. Es beschreibt, welche Satzzeichen aufgehängt werden sollten:
U + 002C
,
KOMMA
U + 002E
.
PUNKT
U + 060C
،
ARABIC COMMA
U + 06D4
۔
ARABISCHER VOLLSTÄNDIGER STOPP
U + 3001
、
IDEOGRAPHISCHE KOMMA
U + 3002
。
IDEOGRAPHISCHER VOLLSTÄNDIGER STOPP
U + FF0C
，
FULLWIDTH COMMA
U + FF0E
．
FULLWIDTH FULL STOP
U + FE50
﹐
KLEINE COMMA
U + FE51
﹑
KLEINE IDEOGRAPHISCHE KOMMA
U + FE52
﹒
KLEINE FULL STOPP
U + FF61
｡
HALBWEITER IDEOGRAFISCHER VOLLSTÄNDIGER STOPP
U + FF64
､
HALBWEITE IDEOGRAFISCHE KOMMA
Die Spezifikation besagt, dass andere Charaktere gegebenenfalls aufgehängt werden können, was gut ist, da diese Liste nicht umfassend ist. Zum Beispiel erwähnt die Spezifikation keine Striche, die traditionelle Typografie als hängende Interpunktion bezeichnet.
Wie bei The Recovering Physicist empfohlen, hängen traditionelle westliche Sprachen wahrscheinlich nur die folgenden Satzzeichen:
Code-Punkt
Charakter
Name
HTML-Entität
Unicode-Kategorie
U + 00AB
"
LINKSPUNKT-DOPPELWINKEL-QUOTATIONSZEICHEN
«
Pi
U + 00BB
"
RECHTSPUNKT-DOPPELWINKEL-Zitatmarke
»
Pf
U + 2018
'
RECHTE EINZELNOTENMARKIERUNG
’
Pi
U + 2018
'
LINKS EINZELN Zitatmarkierung
‘
Pf
U + 201C
“
LINKS DOPPELZITAT-MARKIERUNG
“
Pi
U + 201D
”
RECHTES DOPPELZitat
”
Pf
U + 2039
‹
EINZELNE LINKSPUNKT-WINKEL-Zitatmarke
‹
Pi
U + 203A
›
EINZELN RECHTSPRECHWINKEL-QUOTATIONSZEICHEN
›
Pf
U + 2010
-
BINDESTRICH
& # x2010;
PD
U + 2013
-
DE DASH
-
PD
U + 2014
-
EM DASH
-
PD
In westlichen Sprachen werden Satzzeichen wie Bindestriche, Punkte, Kommas, Doppelpunkte, Semikolons usw. im Allgemeinen am rechten Rand aufgehängt, da sie normalerweise nicht mit Absätzen beginnen oder am linken Rand erscheinen.
Hängende Interpunktion jetzt ins Web bringen
Idealerweise hängen Sie alle qualifizierenden Satzzeichen in einem Textabschnitt auf. Dies ist jedoch die Web- und unvollständige CSS-Unterstützung, die es schwierig macht, hängende Satzzeichen in links und rechts ausgerichteten Texten sowie in begründeten Texten vollständig zu implementieren.
Das Hängen der Interpunktion an einem einzelnen Rand, zum Beispiel der linke Rand für linksbündigen Text, kann einfacher zu steuern sein. Blockebenenelemente wie , , durch Tags, die mit qualifizierenden Interpunktionszeichen beginnen, können ein Negativ verwenden Texteinzug Wert, um die Interpunktion aufzuhängen.
Es ist erwähnenswert, dass die hängende Interpunktion ein Negativ verwendet Texteinzug erlaubt Ihnen nur, die Satzzeichen ganz am Anfang eines Absatzes aufzuhängen. Da Text je nach Bildschirmgröße erneut im Internet fließt, wissen Sie nie, wo Interpunktionszeichen fallen. Das beginnende Interpunktionszeichen ist das einzige, dessen Position Sie sicher sein können.
Trotz dieser Unzulänglichkeiten kann die Erkundung der Möglichkeiten des Aufhängens der Satzzeichen noch wertvoll sein. Es ist eine typografische Wahl, die Sie als Designer treffen können.
In diesem Tutorial wird gezeigt, wie Sie die anfängliche Interpunktion in traditionellen linksbündigen westlichen englischen Texten aufhängen. Denken Sie daran, dass Code veränderbar ist. Sie können die Beispiele in diesem Lernprogramm verwenden und sie an Ihre Bedürfnisse anpassen. Hoffentlich lösen Browser in Zukunft das Problem hängender Satzzeichen besser.
Schritt 1: Eine kurze Übersicht
Die Idee zur Implementierung von hängender Satzzeichen für linksbündigen Text ist ziemlich einfach. Verwenden Sie JavaScript, um alle geeigneten DOM-Elemente im Kontext eines Artikellayouts zu finden, die mit einer hängenden Interpunktion beginnen. Wenden Sie eine gefundene HTML-Klasse auf das Element an, das einen negativen Wert für den Wert hat Texteinzug Regel.
Schritt 2: Untersuchen des Markups
Schauen wir uns ein einfaches Beispiel für Markups an, das zum Layout eines einfachen Blogposts verwendet wird. Der Text des Artikels wird in Überschriften, Unterüberschriften, Listen und Anführungszeichen als gleichgeordnete Elemente dargestellt:
Artikelüberschrift
Text hier…
"Ein Absatz", der mit hängender Interpunktion beginnt ...
Eine Zwischenüberschrift für den Artikel
Text hier…
Zitierter Text…
In mehreren Absätzen…
Mehr text…
"Ein Zwischentitel", beginnend mit der Interpunktion
Noch mehr Text…
Listentext…
Ein zweiter Listenpunkt
Mehr text…
Letzter Absatz.
Ihr eigenes Markup-Muster kann davon abweichen. In diesem Fall können Sie das Javascript später anpassen, um DOM-Elemente entsprechend der Anordnung Ihres Markups zu finden. In diesem Tutorial verwenden wir dieses einfache Markup-Muster.
Um die beginnende Interpunktion für Elemente innerhalb eines Textblocks aufzuhängen, müssen wir zunächst definieren, welche Interpunktionszeichen aufgehängt werden können, die wir zuvor im Tutorial analysiert haben. Es ist wichtig zu wissen, dass verschiedene Sprachen Anführungszeichen (und Interpunktionszeichen) auf sehr unterschiedliche Weise verwenden. Sehen Sie sich beispielsweise an, wie Englisch und Welsh primäre und sekundäre Anführungszeichen verwenden:
EnglischIch sagte zu Johnny: Mark Twain sagte einmal: Wenn du die Wahrheit sagst, musst du dich an nichts erinnern.
WalisischIch sagte zu Johnny: Mark Twain sagte einmal: Wenn Sie die Wahrheit sagen, müssen Sie sich an nichts erinnern.
Beachten Sie, wie sie komplette Gegensätze sind. Diese Unterschiede sind nur der Anfang. Sehen Sie sich dieses Beispiel für die Verwendung von primären und sekundären Anführungszeichen in nur einer Handvoll Sprachen an (eine größere Zusammenstellung finden Sie bei Wikipedia):
Sprache
Primär
Sekundär
Englisch
"..."
"..."
Walisisch
"..."
"..."
kroatisch
„…”
"..."
Deutsche
„…“
"..."
griechisch
"…"
"..."
Französisch
"…"
‹…›
Es ist gut, auf diese Unterschiede zu achten. Wenn Sie also mit anderen Sprachen als dem westlichen Englisch arbeiten müssen, haben Sie ein festeres Verständnis dafür, an welchen Interpunktionszeichen Sie hängen sollten.
Schritt 3: CSS einrichten
Jetzt haben wir einige grundlegende Markierungen für unser Textlayout. Wir werden JavaScript verwenden, um jedes dieser DOM-Objekte zu analysieren und diejenigen zu finden, die mit hängenden Interpunktionszeichen beginnen. Für diejenigen, die mit der qualifizierenden Interpunktion beginnen, wenden wir eine HTML-Klasse mit einem negativen Wert für an Texteinzug Regel, die die Interpunktion am linken Rand hängt.
Der knifflige Teil hier besteht darin, den Wert Ihres zu definieren Texteinzug Regel. Für verschiedene Schriftarten sind andere Werte erforderlich. Dies erfordert einige Anpassungen und Anpassungen. Beispielsweise hat ein Smart-Anführungszeichen (“) eine dickere Breite als ein Smart-Anführungszeichen ('). Wenn Sie die Interpunktion aufhängen, erfordert das DOM-Element, das mit einem intelligenten doppelten Anführungszeichen beginnt, einen höheren Wert für Texteinzug Regel als ein DOM-Element, das mit einem einfachen einfachen Anführungszeichen beginnt.
Ein Hinweis zu Schriftarten
Nicht nur das Texteinzug Der Wert kann je nach Breite des Satzzeichens unterschiedlich sein, hängt jedoch auch von der verwendeten Schriftart ab. Natürlich ist dies das Internet, und Sie können nicht immer sicherstellen, dass ein Benutzer eine bestimmte Schriftart verwendet. Web-sichere Schriftarten haben jedoch eine gute Allgegenwart, während für nicht Web-sichere Schriftarten einige ziemlich kugelsichere Methoden zum Bereitstellen bestimmter Schriftarten für Clients verfügbar sind. So oder so können Sie der Annäherung an die gleiche Schriftart ziemlich nahe kommen.
Unabhängig davon, welche Schriftart oder welcher Stapelstapel Sie verwenden, ist es empfehlenswert, eine Vorschau und eine Optimierung Ihrer Schriftart vorzunehmen Texteinzug Werte auf Font-Basis (und vorzugsweise in verschiedenen Größen). Dadurch wird sichergestellt, dass die hängenden Satzzeichen korrekt ausgerichtet werden.
Die hängenden Interpunktionsklassen
Unter der Annahme, dass alle Elemente unseres Beitrags dieselbe Schriftart verwenden, können wir drei Klassen einrichten, die drei Breiten definieren: klein, mittel und groß. Abhängig von der Art der Interpunktion, mit der er beginnt, wendet JavaScript eine dieser drei Klassen auf das DOM-Element an, wodurch wir hängende Interpunktion erhalten!
Beachten Sie, dass wir verwenden em Messungen. Dies gewährleistet die Texteinzug wird immer relativ zum sein Schriftgröße des Textes im Artikel. Wenn Sie also die Schriftgröße erhöhen, müssen Sie die Schriftgröße nicht ändern Texteinzug Werte.
Die hängenden Interpunktionsklassen: Zwei Schriften
Was aber, wenn Sie in Ihrem Layout zwei verschiedene Schriftarten verwenden? In dem Beispiel, das wir verwenden, sind unsere Haupttextelemente (
) verwenden Sie eine serifenlose Schrift (Helvetica Neue, Arial Fallback), während unsere Kopfzeilen (
) Verwenden Sie eine andere serifenlose Schrift (Source Sans Pro). Die Interpunktionszeichen von Source Sans Pro sind vom Design her breiter als die von Helvetica Neue und Arial. Daher werden DOM-Elemente, die in Source Sans Pro (Header) festgelegt sind, etwas größer sein Texteinzug Werte als DOM-Elemente in Helvetica Neue (Listen, Absätze usw.).
Dies ist leicht genug, indem zusätzliche Klassen speziell für Header hinzugefügt werden. Wir werden nur JavaScript verwenden, um den Elementtyp zu erkennen, und dann die entsprechende Klasse anwenden.
Schritt 4: Einrichten einer Funktion in JavaScript
Da wir nun das benötigte Markup und CSS haben, werden wir JavaScript verwenden, um alle DOM-Elemente zu finden, die direkte Nachkommen unseres Artikelcontainers sind. Wir prüfen dann, ob diese DOM-Elemente mit Satzzeichen beginnen, die aufgehängt werden sollen.
Zu Beginn erstellen wir eine Funktion, die unseren gesamten Code enthält. Diese Funktion benötigt ein Argument, nämlich das DOM-Element, das den Text enthält, den wir für hängende Satzzeichen analysieren möchten, beispielsweise den Container eines Blogbeitrags.
/ * * Hängende Interpunktion * Diese Funktion verwendet ein DOM-Element, * sucht jede seiner direkten Nachkommen *, und wenn das Element mit einer hängenden Interpunktion beginnt, * wird die entsprechende HTML-Klasse auf das Element angewendet. * * Dann erhält das übergeordnete DOM-Element eine Klasse, um * die von uns angewendeten Kinderklassen zu aktivieren. * / function hangPunctuation (container) // Code geht hier hin
Hinweis: hängende Interpunktion ist ein Aspekt der progressiven Verbesserung. In diesem Beispiel verwenden wir natives JavaScript, das in älteren Browsern nicht vollständig unterstützt wird (siehe IE). Wenn Sie möchten, dass dies in älteren Browsern funktioniert, können Sie dies tun. Das meiste, was wir tun werden, ist die Auswahl von Elementen aus dem DOM und das Ändern ihrer Klassen. Sie können dazu einfach jQuery verwenden oder Hilfsfunktionen von youmightnotneedjquery.com verwenden
Schritt 5: Definieren der Interpunktionszeichen
Wir müssen eine Liste mit hängenden Satzzeichen erstellen. Mit den zuvor definierten Zeichen können wir in JavaScript ein Objekt erstellen, das unsere Satzzeichen (durch ihre Unicode-Punkte) definiert:
Wie Sie sehen, definieren wir eine Liste von Satzzeichen, an die wir eine entsprechende Breitendefinition hängen möchten, die zu unseren HTML-Klassen passt. Dieses Objekt sagt uns, welche Satzzeichen zu hängen sind und wie groß ihr Negativ ist Texteinzug Wert sollte sein. Diese Liste ist nicht umfassend. Das Schöne ist, dass wir die gesamte Liste durchlaufen, so dass Sie bei Bedarf weitere Satzzeichen hinzufügen können.
Schritt 6: Überlaufen Sie jedes untergeordnete Element
Jetzt werden alle direkten Nachkommen unseres enthaltenden Elements (das an die Funktion übergeben wurde) durchlaufen. Dazu richten wir zuerst ein zum Schleife:
// Schleife über alle direkten Nachkommen des Containers // Wenn es sich um eine Blockquote handelt, Schleife über seine direkten Nachkommen nach (i = 0; i
Weiter (innerhalb der zum Schleife) erstellen wir eine Variable namens el Dies stellt jedes direkte untergeordnete Element des Containers dar, über den wir eine Schleife erstellen (erhalten Sie die untergeordneten Elemente eines Elements) .Kinder Eigentum):
var el = container.children [i];
Jetzt werden wir unsere übergeben el Variable zu einer anderen Funktion (hangIfEligible ()), das prüft, ob es mit einem Satzzeichen beginnt, das aufgehängt werden kann. Wenn dies der Fall ist, wendet diese andere Funktion die entsprechende HTML-Klasse auf das Element an.
if (el.tagName === 'BLOCKQUOTE') für (var k = 0; k < el.children.length; k++) hangIfEligible(el.children[k]); ; else hangIfEligible(el);
Beachten Sie, was wir mit dem gemacht haben Blockquote Etikett? weil Blockquote Elemente können untergeordnete Elemente enthalten, die mit hängenden Interpunktionszeichen beginnen (wie das tag), müssen wir auch jedes seiner untergeordneten Elemente durchlaufen. Wenn also das aktuelle Element, das wir überlaufen, a ist Blockquote tag, wir überrollen jedes seiner Kinder und geben sie an unsere weiter hangIfEligible () Funktion. Wenn es kein ist Blockquote Element übergeben wir das aktuelle Element selbst an das hangIfEligible () Funktion.
Wenn wir nicht speziell über die Kinder der Blockquote Element, würden wir seine Kinder vermissen und eine Chance, Satzzeichen aufzuhängen.
Unsere zum Die Schleife sollte jetzt so aussehen:
// Schleife über alle direkten Nachkommen des Containers // Wenn es sich um eine Blockquote handelt, Schleife über seine direkten Nachkommen nach (i = 0; i
Schritt 7: Hängen Sie die Interpunktion
Wir haben das aktuelle untergeordnete Element an unser übergeben hangIfEligible () Funktion. Definieren wir nun, was diese Funktion bewirkt:
// Prüfen Sie, ob das übergebene Element // mit einem der qualifizierenden Interpunktionstypen beginnt // Wenn dies der Fall ist, wenden Sie die entsprechende Klasse an, abhängig vom Tagtyp. Funktion hangIfEligible (el) // Code geht hier
Wie Sie sehen, haben wir eine Funktion namens hangIfEligible () was einen Parameter benötigt: das DOM-Element, das wir auf Beginn der Interpunktion prüfen.
Den Text des Elements abrufen
Jetzt erstellen wir die Variablen, die wir brauchen. Zuerst müssen wir den Text in das DOM-Element holen. Dazu benutzen wir die innerText JavaScript-Eigenschaft Da dies in Firefox nicht funktioniert, verwenden wir auch die Textinhalt Eigenschaft, die tut.
var text = el.innerText || el.textContent;
Einrichten des HTML-Klassennamens
Da in unserem Beispiel zwei verschiedene Schriftarten verwendet werden (eine für Überschriften, eine für die Kopie), benötigen wir zwei unterschiedliche Klassen für die zwei verschiedenen Elementtypen.
Wenn Sie sich erinnern, unsere HTML-Klassen, die das Negative steuern Texteinzug Folgen Sie dem Benennungsmuster Einzug- und dann die Breite des Satzzeichens (klein, mittel oder groß). Wenn das Element eine Kopfzeile ist, fügen wir hinzu Header- zwischen ihnen. Die Klasse für kleine Breitenzeichen ist also Einzug klein für normale Kopie und Einrückung-Kopfzeile-klein für Überschriften.
In unserem JavaScript erstellen wir eine Variable für unsere HTML-Klasse und fügen sie an Header- später, wenn das aktuelle Tag ein Überschriftenelement ist.
var htmlClass = 'indent-';
Element für den Beginn der Interpunktion prüfen
Lassen Sie uns nun prüfen, ob der Text unseres aktuellen DOM-Elements mit einem der zuvor definierten Interpunktionszeichen beginnt. Dazu werden wir jeden Eintrag in unserem durchlaufen Marken Variable, in der wir die Satzzeichen definiert haben, die wir hängen möchten. Dann verwenden wir JavaScript Index von Eigenschaft, die überprüft werden soll, ob das erste Zeichen des Elementtextes mit einem unserer Satzzeichen übereinstimmt.
for (var-Marke in Markierungen) if (text.indexOf (mark) === 0) // Wenn es übereinstimmt, Code hier
Eine Aktualisierung auf Index von: JavaScript Index von sucht nach einer Zeichenfolge, bei der jedes Zeichen ein Element in einem Array ist. Zum Beispiel, var text = 'Ein String' würde so aussehen ['Ein Faden']. Das Index von Die Eigenschaft nimmt ein Zeichen und durchsucht das gesamte Array nach diesem Zeichen. Wenn er es findet, gibt er die Position des Charakters im Array zurück. In unserem Fall suchen wir also nach einem bestimmten Interpunktionszeichen. Wenn er an der ersten Stelle des Arrays (Index 0) gefunden wird, beginnt unser Text mit einer hängenden Interpunktion.
Klasse hinzufügen
Jetzt müssen wir nur noch eine Klasse zum Element hinzufügen, wenn das erste Zeichen seines Textes mit einem unserer Satzzeichen übereinstimmt.
Beginnt das Element in unserem Beispiel mit einem qualifizierten Interpunktionszeichen, müssen wir prüfen, ob das aktuelle Element ein Header ist (da unsere Header modifizierte HTML-Klassen benötigen). Also in dem Teil, wo wir hatten // Wenn es passt, hier Code eingeben wir werden dies setzen:
Sehen Sie, was wir gemacht haben Wenn es sich bei dem aktuellen Element um eine Überschrift handelt, haben wir angefügt Header- zum HTML-Klassennamen. Die HTML-Klasse, die zu unserem DOM-Element hinzugefügt wird, ist folgendermaßen aufgebaut:
Einzug- standardmäßig
Header- angehängt, wenn das aktuelle Element eine Kopfzeile ist
klein, Mittel, oder groß wird abhängig von der definierten Breite des aktuellen Interpunktionszeichens hinzugefügt
Der gesamte Code zusammen
Der gesamte Code würde zusammen so aussehen:
// Prüfen Sie, ob das übergebene Element // mit einem der qualifizierenden Interpunktionstypen beginnt // Wenn dies der Fall ist, wenden Sie die entsprechende Klasse an, abhängig vom Tagtyp. Funktion hangIfEligible (el) var text = el.innerText || el.textContent; var htmlClass = 'indent-'; for (var Marke in Markierungen) if (text.indexOf (mark) === 0) if (el.tagName === 'H1' || el.tagName === 'H2' || el.tagName = == 'H3' || el.tagName === 'H4' || el.tagName === 'H5') htmlClass + = 'header-'; el.classList.add (htmlClass + marks [mark]));
Schritt 8: Führen Sie die Funktion beim Laden der Seite aus
Jetzt müssen Sie nur noch die Funktion ausführen, wenn die Seite geladen wird. Sie können dies mit ein paar Zeilen Code tun:
window.onload = function () var container = document.querySelector ('. post') hangPunctuation (container); container.classList.add ('hängende Interpunktion');
Sehen Sie, was wir hier gemacht haben. Ruf den hangPunctuation Funktion und übergeben Sie das enthaltende DOM-Element des Textkörpers, in dem Sie die Interpunktion aufhängen möchten.
Beachten Sie, dass wir dem Containerelement eine Klasse hinzufügen. Sie können diese Klasse zum Aufhängen verwenden
Listen, wenn Sie möchten. Fügen Sie einfach CSS hinzu: .Hang-Interpunktion ul margin: 0; Auffüllen: 0: List-Style-Position: außerhalb;
Der endgültige Code
Das ist es! Wir sind alle fertig. Hier ist der endgültige Code:
/ * * Hängende Interpunktion * Diese Funktion verwendet ein DOM-Element, * sucht jede seiner direkten Nachkommen *, und wenn das Element mit einer hängenden Interpunktion beginnt, * wird die entsprechende HTML-Klasse auf das Element angewendet. * * Dann erhält das übergeordnete DOM-Element eine Klasse, um * die von uns angewendeten Kinderklassen zu aktivieren. * / function hangPunctuation (container) // Satzzeichen, die für hängende var marks geeignet sind = '\ u201c': 'medium', // "- ldquo - linkes, doppeltes Anführungszeichen '\ u2018': 'small', / / '- lsquo - linkes intelligentes einfaches Anführungszeichen' \ u0022 ':' medium ', // "- ldquo - linkes dummes Anführungszeichen' \ u0027 ':' klein ', //' - lsquo - linkes dummes einfaches Anführungszeichen '\ u00AB ':' large ', // "- laquo - linkes doppeltes Winkelzitat' \ u2039 ':' medium ', //‹ - lsaquo - linkes einfaches Winkelzitat' \ u201E ':' medium ', // „- bdquo - linkes intelligentes doppeltes niedriges Zitat '\ u201A': 'small', // '- sbquo - linkes intelligentes einfaches niedriges Zitat; // Schleife über alle direkten Nachkommen des Containers // Wenn es sich um eine Blockquote handelt, Schleife über seine direkten Nachkommen nach (i = 0; i
Es ist gut zu wissen, dass diese Lösung keineswegs umfassend ist. Es ist höchstwahrscheinlich ein Anpassen für jedes Projekt erforderlich, für das es verwendet wird, da sich jedes Projekt in der Schriftartauswahl, der Markup-Struktur usw. unterscheidet. Wenn Sie jedoch Langform-Text erstellen, kann diese Lösung dazu beitragen, Ihrem Layout ein wenig typografische Verfeinerung zu verleihen.
Ergänzende Lektüre:
Hängende Interpunktion zu CSS-Tricks
Mark Boulton über hängende Interpunktion
Hängende Interpunktion in CSS3 von The Recovering Physicist
Harry Roberts behandelt hängende Aufzählungspunkte und Blockquotes im Smashing Magazine
Ein alternativer Ansatz
Seit der Veröffentlichung dieses Artikels haben auch andere mit ihren Ideen dazu beigetragen. Schauen Sie sich die Kommentare an und Sie werden Gunnar Bittersmanns inspirierende Interpretation des von uns besprochenen CSS finden. Lane Olson kombinierte diese Gedanken sogar mit meinem JavaScript, um eine Demo auf Codepen zu erstellen.
Accentsconagua
Share
