Cho văn bản HTML ôm hình SVG bằng CSS float

Để văn bản HTML ôm quanh hình bóng SVG, hãy cho ảnh float, đặt kích thước rõ ràng và đặt shape-outside thành URL SVG trong suốt. Thêm shape-margin để có khoảng cách quanh đường bao. Đoạn văn vẫn là HTML thông thường; SVG cung cấp ảnh dùng để tính ranh giới dòng văn bản.

Cách này hoạt động bên ngoài SVG. Nó không ngắt dòng phần tử SVG text hoặc uốn chữ dọc đường dẫn. Ví dụ bên dưới dùng hình bóng trong suốt tự tạo và một đoạn văn đầy đủ, không đặt từng từ thủ công hoặc chèn xuống dòng.

Chọn bố cục văn bản thực sự cần

Tệp SVG không mang bố cục đoạn văn xung quanh. Sao chép ảnh sang tài liệu khác không chuyển theo quan hệ HTML/CSS này.

1. Cho float kích thước và ảnh trong suốt

Tham chiếu shape-outside của MDN mô tả thuộc tính là cách đổi vùng float mà nội dung nội tuyến kế bên ôm quanh. Với giá trị mặc định, vùng đó theo hộp lề của float. URL ảnh thay vào đó suy ra hình từ alpha ảnh, tức độ trong suốt.

Màu nhìn thấy không phải tín hiệu ranh giới. Nền trắng đục vẫn có alpha và có thể làm minh họa hoạt động như hình chữ nhật. Kiểm tra chính tệp, không chỉ nhìn hình trắng trên trang trắng. Giữ vùng ngoài hình bóng trong suốt.

Lưu thiết kế tự tạo này thành 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>

Kích thước nội tại là 150 × 180, và CSS dùng cùng chiều rộng, chiều cao. Giữ tỷ lệ khung hình nhất quán giúp dễ kiểm tra quan hệ giữa hình hiển thị và ảnh dùng tính hình ôm.

Ảnh trong ví dụ có tính trang trí nên thuộc tính alt rỗng. Với ảnh có ý nghĩa, cung cấp văn bản thay thế phù hợp trên trang; văn bản ôm quanh không tự truyền đạt ý nghĩa ảnh.

2. Chạy ví dụ HTML đầy đủ

Lưu thành index.html cạnh 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>

Phục vụ thư mục qua HTTP, chẳng hạn dùng python -m http.server 8000, rồi mở http://localhost:8000/index.html. Hai tệp khi đó cùng nguồn. URL tệp cục bộ không phải thiết lập tải đã thử ở đây.

Đổi class="sample narrow contour" thành class="sample narrow" để so sánh cách ôm float chữ nhật thông thường. Đổi narrow thành wide để thử cột 520 pixel. Đoạn văn và ảnh giữ nguyên.

Tham chiếu display mô tả flow-root là tạo ngữ cảnh định dạng khối. Ở đây nó chứa ảnh float trong mẫu. Nó không định vị từ; bố cục nội tuyến của trình duyệt làm việc đó.

3. Kiểm tra các dòng kết xuất ở nhiều chiều rộng

Chúng tôi chạy bốn mẫu hiển thị trong Chromium 155 dùng Arial 16px với chiều cao dòng 24px. Ảnh giữ 150 × 180px, còn cột có chiều rộng nội dung cố định 360px và 520px. Cả hai mẫu đường bao dùng shape-margin: 10px và shape-image-threshold: 0.5.

Đường bao hẹp thay đổi cách ngắt dòng mà không giảm tổng số dòng. Ở chiều rộng lớn hơn, mẫu đường bao dùng ít hơn bản chữ nhật đối chứng một dòng.

Chúng tôi đo hình chữ nhật DOM Range gốc cho từng từ và nhóm theo vị trí dọc. Đó là phép đo dòng văn bản đã kết xuất, không phải truy cập đối tượng hộp dòng bên trong trình duyệt. Chúng tôi cũng kiểm tra cài đặt float và hình đã tính, kích thước ảnh được tải và mẫu alpha trong ảnh SVG thực tế.

Ở cả hai chiều rộng, một số dòng theo đường bao bắt đầu bên trái mép loại trừ 150px của float chữ nhật. Văn bản cũng trở lại dùng toàn cột sau ảnh. Những quan sát này cho thấy đường bao được thử ảnh hưởng bố cục thật, không chỉ đổi hình thức ảnh chụp.

Dòng và tọa độ chính xác tùy phông, trình duyệt, đoạn văn, ảnh và chiều rộng. Thay câu hoặc tải phông khác có thể đổi chúng. Thử nội dung thực tế ở cỡ hẹp và rộng thay vì giữ các số này như hằng số thiết kế.

4. Xử lý lề hình, alpha và tải ảnh riêng biệt

shape-margin nới hình ôm để tạo chỗ giữa hình và văn bản. Giá trị 10px ở đây là lựa chọn bố cục, không phải khoảng cách tối thiểu đo được giữa mọi ký tự nhìn thấy và mọi điểm trên minh họa.

Đặc tả CSS Shapes giữ mô hình hộp bình thường và cắt hiệu ứng hình theo hộp lề của float. Lề hình lớn không làm hộp CSS của ảnh lớn hơn. Nếu thiết kế cần thêm chỗ, cũng kiểm tra kích thước float và lề thông thường.

shape-image-threshold chọn ngưỡng alpha để trích hình ảnh. Mẫu gốc có bên ngoài hoàn toàn trong suốt và hình giữa đục. Bóng mềm hoặc mép bán trong suốt cần chọn ngưỡng có chủ đích và kiểm tra trực quan; đổi ngưỡng không thể biến nền đục thành trong suốt.

URL ảnh cũng phải đủ điều kiện tải làm hình. CSS Shapes quy định yêu cầu CORS cho URL ảnh và bỏ hình tùy chỉnh khi tải thất bại. Đặt SVG cạnh trang tránh phụ thuộc khác nguồn trong ví dụ. Nếu CDN lưu ảnh, cấu hình phản hồi CORS của máy chủ đó và kiểm tra yêu cầu cùng bố cục. Chỉ thấy ảnh trong phần tử img không xác nhận yêu cầu hình thành công.

5. Giữ thứ tự văn bản và kiểm tra trang hoàn chỉnh

Cả bốn đoạn thử giữ chính xác cùng văn bản trong một nút văn bản, không có phần tử br hoặc định vị từng từ. CSS đổi chỗ xuống dòng trực quan mà không viết lại thứ tự DOM của đoạn. Chúng tôi không chạy phiên với trình đọc màn hình hoặc khẳng định kiểm toán khả năng tiếp cận từ kiểm tra nguồn đó.

Giữ đoạn văn dễ đọc khi ảnh không có hoặc bố cục đổi. Với cột rất hẹp, cách đơn giản hơn đặt ảnh trên đoạn có thể dễ đọc hơn dải chữ mỏng bên cạnh. Kiểm tra điểm chuyển bố cục và nội dung của bạn thay vì thu chữ nhỏ để ép hiệu ứng đường bao.

Float vẫn dành một hộp CSS. Ôm theo hình không biến nó thành chướng ngại chung mà văn bản chảy quanh mọi phía. Trong ví dụ float trái này, chữ kế bên ôm phía phải rồi tiếp tục bên dưới.

Sửa triệu chứng tại nguồn

Nếu minh họa phẳng phù hợp chỉ còn ở dạng raster và bạn cần hình bóng chỉnh được, quy trình clipart sang SVG của PerfectVector có thể giúp khôi phục bản ứng viên. So sánh đường bao và vùng ngoài trong suốt với nguồn rồi thử URL SVG thật trong trang. Ảnh raster trong suốt cũng có thể cung cấp hình CSS dựa trên ảnh; SVG không bắt buộc chỉ để bật ôm theo alpha.

Giữ SVG sạch sẵn có nếu bạn có. Vector hóa không dựng bố cục HTML xung quanh, không giữ ngữ nghĩa đoạn văn thay bạn hoặc bảo đảm kết quả ôm của một trình duyệt cụ thể.

Câu hỏi thường gặp

shape-outside có ngắt dòng văn bản bên trong SVG không? Không. Ví dụ này thay đổi luồng nội tuyến HTML cạnh ảnh float. Nhãn SVG, HTML nhúng trong SVG và chữ đi theo đường dẫn là các nhiệm vụ bố cục khác.

Tại sao SVG trông trong suốt vẫn được ôm như hình chữ nhật? Kiểm tra nền đục trong tệp, yêu cầu ảnh hình thất bại, thiếu kích thước float hoặc ngữ cảnh bố cục làm float không hoạt động. Pixel trắng không giống pixel trong suốt.

Có cần chuyển PNG thành SVG trước không? Không nếu chỉ để ôm dựa trên alpha. Ảnh raster trong suốt phù hợp cũng cung cấp được hình. Dùng SVG khi cần thiết kế chỉnh được hoặc yêu cầu vector khác.

Chỗ xuống dòng có giữ nguyên ở mọi cỡ màn hình không? Không. Chiều rộng có sẵn, thông số phông, văn bản, kích thước ảnh và bố cục trình duyệt ảnh hưởng các dòng. Thử nội dung thực tế ở nhiều chiều rộng.

Nguồn

1. MDN shape-outside — Mô tả vùng float và hình ảnh suy ra từ alpha.
2. MDN shape-margin — Định nghĩa khoảng thêm quanh hình ôm.
3. MDN shape-image-threshold — Định nghĩa ngưỡng alpha dùng cho hình ảnh.
4. CSS Shapes Module Level 1 — Quy định giới hạn hộp float, tải ảnh và hành vi CORS.
5. MDN display và flow-root — Giải thích ngữ cảnh định dạng dùng để chứa float.

Nếu thiếu thiết kế chỉnh được, chuẩn bị bản SVG clipart ứng viên, kiểm tra hình bóng và độ trong suốt, rồi xác minh bố cục đoạn văn thật trong trang ở các chiều rộng bạn định hỗ trợ.