SVG textLength: Làm nhãn vừa chỗ mà không méo chữ

Dùng textLength với lengthAdjust="spacing" khi nhãn SVG cần một chiều dài cụ thể và có thể chấp nhận điều chỉnh nhỏ về khoảng cách. Hình dạng ký tự giữ nguyên. Nếu chọn spacingAndGlyphs, bộ kết xuất có thể kéo giãn hoặc nén chính các chữ theo hướng dòng văn bản. Đây là hai chế độ được đặc tả văn bản SVG định nghĩa.

Điểm cần chú ý là mục tiêu: textLength là chiều dài yêu cầu, không phải chiều rộng tối đa. Nó có thể giãn một nhãn ngắn cũng dễ như nén một nhãn dài. Nó cũng không tạo các dòng tự ngắt.

Mỗi cách điều chỉnh thay đổi gì

spacing là mặc định khi đặt textLength mà không có giá trị lengthAdjust. Tài liệu textLength của MDN giải thích cách chiều dài yêu cầu và chế độ điều chỉnh phối hợp với nhau.

Với thiết kế thương hiệu thông thường, hãy điều chỉnh ít và kiểm tra kết quả. Một nhãn cần giảm chiều dài nhiều thường nên dùng cỡ chữ nhỏ hơn, nội dung ngắn hơn hoặc khoảng bố cục rộng hơn.

Nhãn ngắn và nhãn dài với cùng mục tiêu

Chúng tôi vẽ một biểu tượng hình thoi tự tạo và thử hai nhãn văn bản còn chỉnh sửa được bằng Abel Regular ở cỡ chữ 64 đơn vị SVG. Sau khi tải đúng phông chữ, trình duyệt đo PINE khoảng 115.6 đơn vị và PINE & FIELD là 325.3 đơn vị. Cả hai hàng đã điều chỉnh đều yêu cầu 240 đơn vị.

Cùng mục tiêu, kiểu chữ khác nhau

Với nhãn ngắn, spacing tạo ra những khoảng trống dễ thấy. Với nhãn dài, nó ép các chữ sát nhau. Ký tự giữ hình dạng trong cả hai trường hợp, nhưng không kết quả nào phù hợp với thiết kế này. Hàng spacingAndGlyphs đạt cùng độ dài bằng cách thay đổi tỷ lệ của kiểu chữ một cách rõ rệt.

Phép thử của chúng tôi dùng Chrome 154 trong trình duyệt tích hợp của ứng dụng. Chúng tôi đo độ trải ngang từ vị trí bắt đầu ký tự đầu đến vị trí kết thúc ký tự cuối; mỗi hàng đã điều chỉnh đạt xấp xỉ 240 đơn vị. Mẫu thử dùng một phông Latin và văn bản trái sang phải đơn giản. Đây không phải phép thử tương thích giữa các bộ kết xuất hay nhiều ngôn ngữ.

Đặt mức chỉnh chiều dài vừa phải

Với nhãn dài phía trên, 330 đơn vị gần với chiều dài tự nhiên 325.3 đơn vị. Đó là ví dụ hiệu chỉnh hữu ích hơn việc ép xuống 240.

Tải Abel-Regular.ttf và OFL.txt từ thư mục Abel của Google Fonts. Đặt chúng trong thư mục fonts cạnh một tệp HTML chứa mã này, rồi phục vụ thư mục đó cục bộ:

<style>
  @font-face {
    font-family: Abel;
    src: url('./fonts/Abel-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
</style>
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="540" height="136" viewBox="0 0 540 136"
     role="img" aria-label="Pine and Field emblem and label">
  <path d="M25 80L63 24L101 80L63 114Z" fill="#287967"/>
  <path d="M43 80L63 49L83 80L63 97Z" fill="#c2d998"/>
  <text id="label" x="135" y="86"
        font-family="Abel" font-size="64" font-weight="400"
        textLength="330" lengthAdjust="spacing"
        fill="#17372e">PINE &amp; FIELD</text>
</svg>

Giá trị không kèm đơn vị 330 thuộc hệ tọa độ SVG. Co giãn toàn bộ SVG trên trang cũng co giãn khoảng cách đó trên màn hình. Giữ biểu tượng và chữ riêng để thay đổi kiểu chữ không ảnh hưởng hình vẽ.

Phông chữ vẫn quan trọng. textLength không biến chữ thành đường bao hay đóng gói kiểu chữ. Nếu hình dạng chữ đổi trên máy khác, hãy chẩn đoán việc thay thế phông chữ SVG trước khi chỉnh khoảng cách.

Với chiều rộng tối đa, hãy đo trước

Nếu quy tắc là ‘giữ nguyên nhãn ngắn, chỉ thu nhỏ nhãn dài’, bạn cần tự thêm điều kiện đó. Ví dụ này giảm cỡ chữ, nên chữ giữ tỷ lệ trong khi nhỏ hơn ở cả hai chiều.

Đặt tập lệnh này sau SVG phía trên. Nó thay mức điều chỉnh cố định 330 đơn vị bằng chiều rộng tối đa 240 đơn vị:

<script type="module">
  const label = document.querySelector('#label');
  const baseSize = 64;
  const maxWidth = 240;
 
  await document.fonts.load('64px Abel', label.textContent);
  await document.fonts.ready;
 
  label.removeAttribute('textLength');
  label.removeAttribute('lengthAdjust');
  label.setAttribute('font-size', String(baseSize));
 
  const naturalWidth = label.getComputedTextLength();
  if (naturalWidth > maxWidth) {
    const fittedSize = baseSize * maxWidth / naturalWidth;
    label.setAttribute('font-size', String(fittedSize));
  }
</script>

document.fonts.ready chờ việc tải phông chữ và bố trí của tài liệu hoàn tất ổn định. Lệnh gọi load() tường minh yêu cầu tải kiểu chữ dùng trong ví dụ này trước. Đo trước khi phông dự định tải xong có thể khiến quyết định làm vừa chỗ dựa trên chữ của phông dự phòng.

Chúng tôi bỏ textLength trước khi gọi getComputedTextLength(), vì nhánh này cần chiều dài tự nhiên. Trong thử nghiệm trình duyệt, phương thức đó vẫn báo chiều dài tự nhiên cho các hàng spacing dù độ trải hiển thị từ đầu đến cuối đã đổi. Đừng cho rằng đây là phép đo phổ quát của chiều rộng thị giác đã điều chỉnh.

Với tập lệnh này, nhãn ngắn PINE giữ cỡ 64 đơn vị. Nhãn dài giảm còn khoảng 47.2 đơn vị. Xem lại kết quả ở kích thước hiển thị hoặc in thực tế. Nếu chữ sau khi giảm quá nhỏ, hãy đổi bố cục hoặc nội dung thay vì tiếp tục giảm cỡ vô hạn. Chạy lại bước làm vừa khi nội dung hoặc thiết lập phông chữ thay đổi.

Kiểm tra nhãn cuối trong đích tiếp nhận

Vừa về số đo chỉ là một phép kiểm tra. Hãy nhìn các cặp chữ và khoảng cách giữa biểu tượng với chữ ở kích thước cuối. Giữ khoảng cách tự nhiên cho nhãn thông thường, trừ khi thiết kế cần hiệu chỉnh.

Với nhiều dòng, hãy chủ động tạo và đặt vị trí các dòng; riêng textLength không cung cấp quy tắc tự xuống dòng. Với huy hiệu cong, dùng quy trình chữ trên đường dẫn SVG riêng. Hướng dẫn đó kiểm soát đường cơ sở mà chữ đi theo.

Giữ nguồn với văn bản còn chỉnh sửa được, rồi mở tệp bàn giao trong đúng trình chỉnh sửa, trình duyệt hoặc bộ kết xuất sẽ dùng nó. Hướng dẫn tệp SVG giải thích vì sao SVG có thể chứa văn bản chỉnh sửa được, đường dẫn vector hoặc ảnh nhúng dù cùng phần mở rộng.

Nếu logo ban đầu chỉ có ảnh raster, công cụ vector hóa logo của PerfectVector có thể khôi phục phần hình của biểu tượng. Kiểm tra và làm sạch các đường dẫn đó, rồi gõ lại nội dung thành văn bản còn chỉnh sửa được trước khi làm nhãn vừa chỗ. Từ được dò nét là hình học đường dẫn; textLength không thể chỉnh khoảng cách ký tự của nó. Hướng dẫn từng bước vector hóa logo của chúng tôi trình bày bước khôi phục nguồn đó.

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

textLength chỉ thu nhỏ văn bản quá dài phải không? Không. Nó yêu cầu một chiều dài, nên cũng có thể mở rộng văn bản vốn ngắn hơn. Đo nhãn ở chiều dài tự nhiên và tự áp dụng điều kiện khi bạn cần quy tắc chiều rộng tối đa.

Giá trị lengthAdjust nào giữ hình dạng chữ? Dùng spacing để chỉnh khoảng cách ký tự mà không kéo giãn ký tự. Mức điều chỉnh lớn vẫn có thể tạo khoảng trống thiếu tự nhiên hoặc chữ va nhau, nên hãy kiểm tra chữ ở kích thước cuối.

textLength có làm vừa chữ được dò nét từ PNG không? Nó tác động lên văn bản SVG, không tác động lên đường dẫn hình chữ. Gõ lại nội dung thành văn bản còn chỉnh sửa được nếu cần textLength hoặc khoảng cách ký tự chỉnh sửa được, đồng thời giữ biểu tượng thành phần hình vector riêng.

Nguồn tham khảo

1. W3C — Điều chỉnh văn bản SVG 2 — Hai chế độ và tác động của chúng lên hình dạng ký tự cùng khoảng dịch ký tự.
2. MDN — textLength — Chiều dài yêu cầu và chế độ spacing mặc định.
3. MDN — FontFaceSet.ready — Chờ tải phông chữ và bố trí.
4. MDN — getComputedTextLength — Đo phần tử văn bản SVG.
5. Google Fonts — Abel — Phông chữ và giấy phép dùng trong phép đối chiếu tự tạo.

Khôi phục biểu tượng raster bằng công cụ vector hóa logo nếu cần, rồi giữ chữ thành phần tử văn bản riêng. Đối chiếu nhãn cuối ở kích thước thông thường trước khi tạo bản bàn giao có chữ dạng đường bao hoặc xuất raster.