Exclusies & geometrische vormen

(Exclusions & shapes)

Niet-rechthoekige vormen

Twee soorten vormen:

• Vormen voor de inhoud: shape-inside
  • Vorm van de „content box”
  • Bepaalt de regellengtes binnen het element
• Vormen voor uitsparingen: shape-outside
  • Bepaalt hoe andere tekst om dit element heen loopt

Soorten vormen

• Afgeronde rechthoek
• Cirkel & ellips
• Veelhoek
• Extern: vorm gedefinieerd in SVG
• Extern: vorm gedefinieerd door een rasterafbeelding

  img {float: left; shape-outside: attr(src url)}

Opmerking: geen vormen waarvan de grootte afhangt van de inhoud

Vorm geven aan een afbeelding

<img id="panorama" src="panorama.jpg" alt="">

#panorama {
  position: absolute;
  wrap-flow: both;
  shape-outside:
    polygon(0px, 440px 62px, 481px...)
}

Tekst rond een uitsparing

De eigenschap wrap-flow:

• auto – als in niveau 2
• both – tekst vult de ruimte aan beide kanten
• left/start – tekst links van de uitsparing
• right/end – tekst rechts van de uitsparing
• maximum – links of rechts, waar de meeste ruimte is
• clear – tekst gaat verder onder de uitsparing

Prototypes

Experimentele implementaties (met prefix):

• „nightly builds” van Webkit
• IE 10 (wel wrap-flow, geen shape-outside of shape-inside)

Einde

→ Terug naar agenda