La propriété text-combine-upright définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'1em, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur 1em. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.

Cela permet d'obtenir un effet appelé tate-chū-yoko (縦中横) en japonais ou 直書橫向 en chinois.

/* Valeurs avec un mot-clé */
text-combine-upright: none;
text-combine-upright: all;

/* Valeurs pour les chiffres */
/* 2 chiffres qui se suivent prendront la place
   d'un caractère dans du texte vertical */
text-combine-upright: digits;
/* Compresse jusqu'à 4 chiffres consécutifs afin
   qu'ils occupent l'espace d'un caractère dans 
   du texte vertical */
text-combine-upright: digits 4;

/* Valeurs globales */
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: unset;

Syntaxe

Valeurs

none
Aucun traitement particulier n'est appliqué.
all
L'agent utilisateur tente de compresser tous les caractères consécutifs dans une même boîte afin qu'ils occupent l'espace d'un seul caractère sur l'axe vertical de la boîte.
digits <n>?
L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030–U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle [2;4] sont considérés comme invalides.

Syntaxe formelle

none | all | [ digits <integer>? ]

Exemples

Exemple avec digits

Utiliser digits nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs.

<p lang="ja" class="exempleText">平成20年4月16日に</p>
.exempleText {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
  font: 36px serif;
}
ScreenshotLive sample

Exemple avec all

Pour utiliser all, on devra baliser chaque fragment de texte horizontal mais cette valeur est actuellement mieux prise en charge que digits.

<p lang="zh-Hant">民國<span class="num">105</span
>年<span class="num">4</span
>月<span class="num">29</span>日</p>
html { writing-mode: vertical-rl; font: 24px serif }
.num { text-combine-upright: all }
ScreenshotLive sample

Spécifications

Spécification État Commentaires
CSS Writing Modes Module Level 3
La définition de 'text-combine-upright' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
CSS Writing Modes Level 4
La définition de 'text-combine-upright' dans cette spécification.
Candidat au statut de recommandation Ajout de la valeur digits.
Valeur initialenone
Applicabilitéles éléments en ligne non remplacés
Héritéeoui
Médiavisuel
Valeur calculéele mot-clé spécifié suivi d'un entier si 'digits'
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
text-combine-uprightChrome Support complet 48
Support complet 48
Support partiel 9
Notes Autre nom
Notes This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-text-combine
Edge Support complet 12
Autre nom
Support complet 12
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -ms-text-combine-horizontal
Firefox Support complet 48
Notes
Support complet 48
Notes
Notes Before version 48, Firefox did not implement layout support for tate-chū-yoko.
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the layout.css.text-combine-upright.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 31 — 41
Désactivée
Désactivée From version 31 until version 41 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 26 — 31
Autre nom Désactivée
Autre nom Cette fonctionnalité utilise le nom non-standard : text-combine-horizontal
Désactivée From version 26 until version 31 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Autre nom
Support complet 11
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -ms-text-combine-horizontal
Opera Support complet 35
Support complet 35
Support partiel 15
Notes Autre nom
Notes This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-text-combine
Safari Support partiel 5.1
Notes Autre nom
Support partiel 5.1
Notes Autre nom
Notes This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-text-combine
WebView Android Support complet 48
Support complet 48
Support partiel Partiel
Notes Autre nom
Notes This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-text-combine
Chrome Android Support complet 48
Support complet 48
Support partiel 18
Notes Autre nom
Notes This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-text-combine
Firefox Android Support complet 48
Notes
Support complet 48
Notes
Notes Before version 48, Firefox did not implement layout support for tate-chū-yoko.
Support complet 41
Désactivée
Désactivée From version 41: this feature is behind the layout.css.text-combine-upright.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 31 — 41
Désactivée
Désactivée From version 31 until version 41 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 26 — 31
Autre nom Désactivée
Autre nom Cette fonctionnalité utilise le nom non-standard : text-combine-horizontal
Désactivée From version 26 until version 31 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 35
Support complet 35
Support partiel 14
Notes Autre nom
Notes This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-text-combine
Safari iOS Support partiel 5
Notes Autre nom
Support partiel 5
Notes Autre nom
Notes This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-text-combine
Samsung Internet Android Support complet 5.0
Support complet 5.0
Support partiel 1.0
Notes Autre nom
Notes This property was initially named -webkit-text-combine according to a 2011 version of the CSS3 Writing Modes specification, supporting the values none and horizontal without digits.
Autre nom Cette fonctionnalité utilise le nom non-standard : -webkit-text-combine
digitsChrome Aucun support NonEdge Support complet 12Firefox Support complet 48
Notes Désactivée
Support complet 48
Notes Désactivée
Notes Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635).
Désactivée From version 48: this feature is behind the layout.css.text-combine-upright-digits.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 48
Notes Désactivée
Support complet 48
Notes Désactivée
Notes Firefox recognizes this value but does not yet implement layout support for tate-chū-yoko (see bug 1258635).
Désactivée From version 48: this feature is behind the layout.css.text-combine-upright-digits.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot
Dernière mise à jour par : SphinxKnight,