Oblewanie kształtu SVG tekstem HTML za pomocą CSS float

Aby tekst HTML oblewał sylwetkę SVG, ustaw obraz jako float, nadaj mu jawne wymiary i ustaw shape-outside na URL przezroczystego SVG. Dodaj shape-margin, aby uzyskać przestrzeń wokół konturu. Akapit pozostaje zwykłym HTML; SVG dostarcza obraz służący do obliczenia granicy oblewania.

Działa to poza SVG. Nie zawija elementu SVG text ani nie wygina liter wzdłuż ścieżki. Poniższy przykład wykorzystuje autorską przezroczystą sylwetkę i kompletny akapit bez ręcznego pozycjonowania słów czy wstawionych podziałów wiersza.

Wybierz rzeczywiście potrzebny układ tekstu

Plik SVG nie przenosi układu otaczającego akapitu. Skopiowanie obrazu do innego dokumentu nie przeniesie tej relacji HTML/CSS.

1. Nadaj floatowi rozmiar i przezroczysty obraz

Dokumentacja shape-outside MDN opisuje właściwość jako sposób zmiany obszaru float, wokół którego zawija się sąsiednia treść liniowa. Przy wartości domyślnej obszar odpowiada polu marginesu floatu. URL obrazu wyznacza natomiast kształt z alfy obrazu, czyli przezroczystości.

Widoczny kolor nie jest sygnałem granicy. Nieprzezroczyste białe tło nadal ma alfę i może sprawić, że ilustracja zachowuje się jak prostokąt. Sprawdź sam plik, a nie tylko białą grafikę na białej stronie. Zachowaj przezroczystość poza sylwetką.

Zapisz tę autorską grafikę jako silhouette.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="180" viewBox="0 0 150 180">
  <path fill="#2f6977" d="M30 20 C80 5 135 35 138 75 C140 110 105 140 65 150 L45 170 L37 142 C8 125 8 85 22 62 C10 47 16 31 30 20 Z"/>
</svg>

Jej rozmiar wewnętrzny to 150 × 180, a CSS używa tej samej szerokości i wysokości. Spójne proporcje ułatwiają kontrolę relacji wyświetlanej grafiki i obrazu kształtu.

Obraz w przykładzie jest dekoracyjny, więc ma pusty atrybut alt. Znaczącemu obrazowi nadaj odpowiedni tekst alternatywny na stronie; oblewanie go tekstem nie przekazuje automatycznie jego znaczenia.

2. Uruchom kompletny przykład HTML

Zapisz to jako index.html obok silhouette.svg:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>HTML text around an SVG silhouette</title>
<style>
* { box-sizing: border-box; }
.sample {
  display: flow-root;
  color: #183a42;
  font: 16px/24px Arial, sans-serif;
}
.sample p { margin: 0; }
.sample img { float: left; width: 150px; height: 180px; margin: 0; }
.sample.narrow { width: 360px; }
.sample.wide { width: 520px; }
.sample.contour img {
  shape-outside: url("silhouette.svg");
  shape-image-threshold: 0.5;
  shape-margin: 10px;
}
</style>
<div class="sample narrow contour">
  <img src="silhouette.svg" alt="">
  <p>The neighborhood library keeps a small garden beside its reading room. Volunteers label the seedlings, share spare pots, and record which plants attract insects. A curved illustration can sit beside this paragraph while the browser keeps the words in their original order. As the column becomes narrower, the same sentence needs different line breaks. The artwork remains the same size in this example, so the available room beside it changes. After the illustration ends, the paragraph can use the full column again. Editors can revise this text without moving individual words or drawing separate text lines. The layout belongs to the web page, while the SVG supplies the visible silhouette.</p>
</div>
</html>

Udostępnij folder przez HTTP, na przykład za pomocą python -m http.server 8000, i otwórz http://localhost:8000/index.html. Oba pliki mają wtedy wspólne pochodzenie. Lokalny URL pliku nie jest konfiguracją wczytywania przetestowaną tutaj.

Zmień class="sample narrow contour" na class="sample narrow", aby porównać zwykłe prostokątne oblewanie floatu. Zmień narrow na wide, aby sprawdzić kolumnę 520 pikseli. Akapit i obraz pozostają niezmienione.

Dokumentacja display opisuje flow-root jako tworzenie blokowego kontekstu formatowania. Tutaj zamyka on pływający obraz w obrębie próbki. Nie pozycjonuje słów; robi to układ liniowy przeglądarki.

3. Sprawdź wyrenderowane wiersze przy różnych szerokościach

Uruchomiliśmy cztery widoczne próbki w Chromium 155 z Arial 16px i wysokością wiersza 24px. Obraz pozostał 150 × 180px, a kolumny miały stałe szerokości treści 360px i 520px. Obie próbki konturowe używały shape-margin: 10px i shape-image-threshold: 0.5.

Wąski kontur zmienił zawijanie bez zmniejszenia łącznej liczby wierszy. Przy większej szerokości próbka konturowa użyła o jeden wiersz mniej niż prostokątny wariant kontrolny.

Zmierzyliśmy natywne prostokąty DOM Range dla każdego słowa i pogrupowaliśmy według pozycji pionowej. To pomiary wyrenderowanych rzędów tekstu, a nie dostęp do wewnętrznych obiektów line-box przeglądarki. Sprawdziliśmy też obliczone ustawienia float i kształtu, wymiary wczytanego obrazu i próbki alfy rzeczywistego SVG.

Przy obu szerokościach niektóre wiersze konturowe zaczynały się na lewo od prostokątnej granicy wykluczenia 150px. Tekst wracał też do pełnej kolumny za obrazem. Obserwacje pokazują wpływ badanego konturu na rzeczywisty układ, a nie sam wygląd zrzutu.

Dokładne wiersze i współrzędne zależą od czcionki, przeglądarki, akapitu, obrazu i szerokości. Zmiana zdania lub wczytanie innej czcionki może je zmienić. Testuj własną treść w wąskich i szerokich rozmiarach zamiast zachowywać te liczby jako stałe projektu.

4. Oddziel margines kształtu, alfę i wczytywanie

shape-margin rozszerza kształt oblewania, tworząc przestrzeń między nim a tekstem. Wartość 10px jest wyborem układu, a nie zmierzonym minimalnym odstępem każdego widocznego glifu od każdego punktu ilustracji.

Specyfikacja CSS Shapes zachowuje zwykły model pudełkowy i ogranicza działanie kształtu do pola marginesu floatu. Duży margines kształtu nie nadaje obrazowi większego pudełka CSS. Jeśli projekt wymaga więcej miejsca, sprawdź także wymiary floatu i zwykłe marginesy.

shape-image-threshold wybiera próg alfy używany do wyodrębnienia kształtu. Oryginalna próbka ma całkowicie przezroczyste otoczenie i nieprzezroczystą grafikę centralną. Miękkie cienie lub półprzezroczyste krawędzie wymagają świadomego progu i oceny wizualnej; zmiana progu nie zamieni nieprzezroczystego tła w przezroczyste.

URL obrazu musi też nadawać się do wczytania kształtu. CSS Shapes określa żądanie CORS dla URL obrazów i rezygnuje z niestandardowego kształtu przy błędzie wczytywania. Udostępnienie SVG obok strony eliminuje tu zależność od innego pochodzenia. Jeśli hostuje go CDN, skonfiguruj odpowiedź CORS serwera i sprawdź żądanie oraz układ. Sama widoczność obrazu w img nie potwierdza powodzenia żądania kształtu.

5. Zachowaj kolejność tekstu i sprawdź gotową stronę

Wszystkie cztery badane akapity zachowały dokładnie ten sam tekst w jednym węźle tekstowym, bez elementów br i pozycjonowania poszczególnych słów. CSS zmienił wizualne podziały wierszy bez przepisywania kolejności DOM akapitu. Nie przeprowadziliśmy sesji z czytnikiem ekranu ani nie deklarujemy audytu dostępności na podstawie tej kontroli źródła.

Zachowaj czytelność akapitu przy niedostępnym obrazie lub zmienionym układzie. W bardzo wąskich kolumnach prostszy układ z obrazem nad akapitem może być czytelniejszy od cienkiego paska tekstu obok. Sprawdź własny breakpoint i treść zamiast zmniejszać tekst dla wymuszenia efektu konturu.

Float nadal rezerwuje pudełko CSS. Oblewanie kształtu nie zmienia go w ogólną przeszkodę otaczaną tekstem ze wszystkich stron. W tym przykładzie lewego floatu sąsiedni tekst zawija się po prawej, a następnie biegnie poniżej.

Napraw objaw u źródła

Jeśli odpowiednia płaska ilustracja zachowała się tylko jako raster i potrzebujesz edytowalnej sylwetki, proces clipartu do SVG PerfectVector może pomóc odzyskać kandydata. Porównaj kontur i przezroczyste otoczenie ze źródłem, a potem sprawdź rzeczywisty URL SVG na stronie. Przezroczysty raster także może dostarczyć obrazowy kształt CSS; SVG nie jest wymagane tylko do uruchomienia oblewania według alfy.

Zachowaj czysty istniejący SVG, jeśli go masz. Wektoryzacja nie buduje otaczającego układu HTML, nie zachowuje za ciebie semantyki akapitu ani nie gwarantuje konkretnego wyniku zawijania w przeglądarce.

FAQ

Czy shape-outside zawija tekst wewnątrz SVG? Nie. Ten przykład zmienia przepływ liniowy HTML obok pływającego obrazu. Etykiety SVG, HTML osadzony w SVG i tekst na ścieżce są różnymi zadaniami układu.

Dlaczego przezroczysto wyglądający SVG nadal oblewany jest jak prostokąt? Sprawdź nieprzezroczyste tło pliku, błąd żądania kształtu, brak rozmiaru floatu lub kontekst, w którym float jest nieaktywny. Białe piksele nie są przezroczystymi pikselami.

Czy muszę najpierw przekonwertować PNG na SVG? Nie tylko dla oblewania według alfy. Odpowiedni przezroczysty raster też może dostarczyć kształt. Użyj SVG, gdy uzasadniają to edycja lub inne wymagania wektorowe.

Czy podziały wierszy będą jednakowe na każdym ekranie? Nie. Dostępna szerokość, metryki czcionki, tekst, rozmiar obrazu i układ przeglądarki wpływają na wiersze. Testuj rzeczywistą treść przy więcej niż jednej szerokości.

Źródła

1. MDN shape-outside — opisuje obszary float i kształty obrazu wyznaczane przez alfę.
2. MDN shape-margin — definiuje odstęp dodawany wokół kształtu oblewania.
3. MDN shape-image-threshold — definiuje próg alfy kształtów obrazowych.
4. CSS Shapes Module Level 1 — określa granice pudełka float, wczytywanie obrazów i działanie CORS.
5. MDN display i flow-root — wyjaśnia kontekst formatowania zamykający float.

Jeśli brakuje edytowalnej grafiki, przygotuj kandydata clipart SVG, sprawdź sylwetkę i przezroczystość, a potem zweryfikuj rzeczywisty układ akapitu na stronie przy szerokościach, które chcesz obsługiwać.