writing-modeNieruchomość zmienia wyrównanie tekstu tak, że można go czytać od góry do dołu lub od lewej do prawej, w zależności od języka. Na przykład, powiedzmy, że chcemy dodać tekst, który jest czytany od góry do dołu i od prawej do lewej, na przykład:
.vertical-rl ( writing-mode: vertical-rl; )Zobacz tryb pisania piórem: vertical-rl autorstwa CSS-Tricks (@ css-tricks) na CodePen.
Jest to najbardziej przydatne w językach takich jak chiński, japoński czy koreański, w których tekst jest często ustawiony pionowo. W języku angielskim jest bardziej prawdopodobne, że będziesz chciał użyć tej właściwości ze względów estetycznych, takich jak wyrównanie nagłówka w bloku tekstu w następujący sposób:
Zobacz Pen YWBWGA autorstwa CSS-Tricks (@ css-tricks) na CodePen.
Wartości
W poniższych przykładach uczyniłem pierwszą literę tekstu czerwoną, aby łatwiej było zobaczyć, w którym kierunku musisz zacząć czytać.
poziomy-tb
To jest domyślna wartość właściwości: tekst jest czytany od lewej do prawej i od góry do dołu.
Zobacz Pen writing-mode: horizontal-tb autorstwa CSS-Tricks (@ css-tricks) w CodePen.
vertical-rl
Tekst jest czytany od prawej do lewej i od góry do dołu:
Zobacz tryb pisania piórem: vertical-rl autorstwa CSS-Tricks (@ css-tricks) na CodePen.
vertical-lr
Tekst jest czytany od lewej do prawej i od góry do dołu:
Zobacz tryb pisania piórem: vertical-rl autorstwa CSS-Tricks (@ css-tricks) na CodePen.
Powiązane linki
- Tekst pionowy z trybami pisania CSS3
- Ahmad Shadeed o trybie pisania
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |