Expérience en CSS de composition chinoise

Apprenez les standards du web pendant plusieurs mois et concevez et produisez des pages web selon les standards. J'ai toujours voulu écrire quelque chose et mettre de l'ordre dans mes propres expériences. Cet article est principalement écrit pour la conception de composition chinoise. La composition anglaise est rarement effectuée, elle n'est donc pas impliquée.

Tout d'abord, nous présenterons des applications relativement simples telles que la façon de définir les polices, les couleurs, les tailles et les espaces de paragraphe. Plus tard, nous présenterons des éléments tels que les lettrines et les retraits de première ligne. Enfin, nous parlerons de certaines mises en page chinoises couramment utilisées sur les pages Web, telles que la troncature des caractères chinois, le retour à la ligne à la largeur fixe (retour à la ligne et saut de mot), etc. Parce que j'écris juste une expérience d'application, si vous avez besoin d'une introduction complète aux propriétés CSS, veuillez vous référer au manuel CSS.

1. Comment définir la police, la couleur et la taille du texte - utilisez la police

font-style pour définir l'italique, telle que la police- style : italic;

font-weight définit l'épaisseur du texte, par exemple font-weight: bold;

font-size définit la taille du texte, par exemple font-size: 12px; 9pt, différent Pour les problèmes d'affichage des unités, veuillez vous référer au manuel CSS)

line-height définit l'espacement des lignes, tel que line-height : 150%

color définit la couleur du texte ( notez pas font-color), comme color: red;

font-family définit la police, comme font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans- serif; (il s'agit d'une méthode d'écriture courante)

Tout ce qui précède peut être écrit sur une seule ligne d'attributs de police (sauf l'attribut color, qui doit être écrit séparément) :

font : italique gras 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans -serif

2. Comment contrôler la disposition des paragraphes - utiliser la marge, text-align

Le paragraphe chinois utilise des balises

, les marges peuvent être utilisées à gauche et à droite (équivalent à indentation), ainsi que les espaces avant et après les paragraphes. Par exemple :

p{ 
margin: 18px 6px 6px 18px; /*分别是上、右、下、左，十二点开始的顺时针方向*/ 
}

La méthode d'alignement du texte est l'alignement du texte, par exemple :

p{ 
text-align: center; /*居中对齐*/ 
}

Les méthodes d'alignement incluent gauche, droite et justifier ( justifier les deux extrémités) )

PS. En parlant de marge, j'ai l'habitude de définir margin: 0; pour toutes les balises lors de l'écriture de CSS, car il y a parfois des problèmes de mise en page causés par la valeur de marge par défaut, et je peux le faire. Je ne trouve pas la raison (Portez une attention particulière aux balises telles que ul/ol/p/dt/dd)

3. Texte vertical - utilisez le mode écriture

L'attribut writing-mode a deux valeurs : lr-tb et tb-rl, la première est la valeur par défaut gauche-droite, haut-bas, et la seconde est haut-bas, droite-gauche. .

Par exemple :

p{ 
writing-mode: tb-rl; 
}

peut être combiné avec la disposition des directions.

4. Problème avec les puces - utilisation du style de liste

Dans les puces CSS, incluez le disque (point plein), le cercle (cercle ouvert), carré (carré plein), décimal (chiffres arabes), romain inférieur (chiffres romains minuscules), romain supérieur (chiffres romains majuscules), alphabétique inférieur (lettres anglaises minuscules), alphabétique supérieure (lettres anglaises majuscules), aucun (aucun). Par exemple, définissez les puces d'une liste (ul ou ol) sur des carrés, tels que :

li{ 
list-style: square; 
}

De plus, list-style a également certaines valeurs. Par exemple, vous pouvez en utiliser. petites images sous forme de puces. Écrivez simplement l'url ("adresse de l'image") directement sous le style de liste. Notez que si la marge gauche d'une liste d'éléments est définie sur zéro, les puces avec list-style-position: outside (la valeur par défaut est outside) ne seront pas affichées. Malheureusement, les puces mentionnées ci-dessus ne semblent pas pouvoir définir la taille et les points et les carrés sont toujours les mêmes. Et l'alignement vertical ne peut pas être défini.

5. Lettrine - utiliser : première lettre

Pseudo-objet : la première lettre peut être utilisée avec font-size et float Créer un effet lettrine.

Par exemple :

p:first-letter{ 
padding: 6px; 
font-size: 32pt; 
float: left; 
}

6. Indentation de première ligne - utilisez text-indent

text -indent peut indenter la première ligne du conteneur d'une certaine unité.

Par exemple, les paragraphes chinois comportent généralement deux caractères chinois avant chaque paragraphe. Vous pouvez écrire comme ceci :

p{ 
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/ 
}

Si la taille de la police est de 12 px, alors text-indent : 2em sera indenté de 24 px.

7. À propos de la notation phonétique chinoise - utilisez les balises ruby ​​​​et les attributs ruby-align

Par exemple, vous pouvez utiliser ruby-align pour définir l'alignement. Ceci est visible dans le manuel CSS. Vous pouvez vérifier l'élément Ruby-align pour plus de détails.

8. Troncation des caractères chinois à largeur fixe - utiliser le débordement de texte

Utiliser la langue d'arrière-plan pour tronquer le contenu du champ dans la base de données, par exemple, coupez 12 caractères chinois (utilisez ensuite des points de suspension). Mais parfois, il est nécessaire de filtrer les balises html, etc., mais utiliser CSS pour contrôler ne pose pas ce problème. Par exemple, appliquez le style suivant à une liste :

li{ 
overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 
}

不过只能处理文字在一行上的截断，不能处理多行。 

9、固定宽度汉字（词）折行 —— 使用word-break 

举个例子，比如说要在一个固定宽度容器里面显示很多地名（假设以空格分隔），为了避免地名中间断开（即一个字在上面而另一个字折断到下一行去了）。则可以使用word-break。比如：

南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海

值得注意的是里面的空格不能以 代替（最少要有一个软空格）。