Căn dọc văn bản SVG: Căn giữa nhãn được tạo lại

Với nhãn SVG nằm ngang, y đặt vị trí đường cơ sở đã chọn. Nó không đặt mép trên của chữ tại tọa độ đó. Bắt đầu với dominant-baseline="middle" khi đặt nhãn Latin ngắn quanh đường căn ngang, rồi kiểm tra kết quả trong phông chữ thực tế. Dùng text-anchor="middle" để căn giữa văn bản theo chiều ngang quanh tọa độ x.

Nhãn vẫn có thể trông cao hoặc thấp cạnh biểu tượng. middle và central dùng các đường cơ sở phông chữ khác nhau, trong khi căn giữa về thị giác phụ thuộc vào hình dạng trong từ. Quyết định bố cục cần chung đường cơ sở, hộp văn bản căn giữa hay điều chỉnh bằng mắt trước khi thêm độ lệch.

Chọn mục tiêu căn chỉnh

Cùng y="100" có thể tạo các vị trí chữ khác nhau:

Các định nghĩa đường cơ sở W3C phân biệt middle với central. Không định nghĩa nào đảm bảo căn giữa đường bao được vẽ của mọi từ. Bảng đường cơ sở của phông và cách suy đoán của bộ kết xuất cũng quan trọng, như tài liệu dominant-baseline của MDN giải thích.

Với văn bản ngang thông thường, text-anchor="middle" xử lý trục còn lại. Nó căn khối văn bản quanh vị trí ngang được cung cấp; không căn giữa theo chiều dọc. Xem tài liệu text-anchor để hiểu quan hệ với các khối văn bản.

Đối chiếu biểu tượng và nhãn văn bản còn chỉnh sửa được

Lưu ví dụ hoàn chỉnh này thành baseline-example.svg và mở trong trình duyệt. Vòng là hình học tự tạo; Agyp là chuỗi thử có phần chữ vươn lên và phần chữ kéo xuống. Đường đỏ đánh dấu y=100.

<svg xmlns="http://www.w3.org/2000/svg" width="840" height="400"
     viewBox="0 0 420 200">
  <path fill="#137f74" fill-rule="evenodd"
    d="M55 75A25 25 0 1 1 55 125A25 25 0 1 1 55 75
       M55 86A14 14 0 1 0 55 114A14 14 0 1 0 55 86"/>
  <path d="M20 100H400" fill="none" stroke="#c3594d"/>
  <text id="label" x="250" y="100" font-family="Arial, sans-serif"
        font-size="64" text-anchor="middle" dominant-baseline="middle"
        fill="#193e3a">Agyp</text>
</svg>

Chỉ đổi dominant-baseline thành alphabetic, rồi central. Giữ nguyên tọa độ, cỡ chữ và nội dung. Tiếp theo, đối chiếu một phông có sẵn thứ hai. Đổi nhiều thiết lập cùng lúc khiến khó nhận ra thiết lập nào di chuyển nhãn.

Chúng tôi kết xuất cả ba giá trị với các bản Arial và Times New Roman đã tải. Mỗi ô dùng cùng tọa độ SVG và vòng tự tạo. Các hình chữ nhật xanh thể hiện kết quả getBBox() của trình duyệt cho văn bản còn chỉnh sửa được.

Các ví dụ alphabetic nằm cao hơn so với đường giữa của vòng. Các ví dụ middle dịch xuống, còn central đặt hộp được báo gần đường căn. Số đo in dưới mỗi mẫu thuộc về những tệp phông này và lần kết xuất trong trình duyệt này. Chúng không phải độ lệch để sao chép sang thiết kế khác.

Các tệp phông của chúng tôi tải xong trước khi đo. SVG bạn xuất có thể chọn phông dự phòng khi phông yêu cầu không có; giải quyết sự phụ thuộc đó trước khi đánh giá căn chỉnh. Hướng dẫn thay đổi phông chữ SVG trình bày cách kiểm tra kiểu chữ thực tế và giữ bản bàn giao.

Hộp văn bản căn giữa vẫn có thể trông lệch

Giới hạn văn bản SVG không nhất thiết là hình chữ nhật nhỏ nhất bao quanh nét chữ nhìn thấy. Quy tắc hộp giới hạn SVG dùng ô ký tự cùng phần vươn lên/kéo xuống của phông để tính văn bản. Hình chữ nhật bao các ô đó có thể chứa khoảng trống mà không chữ nào tô lên.

Sự khác biệt đó quan trọng với nhãn như Agyp: g, y và p kéo xuống dưới đường cơ sở chữ cái. Nhãn toàn chữ hoa có phân bố thị giác khác. Phông dự định và nội dung thực tế cần có mặt trong bước căn chỉnh.

Với hàng nhãn cần đọc trên cùng một dòng, giữ chung đường cơ sở chữ cái. Dịch từng từ riêng đến khi hình nhìn thấy trông căn giữa có thể làm hàng bị lệch.

Với một tổ hợp biểu tượng và chữ, hãy đối chiếu nhãn ở kích thước cuối và chỉnh bằng mắt sau khi chọn đường cơ sở. Nếu bố cục yêu cầu căn theo đường bao chữ, dùng bản sao chữ dạng đường bao trong trình chỉnh sửa để kiểm tra hình học đó, đồng thời giữ văn bản còn chỉnh sửa được trong bản gốc. Xem giới hạn đường bao và điều chỉnh thị giác là hai quyết định riêng.

Căn giữa hộp văn bản SVG đo được khi đó là mục tiêu

Với phần tử <text> đơn giản, một dòng, không biến đổi, tính độ lệch từ tâm hộp được báo đến mục tiêu. Chạy đoạn này trong tài liệu chứa ví dụ, sau khi phông chữ sẵn sàng:

await document.fonts.ready;
 
const label = document.querySelector('#label');
const targetY = 100;
const originalY = label.y.baseVal.getItem(0).value;
const box = label.getBBox();
const shift = targetY - (box.y + box.height / 2);
 
label.setAttribute('y', String(originalY + shift));

Phép tính căn hộp văn bản được báo với targetY. Nó không tính cân bằng thị giác hay loại khoảng trống ô ký tự không dùng của phông. Đo lại sau khi đổi văn bản, phông, độ đậm hoặc cỡ.

document.fonts.ready chờ tải phông và công việc bố trí liên quan. Nó không chứng minh phông dự định đã được cung cấp thành công; cũng kiểm tra tài nguyên phông hoặc thông tin phông được kết xuất của trình duyệt.

Đoạn mã này giả định có một giá trị y, không đặt vị trí từng ký tự, không có độ lệch dy và không có nhóm văn bản đã biến đổi. getBBox() trả về hộp SVG cục bộ. Mục tiêu ở hệ tọa độ khác cần ánh xạ; dùng quy trình giới hạn SVG trước khi kết hợp pixel màn hình với đơn vị SVG.

Giải quyết thiết lập xung đột trước khi thêm độ lệch

Kiểm tra văn bản và các nhóm cha. dy còn sót, <tspan> lồng nhau hoặc phép biến đổi có thể thay đổi vị trí bạn đang chẩn đoán. Mỗi lần bỏ một điều chỉnh nghi ngờ trong bản sao rồi đối chiếu kết quả.

Cũng kiểm tra kiểu của trang. CSS có thể ghi đè thuộc tính trình bày dominant-baseline. Nếu đổi thuộc tính không thấy tác dụng, kiểm tra giá trị được tính trước khi thêm lần hiệu chỉnh thứ hai.

alignment-baseline xử lý cách đường cơ sở phần tử căn với đường cơ sở tương ứng của cha. Nó không phải từ đồng nghĩa tổng quát cho ‘căn giữa nhãn này trong SVG’. Tài liệu alignment-baseline của MDN cũng nêu giới hạn hỗ trợ trình duyệt. Với nhãn độc lập này, giữ phép thử tập trung vào dominant-baseline, rồi xác minh đích xuất thực tế.

Ví dụ này trình bày văn bản Latin nằm ngang trong một trình duyệt. Nhãn cong cần phép kiểm tra vị trí khác; hướng dẫn chữ trên đường dẫn SVG tách phần chữ khỏi đường cong dẫn hướng. Các hệ chữ khác và chữ viết dọc cần quyết định đường cơ sở riêng.

Giữ biểu trưng riêng với phần chữ

Nếu đã có biểu tượng vector sạch, giữ nó và tạo lại nhãn thành văn bản còn chỉnh sửa được. Di chuyển nhãn hoặc chọn phông không cần vector hóa.

Khi biểu tượng chỉ có PNG hoặc JPG, công cụ vector hóa logo của PerfectVector có thể chuẩn bị hình học ứng viên cho phần thiết kế đó. Kiểm tra đường bao và lỗ, rồi đặt cạnh văn bản mới gõ bằng đường cơ sở đã chọn. Vector hóa không nhận diện phông gốc hay khôi phục kiểu chữ chỉnh sửa được từ ảnh raster.

Với chữ thương hiệu cần chính xác, dùng phông và tài nguyên vector gốc khi có, hoặc chủ động tái dựng chữ. Hướng dẫn vector hóa logo giúp chọn giữa giữ nguyên, dò nét và vẽ lại nguồn.

Trước khi bàn giao, kiểm tra nội dung và phông thực tế, xem tổ hợp ở kích thước cuối rồi mở lại SVG xuất trong đích tiếp nhận. Giữ bản gốc chỉnh sửa được nếu bản bàn giao dùng chữ dạng đường bao.

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

dominant-baseline="middle" có giống central không? Không. Middle dùng đường cơ sở liên quan đến chiều cao chữ x, còn central dùng đường cơ sở trung tâm của phông gắn với hộp em. Vị trí có thể khác nhau, và không cách nào đảm bảo căn giữa thị giác cho mọi từ.

text-anchor="middle" có căn giữa chữ SVG theo chiều dọc không? Với chữ ngang thông thường, text-anchor kiểm soát vị trí ngang quanh tọa độ x. Chọn riêng đường cơ sở dọc bằng dominant-baseline rồi kiểm tra kết quả trong phông dự định.

getBBox có thể căn giữa chính xác chữ nhìn thấy không? Nó có thể căn giữa hộp văn bản SVG mà trình duyệt báo. Giới hạn văn bản có thể gồm khoảng trống ô ký tự ngoài phần chữ được vẽ, nên phép tính không đảm bảo căn giữa thị giác hay căn sát đường bao.

Nguồn tham khảo

1. W3C — Căn đường cơ sở SVG — Định nghĩa đường cơ sở alphabetic, middle và central.
2. MDN — dominant-baseline — Giải thích bảng đường cơ sở, suy đoán phông chữ và ưu tiên CSS.
3. MDN — text-anchor — Mô tả neo khối văn bản quanh vị trí được cung cấp.
4. W3C — Hộp giới hạn SVG — Mô tả mô hình ô ký tự dùng cho giới hạn văn bản.
5. MDN — FontFaceSet.ready — Định nghĩa khi tải phông và bố trí hoàn tất.
6. MDN — getBBox — Mô tả giới hạn SVG cục bộ và các phép biến đổi không được tính.
7. MDN — alignment-baseline — Giải thích căn đường cơ sở với cha và giới hạn hỗ trợ trình duyệt.

Nếu logo tạo lại vẫn cần biểu tượng chỉnh sửa được, hãy chuẩn bị bản SVG ứng viên bằng PerfectVector, kiểm tra đường bao khôi phục, rồi ghép với chữ còn chỉnh sửa được và kiểm tra căn chỉnh tại đích cuối.