shape-outside - Propriété CSS
Résumé des caractéristiques de la propriété shape-outside
none
| margin-box
| border-box
| padding-box
| content-box
none
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.
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
etcontent-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 queclosest-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.
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
; shape-outside:inherit
; shape-outside:revert
; shape-outside:revert-layer
; shape-outside:unset
;La valeur initiale est :
.none
Exemples d'utilisation de shape-outside
.
Voici ce qu'il est possible de faire avec la propriété shape-outside
.
Utilisation d'une forme de base (cercle, polygone...).
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.
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.
shape-outside
, ils contraignent le texte
à adopter cette forme.
Animation de la propriété 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 utilsiée avec une forme
de base (circle()
, polygon()
, etc.
Manipulation de la propriété shape-outside
par programme.
Dans la démo ci-dessous, l'élément carré noir est flottant à gauche. Les codes modifient la valeur de sa propriété [shape-outside
}
L'effet est immédiatement répercuté sur l'affichage.
Modifier la valeur de shape-outside
en Javascript.
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).
function setShapeOutside(el) {
el.style['shape-outside']='border-box';
// ou
el.style.shapeOutside='border-box';
}
Lire en Javascript 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.
function getShapeOutside(el) {
alert(el.style['shape-outside']);
// ou
alert(el.style.shapeOutside);
}
Lire la valeur calculée de shape-outside
en Javascript.
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 règles de priorité).
A défaut, la valeur calculée sera la valeur initiale de la propriété (none
dans le cas de shape-outside
).
function getCalcShapeOutside(el) {
alert(window.getComputedStyle(el).getPropertyValue('shape-outside'));
}
Modifier la valeur de la propriété shape-outside
avec JQuery.
Comme en Javascript, les notations kebab-case
et camel-case
sont acceptées pour le nom de la propriété.
function setShapeOutside(el) {
$(el).css('shape-outside','margin-box');
// ou
$(el).css('shapeOutside','margin-box');
}
Lire la valeur calculée de la propriété shape-outside
avec JQuery.
function getCalcShapeOutside(el) {
alert($(el).css('shape-outside'));
// ou
alert($(el).css('shapeOutside'));
}
Simulateur.
Élément flottant
Prise en charge par les navigateurs (compatibilité).
shape-outside
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que shape-outside
.
Les spécifications CSS éditées par le W3C sont organisées en modules. shape-outside
fait partie du Module CSS - Formes de base (CSS Shapes Module). Les définitions suivantes sont également décrites dans ce même module.