La ponctuation hors justification est un puissant outil typographique permettant de créer des corps de texte optiquement alignés. Malheureusement, il a été en grande partie oublié sur le Web… jusqu'à maintenant. Nous allons examiner la valeur de la ponctuation suspendue et comment vous pouvez partiellement l'implémenter en utilisant un peu de javascript et une règle CSS en vigueur depuis des années..
Ponctuation suspendue: une introduction
Lorsque Gutenberg créa sa Bible dans les années 1400, il développa un style de frappe de ponctuation persistant, appelé «ponctuation suspendue» (également appelé alignement optique)..
Qu'est-ce que la ponctuation suspendue??
La ponctuation suspendue est une méthode permettant de définir des signes de ponctuation. à l'extérieur les marges d'un corps de texte. Cela crée l’apparence d’un bord uniforme dans le texte et permet un meilleur flux optique..
La ponctuation suspendue a une incidence sur la façon dont vous percevez la disposition du texte sur une page..
Où se produit la ponctuation suspendue
La ponctuation hors justification se produit dans les marges en dehors de l'alignement du reste du texte. Vous pouvez accrocher des signes de ponctuation dans du texte aligné à gauche, aligné à droite ou justifié.
Pourquoi nous accrochons la ponctuation
La théorie derrière la raison pour laquelle la ponctuation est importante est la suivante:
Les signes de ponctuation dans le texte n'occupent qu'une petite quantité de hauteur. D'habitude, cela ne pose pas de problème, mais lorsque le signe de ponctuation est le premier caractère sur le bord droit d'un corps de texte, il laisse un espacement vertical anormal qui peut perturber le flux visuel d'un corps de texte..
La ponctuation suspendue corrige cette perturbation. Naturellement, certaines marques tomberont sur le bord du texte. Plutôt que de les laisser là et de perturber le flux optique du corps du texte, le typographe atténue les perturbations en suspendant les signes de ponctuation dans les marges..
Quelles marques de ponctuation peuvent être alignées optiquement?
Étant donné que la ponctuation hors tout atténue les perturbations dues aux marques de hauteur minuscule, vous devez généralement suspendre les marques de hauteur minuscule telles que les guillemets ("" ") et les traits d'union (- -). Vous devez éviter de suspendre les signes de le point d'exclamation (!) et le point d'interrogation (?).
Ponctuation suspendue: sur papier et sur le Web
La prise en charge de la ponctuation suspendue dans les programmes de publication assistée par ordinateur, tels que Adobe InDesign, a beaucoup évolué. InDesign fournit d'excellents outils pour suspendre la ponctuation dans les corps de texte. Bien sûr, c’est formidable pour les concepteurs de logiciels de publication assistée par ordinateur, mais qu’en est-il des concepteurs Web??
Le problème avec la ponctuation suspendue sur le Web est que tout est construit avec des boîtes. Les règles de style en CSS utilisent le «modèle de boîte» qui englobe tous les éléments HTML dans des boîtes. Ces boîtes sont composées de marges, bordures, marges et contenu.
Par défaut, tous les caractères de texte sur le Web résident dans une zone. La ponctuation suspendue, en revanche, nécessite que les caractères soient à l'extérieur la boîte. Cela a été un problème délicat à résoudre avec un logiciel. La mise en œuvre de l’astuce typographique de la ponctuation suspendue a donc été largement ignorée sur le Web, tant par les concepteurs que par les fabricants de navigateurs. Comme le dit Mark Boulton, il est vraiment dommage qu'un aspect aussi important de la composition ait été balayé sous le tapis..
Ponctuation suspendue et la spécification
Cela peut vous surprendre, mais la ponctuation hors justification se trouve en réalité dans le module de texte CSS3. La propriété de ponctuation hors justification, cependant, est marquée comme facultative, ce qui contribue au fait que personne ne l’a encore implémentée. En fait, si elle n'est pas implémentée, la propriété est "à risque et peut être retirée de la spécification pendant sa période de validité si aucune implémentation (correcte) n'a été effectuée"..
Comme aucun navigateur n’a encore implémenté cette propriété, nous n’entrerons pas dans les détails d’implémentation pour la ponctuation pendante propriété. Cependant, si vous êtes curieux, vous pouvez lire la spécification elle-même ou la présentation de Chris Coyer sur les astuces CSS pour plus d'informations..
Marques de ponctuation pour la suspension
Il y a une information précieuse que nous pouvons extraire de la spécification. Il détaille les signes de ponctuation à suspendre:
U + 002C
,
VIRGULE
U + 002E
.
ARRÊT COMPLET
U + 060C
,
COMMA ARABE
U + 06D4
.
ARRÊT PLEIN
U + 3001
,
COMMA IDÉOGRAPHIQUE
U + 3002
.
IDÉOGRAPHIQUE PLEIN STOP
U + FF0C
,
COMMA COMPLÈTE
U + FF0E
.
PLEIN ARRET COMPLET
U + FE50
,
PETIT COMMA
U + FE51
﹑
PETIT COMMA IDÉOGRAPHIQUE
U + FE52
.
Petit arrêt complet
U + FF61
.
HALFWIDTH IDEOGRAPHIC PLEIN STOP
U + FF64
,
COMMA HALFWIDTH IDÉOGRAPHIQUE
La spécification indique que d’autres caractères peuvent être suspendus, le cas échéant, ce qui est bien car cette liste n’est pas exhaustive. Par exemple, la spécification ne mentionne pas les tirets, ce que la typographie traditionnelle désigne comme une ponctuation digne d'être suspendue..
Comme recommandé dans The Recovering Physicist, les langues occidentales traditionnelles ne seront vraisemblablement suspendues qu'aux signes de ponctuation suivants:
Point de code
Personnage
prénom
Entité HTML
Catégorie Unicode
U + 00AB
"
COTATION DOUBLE ANGLE POINTANT À GAUCHE
«
Pi
U + 00BB
"
COTATION DOUBLE ANGLE POINTANT À DROITE
»
Pf
U + 2018
'
DROIT DE COTATION SIMPLE
’
Pi
U + 2018
'
DEVIS UNIQUE À GAUCHE
‘
Pf
U + 201C
“
DOUBLE COTATION GAUCHE
“
Pi
U + 201D
”
DOUBLE COTATION DROITE
”
Pf
U + 2039
‹
COTATION D'ANGLE UNIQUE A GAUCHE
‹
Pi
U + 203A
›
MARQUE DE COTATION UNIQUE À ANGLE POINTANT À DROITE
›
Pf
U + 2010
-
TRAIT D'UNION
& # x2010;
PD
U + 2013
-
EN DASH
-
PD
U + 2014
-
EM DASH
-
PD
Pour les langues occidentales, les signes de ponctuation tels que les tirets, les points, les virgules, les points-virgules, les points-virgules, etc. sont généralement suspendus à la marge de droite car ils ne commencent normalement pas de paragraphes ou n'apparaissent pas à la marge de gauche..
Apporter la ponctuation suspendue sur le Web maintenant
Dans l'idéal, vous devez suspendre toute ponctuation qualifiante dans un paragraphe de texte. Toutefois, il s'agit du Web et du support CSS incomplet complique la mise en œuvre intégrale de la ponctuation suspendue dans les textes alignés à gauche et à droite, ainsi que dans les textes justifiés..
Il est plus facile de contrôler les signes de ponctuation suspendus dans une seule marge, par exemple la marge gauche du texte aligné à gauche. Les éléments de niveau bloc comme , , à travers les balises commençant par une ponctuation qualifiante peuvent utiliser un négatif retrait du texte valeur pour accrocher la ponctuation.
Il est à noter que la ponctuation suspendue utilisant un négatif retrait du texte ne vous permettra d’accrocher la ponctuation qu’au tout début d’un paragraphe. Le texte étant rediffusé sur le Web en fonction de la taille de l'écran, vous ne savez jamais où tomberont les signes de ponctuation. Le signe de ponctuation de début est le seul dont vous pouvez être sûr de la position.
En dépit de ces inconvénients, il peut être utile d’explorer les possibilités de suspendre la ponctuation au début. C'est un choix typographique que vous pouvez faire en tant que designer.
Dans ce didacticiel, nous verrons comment suspendre la ponctuation initiale dans des textes en anglais occidental aligné à gauche. Rappelez-vous que le code est malléable. Vous pouvez prendre les exemples de ce tutoriel et les ajuster pour répondre à tous vos besoins. Espérons que, dans le futur, les navigateurs résoudront mieux le problème des signes de ponctuation suspendus..
Étape 1: Un aperçu rapide
L’idée de mettre en œuvre la ponctuation hors justification pour le texte aligné à gauche est plutôt simple. Utilisez JavaScript pour rechercher tous les éléments DOM éligibles dans le contexte d'une mise en page d'article commençant par une ponctuation pouvant être suspendue. Une fois trouvé, appliquez une classe HTML à l’élément ayant une valeur négative pour le retrait du texte règle.
Étape 2: Examen du balisage
Regardons un exemple de base de balisage utilisé pour mettre en page un simple post de blog. Le texte de l'article serait présenté dans les titres, les sous-titres, les listes et les citations, le tout comme des éléments frères, comme ceci:
Le titre de l'article
Du texte ici…
"Un paragraphe" qui commence par une ponctuation à accrocher…
Une sous-rubrique pour l'article
Texte ici…
Texte cité…
En plusieurs paragraphes…
Plus de texte…
"Un sous-titre" commençant par la ponctuation
Encore du texte…
Liste du texte…
Un deuxième élément de liste
Plus de texte…
Dernier paragraphe.
Votre propre modèle de balisage peut en différer. Dans ce cas, vous pouvez modifier ultérieurement le javascript pour rechercher des éléments DOM en fonction de la manière dont votre balisage est disposé. Pour ce tutoriel, nous utiliserons ce modèle de balisage simple..
Afin de suspendre la ponctuation de départ pour les éléments d’un bloc de texte, nous devons d’abord définir les marques de ponctuation pouvant être suspendues, ce que nous avons analysé précédemment dans le didacticiel. Il est important de se rappeler que différentes langues utilisent des guillemets (et des signes de ponctuation) de différentes manières. Par exemple, observez comment l'anglais et le gallois utilisent les guillemets primaires et secondaires:
Anglais: J'ai dit à Johnny: "Mark Twain a déjà dit:" Si vous dites la vérité, vous ne devez vous souvenir de rien. "
gallois: J'ai dit à Johnny, "Mark Twain a dit une fois:" Si vous dites la vérité, vous ne devez vous souvenir de rien. "
Remarquez comment ils sont complètement opposés? Ces différences ne sont que le début. Jetez un coup d'œil à cet exemple d'utilisation de guillemets primaires et secondaires dans quelques langues seulement (vous pouvez voir une compilation plus grande sur Wikipedia):
La langue
Primaire
Secondaire
Anglais
“…”
'…'
gallois
'…'
“…”
croate
„…”
'…'
allemand
„…“
'…'
grec
"..."
“…”
français
"..."
‹…›
Il est bon de prendre en compte ces différences. Par conséquent, si vous devez travailler avec des langues autres que l'anglais occidental, vous aurez une meilleure idée des marques de ponctuation à suspendre..
Étape 3: Configuration du CSS
Nous avons maintenant quelques balises de base pour notre disposition de texte. Nous allons utiliser JavaScript pour analyser chacun de ces objets DOM et trouver ceux qui commencent par une ponctuation pouvant être suspendue. Pour ceux qui commencent par une ponctuation qualifiante, nous appliquerons une classe HTML avec une valeur négative pour retrait du texte règle qui accrochera la ponctuation dans la marge gauche.
La partie délicate ici consiste à définir la valeur de votre retrait du texte règle. Différentes polices nécessiteront des valeurs différentes, cela nécessitera donc quelques modifications et personnalisations de votre part. Par exemple, une citation double intelligente (“) a une largeur plus épaisse qu'une citation simple intelligente ('). Par conséquent, si vous suspendez la ponctuation, l’élément DOM qui commence par une double guillemet intelligente nécessitera une valeur plus grande pour le paramètre retrait du texte règle qu'un élément DOM commençant par une citation simple intelligente.
Une note sur les polices
Non seulement le retrait du texte La valeur sera différente selon la largeur du signe de ponctuation que vous suspendez, mais cela dépendra également de la police de caractères que vous utilisez. Bien sûr, il s’agit du Web et vous ne pouvez pas toujours vous assurer que les utilisateurs utiliseront une police de caractères donnée. Cependant, les polices Web sécurisées ont une bonne ubiquité, tandis que les polices non Web sécurisées disposent de méthodes à toute épreuve permettant de fournir des polices spécifiques à des clients. Dans les deux cas, vous pouvez vous assurer que tout le monde voit la même police..
Quelle que soit la police ou la pile de polices utilisée, il est bon de prévisualiser et d'ajuster votre retrait du texte valeurs par police (et de préférence de tailles différentes). Cela garantit que vos signes de ponctuation suspendus s'aligneront correctement.
Les classes de ponctuation pendantes
En supposant que tous les éléments de notre publication utilisent le même caractère, nous pouvons configurer trois classes définissant trois largeurs: petite, moyenne et grande. En fonction du type de ponctuation avec lequel il commence, notre JavaScript appliquera l'une de ces trois classes à l'élément DOM, nous donnant ainsi une ponctuation suspendue.!
Remarquez que nous utilisons em des mesures. Cela garantit la retrait du texte sera toujours relative à la taille de police du texte de l'article. Donc, si la taille de la police est augmentée, vous ne devrez pas changer le retrait du texte valeurs.
Les classes de ponctuation pendantes: deux polices
Mais que se passe-t-il si vous utilisez deux types de caractères différents dans votre mise en page? Dans l'exemple que nous utilisons, nos éléments de corps de texte (
) utilise une police de caractères sans empattement (Helvetica Neue, Arial fallback) tandis que nos en-têtes (
) utilisez une autre police de caractères sans empattement (Source Sans Pro). Les signes de ponctuation de Source Sans Pro sont, par conception, plus larges que ceux de Helvetica Neue et Arial. Ainsi, les éléments DOM définis dans Source Sans Pro (en-têtes) vont nécessiter un peu plus grand retrait du texte valeurs que les éléments DOM définis dans Helvetica Neue (listes, paragraphes, etc.).
Ceci est assez facile à gérer en ajoutant des classes supplémentaires spécifiquement pour les en-têtes. Nous allons simplement utiliser JavaScript pour détecter le type d'élément, puis appliquer la classe appropriée.
Maintenant que nous avons le balisage et les CSS dont nous avons besoin, nous allons utiliser JavaScript pour découvrir tous les éléments DOM descendants directs de notre conteneur d’articles. Nous vérifions ensuite si ces éléments DOM commencent par des signes de ponctuation à suspendre..
Pour commencer, nous allons créer une fonction qui contiendra tout notre code. Cette fonction prendra un argument, qui est l'élément DOM contenant le texte que nous voulons analyser pour la ponctuation suspendue, par exemple le conteneur d'un article de blog..
/ * * Ponctuation suspendue * Cette fonction prend un élément DOM, * recherche chacun de ses descendants directs * et, si l'élément commence par une ponctuation pouvant être suspendue, * la classe HTML appropriée est appliquée à l'élément. * * Ensuite, l'élément DOM parent obtient une classe pour activer * les classes enfants que nous avons appliquées. * / function hangPunctuation (container) // le code va ici
Remarque: la ponctuation suspendue est un aspect de l’amélioration progressive. Dans cet exemple, nous allons utiliser du JavaScript natif qui n'est pas entièrement pris en charge par les navigateurs hérités (en vous regardant dans IE). Si vous voulez que cela fonctionne dans les anciens navigateurs, vous pouvez le faire. La plupart des choses que nous allons faire est de sélectionner des éléments du DOM et de changer leurs classes. Vous pouvez facilement incorporer jQuery pour cela ou utiliser des fonctions d’aide de youmightnotneedjquery.com.
Étape 5: Définition des caractères de ponctuation
Nous devons créer une liste de ponctuation pouvant être suspendue. En utilisant les caractères que nous avons définis précédemment comme référence, nous pouvons créer un objet en JavaScript définissant nos signes de ponctuation (par leurs points Unicode):
// Marques de ponctuation pouvant être suspendues var marks = '\ u201c': 'moyen', // “- ldquo - citation double intelligente de gauche '\ u2018': 'petit', // '- lsquo - single intelligent de gauche citation '\ u0022': 'moyen', // "- ldquo - citation muette double gauche '\ u0027': 'petit', // '- lsquo - citation simple muette gauche' \ u00AB ':' grand ', // "- laquo - citation de double angle gauche '\ u2039': 'moyen', //‹ - lsaquo - citation de simple angle gauche '\ u201E': 'moyen', // „- - bdquo - de gauche intelligent double citation '\ u201A ':' small ', //' - sbquo - smart single low quote quote;
Comme vous pouvez le constater, nous définissons une liste de signes de ponctuation à suspendre avec une définition de largeur correspondant à nos classes HTML. Cet objet nous indique les signes de ponctuation à suspendre et la taille de leurs points négatifs. retrait du texte la valeur devrait être. Cette liste n'est pas compréhensible. La beauté est que nous allons parcourir toute la liste en boucle, vous pouvez donc ajouter des signes de ponctuation supplémentaires à cette liste si nécessaire..
Étape 6: boucle sur chaque élément enfant
Nous allons maintenant parcourir tous les descendants directs de notre élément conteneur (qui a été passé dans la fonction). Pour ce faire, nous allons d’abord configurer un pour boucle:
// Boucle sur tous les descendants directs du conteneur // S'il s'agit d'un blockquote, boucle sur ses descendants directs pour (i = 0; i
Suivant (à l'intérieur du pour boucle) nous allons créer une variable appelée el qui représente chaque élément descendant direct du conteneur sur lequel nous bouclons (obtenez les descendants d’un élément à l’aide de la commande .les enfants propriété):
var el = conteneur.children [i];
Maintenant, nous allons passer notre el variable à une autre fonction (hangIfEligible ()), qui vérifiera si elle commence par un signe de ponctuation pouvant être suspendu. Si tel est le cas, cette autre fonction appliquera la classe HTML appropriée à l'élément.
if (el.tagName === 'BLOCKQUOTE') pour (var k = 0; k < el.children.length; k++) hangIfEligible(el.children[k]); ; else hangIfEligible(el);
Remarquez ce que nous avons fait avec le blockquote étiquette? Parce que blockquote Les éléments peuvent avoir des éléments descendants commençant par une ponctuation suspendue (comme le tag), nous devons également passer en revue chacun de ses enfants. Donc, si l’élément actuel sur lequel nous bouclons est un blockquote balise, nous passons en boucle sur chacun de ses enfants et les passons à notre hangIfEligible () une fonction. Si ce n'est pas un blockquote élément, nous passons l'élément courant lui-même à la hangIfEligible () une fonction.
Si nous ne faisions pas spécifiquement une boucle sur les enfants du blockquote élément, ses enfants nous manqueraient et une chance de suspendre la ponctuation.
Notre pour La boucle devrait maintenant ressembler à ceci:
// Boucle sur tous les descendants directs du conteneur // S'il s'agit d'un blockquote, boucle sur ses descendants directs pour (i = 0; i
Étape 7: Accrocher la ponctuation
Nous avons passé l'élément enfant actuel à notre hangIfEligible () une fonction. Alors maintenant, définissons ce que cette fonction fait:
// Vérifie si l'élément passé // commence par l'un des types de ponctuation éligibles // Si c'est le cas, appliquez la classe appropriée en fonction du type de balise function hangIfEligible (el) // le code est ici
Comme vous pouvez le voir, nous avons une fonction nommée hangIfEligible () qui prend un paramètre: l'élément DOM que nous vérifions pour le début de la ponctuation.
Obtenir le texte de l'élément
Créons maintenant les variables dont nous avons besoin. Nous devons d’abord obtenir le texte à l’intérieur de l’élément DOM. Pour ce faire, nous allons utiliser le innerText Propriété JavaScript. Parce que cela ne fonctionne pas dans Firefox, nous allons également utiliser le textContent propriété qui fait.
var text = el.innerText || el.textContent;
Configuration du nom de la classe HTML
Parce que notre exemple utilise deux polices différentes (une pour les en-têtes, une pour la copie), nous aurons besoin de deux classes différentes pour les deux types d'élément.
Si vous vous en souvenez, nos classes HTML qui contrôlent le négatif retrait du texte suivre le modèle de nommage retrait- et ensuite la largeur de la ponctuation (petite, moyenne ou grande). Si l'élément est un en-tête, nous ajoutons entête- entre eux. Donc, la classe des signes de ponctuation de faible largeur est indent-petit pour copie normale et indent-header-small pour les titres.
Dans notre code JavaScript, nous allons créer une variable pour notre classe HTML et ajouter entête- plus tard si la balise actuelle est un élément de titre.
var htmlClass = 'indent-';
Vérification de l'élément pour la ponctuation de début
Maintenant, vérifions si le texte de notre élément DOM actuel commence par l’un des signes de ponctuation définis précédemment. Pour ce faire, nous allons parcourir chacune des entrées de notre des notes variable où nous avons défini les signes de ponctuation que nous voulons accrocher. Ensuite, nous utiliserons JavaScript Indice de propriété à vérifier pour voir si le premier caractère du texte de l'élément correspond à l'un de nos signes de ponctuation.
for (marque var dans les marques) if (text.indexOf (marque) === 0) // Si cela correspond, codez ici
Un rafraîchissement sur Indice de: JavaScript Indice de regarde une chaîne où chaque caractère est un élément d'un tableau. Par exemple, var text = 'Une chaîne' ressemblerait à ceci ['Un string']. le Indice de property prend un caractère et recherche dans tout le tableau à la recherche de ce caractère. S'il le trouve, il retourne la position du personnage dans le tableau. Donc, dans notre cas, nous recherchons un certain signe de ponctuation. S'il se trouve à la toute première position du tableau (index 0), notre texte commence par une ponctuation pouvant être suspendue..
Ajout d'une classe
Il ne nous reste plus qu'à ajouter une classe à l'élément si le premier caractère de son texte correspond à l'un de nos signes de ponctuation..
Dans notre exemple, si l'élément commence par un signe de ponctuation qualifiant, nous devons ensuite vérifier si l'élément actuel est un en-tête (nos en-têtes ont besoin de classes HTML modifiées). Donc, dans la partie où nous avons eu // si cela correspond, code ici nous allons mettre ceci:
Tu vois ce qu'on a fait? Si l'élément actuel était un titre quelconque, nous avons ajouté entête- au nom de la classe HTML. La classe HTML qui est ajoutée à notre élément DOM est construite comme suit:
retrait- par défaut
entête- ajouté si l'élément en cours est un en-tête
petit, moyen, ou grand ajouté en fonction de la largeur définie du signe de ponctuation actuel
Tout le code ensemble
L'ensemble de ce code ressemblerait à ceci:
// Vérifie si l'élément passé // commence par l'un des types de ponctuation éligibles // Si c'est le cas, appliquez la classe appropriée en fonction du type de balise. Fonction hangIfEligible (el) var text = el.innerText || el.textContent; var htmlClass = 'indent-'; for (marque var dans les marques) if (text.indexOf (marque) === 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]);
Étape 8: Exécuter la fonction sur le chargement de page
Il ne vous reste plus qu'à exécuter la fonction lors du chargement de la page. Vous pouvez le faire avec quelques lignes de code:
window.onload = function () var conteneur = document.querySelector ('. post') hangPunctuation (conteneur); container.classList.add ('hang-ponctuation');
Vous voyez ce que nous avons fait ici? Appeler le HangPunctuation fonction et passage dans l'élément DOM contenant du corps de texte dans lequel vous souhaitez suspendre la ponctuation.
Notez que nous ajoutons une classe à l'élément conteneur. Vous pouvez utiliser cette classe pour accrocher
listes si vous voulez. Ajoutez simplement quelques CSS comme suit: .ponctuation du blocage ul margin: 0; padding: 0: list-style-position: outside;
Le code final
C'est tout! Nous avons tous fini. Voici le code final:
/ * * Ponctuation suspendue * Cette fonction prend un élément DOM, * recherche chacun de ses descendants directs * et, si l'élément commence par une ponctuation pouvant être suspendue, * la classe HTML appropriée est appliquée à l'élément. * * Ensuite, l'élément DOM parent obtient une classe pour activer * les classes enfants que nous avons appliquées. * / function hangPunctuation (container) // Les signes de ponctuation pouvant être suspendus var marks = '\ u201c': 'medium', // “- ldquo - gauche double guillemet intelligent '\ u2018': 'petit', / / '- lsquo - citation simple intelligente de gauche' \ u0022 ':' moyen ', // "- ldquo - citation muette double gauche' \ u0027 ':' petit ', //' - lsquo - citation simple muette gauche '\ u00AB ':' grand ', // "- laquo - citation double angle gauche' \ u2039 ':' moyen ', //‹ - lsaquo - citation simple angle gauche' \ u201E ':' moyen ', // „- bdquo - citation intelligente double gauche '\ u201A': 'petit', // '- sbquo - citation intelligente simple gauche;; // Boucle sur tous les descendants directs du conteneur // S'il s'agit d'un blockquote, boucle sur ses descendants directs pour (i = 0; i
Il est bon de rappeler que cette solution n’est en aucun cas exhaustive. Cela nécessitera probablement des ajustements pour chaque projet sur lequel il est utilisé, car chaque projet diffère en termes de choix de police de caractères, de structure de balisage, etc. Toutefois, si vous mettez en page un texte longue, cette solution peut vous aider à ajouter un peu d'affinement typographique à votre mise en page.
Lecture supplémentaire:
Ponctuation suspendue sur les astuces CSS
Mark Boulton sur la ponctuation suspendue
Ponctuation suspendue en CSS3 par le physicien récupérateur
Harry Roberts couvre les points pendants et les citations sur Block dans Smashing Magazine
Une approche alternative
Depuis la publication de cet article, d’autres ont également intégré leurs idées. Jetez un coup d'œil aux commentaires et vous découvrirez comment Gunnar Bittersmann a inspiré le CSS dont nous avons parlé. Lane Olson a même combiné ces pensées avec mon JavaScript pour faire une démonstration sur Codepen.
Accentsconagua
Share
