Shape-outside - Propriété CSS

shape-outside

Résumé des caractéristiques de la propriété `shape-outside`

Description rapide

Définit la forme du contournement du texte pour un élément flottant.

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

none | margin-box | border-box | padding-box | content-box

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété shape-outside passe progressivement d'une valeur à une autre. ⁽¹⁾

Module W3C

Module CSS - Formes de base

Références (W3C)

CSS Shapes Module Level 1

Statut du document: CR (document candidat à la recommandation)

(1) La propriété shape-outside peut être animée si utilisée avec une forme de base.

Schéma de la syntaxe de `shape-outside`.

Schéma syntaxique de la propriété shape-outside.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs. Télécharger le schéma en SVG

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

Description des termes utilisés sur le schéma :

shape est l'une des fonctions de forme connues en CSS : circle(), ellipse(), inset(), path(), polygon().
image est la spécification d'une image avec l'une ou l'autre des syntaxes de CSS : url(), image(), image-set(), cross-fade(), stripes(), element().

Description de la propriété `shape-outside`.

shape-outside définit la forme de l'habillage d'un élément, celle qui sera contournée par le texte si l'élément est flottant. Par défaut les éléments ont une forme rectangulaire.

Habillage d'un élément de forme rectangulaire

Cas classique : l'élément habillé à une forme rectangulaire (une photo par exemple).

Cas particulier : l'élément habillé a une forme non rectangulaire (un logo par exemple).

shape-outside permet également de choisir si l'habillage doit inclure les marges de l'élément flottant, sa bordure ou ses marges intérieures.

Pour rendre un élément flottant, consultez la page sur la propriété float. Consultez également les autres propriétés pour peaufiner l'habillage : shape-image-threshold et shape-margin.

Valeurs pour `shape-outside`.

shape-outside: none;

L'élément flottant est contourné suivant un contour rectangulaire, quelque soit sa forme réelle. Par exemple si l'élément flottant comporte des coins arrondis, l'habillage ne suivra pas ces arrondis.
shape-outside: margin-box;

Le texte d'habillage contourne l'élément flottant, en incluant les marges. Si ce dernier comporte des angles arrondis, l'habillage suivra ces arrondis.
shape-outside: border-box;

Le texte d'habillage ignore les marges et contourne l'élément en se calant sur la bordure. Comme pour la valeur margin-box, les arrondis sont pris en compte pour l'habillage.
shape-outside: padding-box;

Le texte d'habillage ignore les marges et la bordure, et se cale sur les marges intérieures (padding) de l'élément. Bien que la bordure soit exclue de l'habillage, les arrondis sont pris en compte.
shape-outside: content-box;

Le texte d'habillage ignore les marges, la bordure et les marges intérieures pour contourner uniquement le contenu de l'élément. Les angles arrondis, s'il y en a, sont pris en compte dans la forme de l'habillage.
shape-outside: inset(...); shape-outside: circle(...); shape-outside: ellipse(...); shape-outside: polygon(...);

Ces fonctions définissent la forme de l'habillage. Reportez-vous à leur description pour plus d'informations sur la syntaxe.
- inset() : forme rectangulaire.
- circle() : forme circulaire.
- ellipse() : forme elliptique (largeur et hauteur peuvent être différentes).
- polygon() : forme libre, composée de segments de droites.
Les valeurs prédéfinies margin-box, border-box, padding-box et content-box peuvent être mixées avec une fonction de forme. Cela a de l'influence lorsque les dimensions de la forme sont définies avec des mots tels que closest-side.
Exemple :

shape-outside: border-box circle(closest-side);

Voir également la propriété shape-margin pour définir un espace entre la forme et l'habillage.
shape-outside: url('chemin/image');

La forme de l'habillage est déterminée par le canal alpha de l'image, c'est à dire par les parties transparentes de l'image. L'image peut également être spécifiée par l'une des syntaxes reconnues par CSS : url(), image(), image-set(), cross-fade(), stripes(), element()

Attention ! Il sera nécessaire de définir le seuil de transparence avec la propriété shape-image-threshold.
En effet ce seuil est par défaut fixé à 0 : aucune partie de l'image ne sera considérée comme transparente.
shape-outside: initial; (none) shape-outside: inherit; shape-outside: revert; shape-outside: revertLayer; shape-outside: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemples d'utilisation de la propriété `shape-outside`.

Voici ce qu'il est possible de faire avec la propriété shape-outside.

Utilisation d'une forme de base (cercle, polygone...).

Cette image a été déclarée flottante sur la gauche, par la propriété float:left;. Compte-tenu de sa forme circulaire, on a souhaité obtenir un habillage également circulaire, afin d'épouser au plus proche le contour de l'image.

Utilisation du canal alpha d'une image.

La même image que dans l'exemple précédent, mais cette fois-ci l'habillage a été calé sur le canal alpha de l'image. Le seuil de transparence a été fixé à 0.1 avec la propriété shape-image-threshold.

Exemple plus complexe avec utilisation de deux polygones.

La structure complète de l'exemple n'est pas entièrement visible : il existe de part et d'autre du texte des éléments vides (donc invisibles). Ces éléments sont déclarés flottants avec une forme d'habillage définie par un polygone. En déplaçant la souris, vous pouvez faire apparaître ces éléments.

Dans cet autre exemple, la disposition du texte prend la forme d'un losange. Il existe en fait deux éléments flottants situés l'un à droite, et l'autre à gauche du texte. Ces éléments sont vides donc invisibles, mais, grâce à shape-outside, ils contraignent le texte à adopter cette forme.

Exemple d'animation de `shape-outside`.

L'animation de la propriété shape-outside n'est pas possible sur les valeurs prédéfinies (margin-box, border-box, etc.) mais peut cependant être obtenue lorsque shape-outside est utilisée avec une forme de base (circle(), polygon(), etc.

Ce texte n'est là que pour illustrer l'effet de la propriété shape-outside. Il n'est pas nécessaire d'en poursuivre la lecture jusqu'au bout. De toute façon, c'est la même phrase qui est copiée-collée plusieurs fois, comme vous allez le voir. Ce texte n'est là que pour illustrer l'effet de la propriété shape-outside. il n'est pas nécessaire d'en poursuivre la lecture jusqu'au bout. De toute façon, c'est la même phrase qui est copiée-collée plusieurs fois, comme vous allez le voir.

Accéder à la propriété `shape-outside` par programme.

Avec Javascript, modifier la valeur de `shape-outside`.

Deux exemples de syntaxes sont donnés. La première syntaxe utilise la notation kebab-case (un tiret pour séparer les mots) pour le nom de la propriété, et la deuxième utilise la notation camel-case (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['shape-outside'] = 'circle()';
	// ou
	let el = document.getElementById('id');
	el.style.shapeOutside = 'circle()';

Avec Javascript, lire la valeur de `shape-outside`.

L'exemple de code ci-dessous récupère la valeur de la propriété shape-outside si celle-ci a été affectée via l'attribut style de l'élément, donc dans le code HTML. Les valeurs affectées dans la feuille de styles via un sélecteur CSS ne sont pas prises en compte. Pour traiter ces valeurs, voir l'exemple suivant.


	let el = document.getElementById('id');
	let value = el.style['shape-outside'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.shapeOutside;

Avec Javascript, lire la valeur calculée de `shape-outside`.

La valeur calculée est toujours définie. Elle résulte de la cascade des héritages et des règles de priorité en cas de conflit (voir Les priorités). A défaut, la valeur calculée sera la valeur initiale de la propriété (none dans le cas de shape-outside).


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('shape-outside');

Avec JQuery, modifier la valeur de `shape-outside`.

Comme en Javascript, les notations kebab-case et camel-case sont acceptées pour le nom de la propriété.


 $('#id').css('shape-outside', 'circle()');
 // ou
 $('#id').css('shapeOutside', 'circle()');

Avec JQuery, lire la valeur calculée de `shape-outside`.


	let value = $('#id').css('shape-outside');

Test.

Les boutons ci-dessous appliquent la valeur saisie pour la propriété shape-outside et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de la propriété. En l'occurrence, pour shape-outside, la valeur est mémorisée telles qu'elle a été définie, sauf en ce qui concern les paramètres des fonctions, qui sont systématiquement convertis en pixels.

Exemple interactif avec la propriété `shape-outside`.

Élément flottant

Compatibilité des navigateurs avec `shape-outside`.

Propriété
shape-outside

Estimation de la prise en charge globale.

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `shape-outside`.

Module CSS - Formes de base - Niveau 1

Première présentation de la propriété shape-outside.

20 Juin 2013
Document de travail.
20 Mars 2014
Candidat à la recommandation.

Voir aussi.

Le tracé des formes en SVG ou HTML est décrit par le module CSS Shapes Module. On retrouve dans ce module la propriété shape-outside, ainsi que les descriptions suivantes :

Propriétés :

shape-image-threshold

Définit le seuil de transparence en vu de l'habillage d'une image.

shape-margin

Définit la marge pour l'habillage d'un élément flottant.

Fonctions :

circle()

Définit un cercle qui pourra étre utilisé pour découper un élément ou définir une marge de contournement.

ellipse()

Définit une ellipse.

inset()

Définit un rectangle, utilisable pour découper un élément.

path()

Définit un contour d'après la syntaxe SVG d'un chemin.

polygon()

Définit une forme.