È possibile avvolgere il testo attorno a un'immagine non rettangolare?Come posso avvolgere il testo attorno a un'immagine non rettangolare?
Voglio che il testo attorno alle mappe di diversi paesi avvolga la forma del paese in modo tale che il testo mantenga sempre la stessa distanza dal confine del paese anche se il bordo non è dritto.
È possibile?
Ci sono cose come CSSTextWrapper, che consente di definire un'area trascinando punti, quindi fornisce il codice da implementare.
Oppure altri modi like this method, dove si fanno fluttuare i div per bloccare l'area della forma.
Quindi, la risposta è "Sì, può essere fatto". Ma per quanto ne so non c'è un modo "facile" come un'opzione "text-wrap" CSS.
Sembra che questo tipo di supporto sia all'orizzonte.
Come ha detto Dave, c'è CSSTextWrapper, che è probabilmente il modo migliore per farlo in questo momento, ma un relatively recent W3C working draft delinea un metodo da utilizzare forme più complesse utilizzando SVG, e le immagini raster forse con rilevamento contorno.
Quanto tempo ci vorrà per essere implementato nei principali browser, per non parlare del fatto che sia finito, è un errore.
Al momento, può essere fatto, con difficoltà. Con fortuna, sarà molto più facile in futuro.
A partire da marzo 2016 l'esclusione CSS3 non è ancora utilizzabile: http://caniuse.com/#search=css%20shapes%7Cexclusion – Pit
C'è un plugin jQuery chiamato Bagon progettato per fare esattamente questo.
Come altri hanno già detto: sì, è possibile ... ma non è così difficile.
I clienti tendono a come questo tipo o involucro, alla fine ho fatto uno script per esso: http://www.miguel-svq.com/textwrap.html
Questo può utilizzare div galleggianti o tagliare l'immagine, come si preferisce.
Lo dubito fortemente. Le immagini bitmap (che è la stragrande maggioranza delle immagini) sono rettangolari (se hanno parti trasparenti o meno). E CSS e HTML sono piuttosto orientati "a scatola". – cHao
Potrebbe diventare una possibilità reale in futuro. http://coding.smashingmagazine.com/2011/12/15/six-css-layout-features-to-look-forward-to/#exclusions (scorrere verso il basso un po ') –