SVG textLength: dopasuj napis bez zniekształcania liter

Użyj textLength z lengthAdjust="spacing", gdy napis w SVG musi mieć określoną długość i dopuszczalna jest niewielka korekta odstępów. Kształty glifów pozostają niezmienione. Jeśli wybierzesz spacingAndGlyphs, mechanizm renderujący może rozciągnąć lub ścisnąć same litery wzdłuż wiersza tekstu. Są to dwa tryby zdefiniowane w SVG text specification.

Kluczowa jest wartość docelowa: textLength określa żądaną długość, a nie maksymalną szerokość. Może rozszerzyć krótki napis równie łatwo, jak ścisnąć długi. Nie tworzy też zawiniętych wierszy.

Co zmienia każdy tryb dopasowania

spacing jest trybem domyślnym, gdy ustawisz textLength bez wartości lengthAdjust. MDN's textLength reference wyjaśnia, jak żądana długość i tryb dopasowania współdziałają ze sobą.

W typowych projektach identyfikacji wizualnej stosuj niewielką korektę i sprawdzaj jej efekt. Napis wymagający znacznego skrócenia zwykle lepiej dopasować przez zmniejszenie rozmiaru fontu, skrócenie treści lub przeznaczenie na niego szerszego obszaru w układzie.

Krótki i długi napis przy tej samej długości docelowej

Narysowaliśmy autorski emblemat w kształcie rombu i przetestowaliśmy dwa napisy zachowane jako tekst, używając Abel Regular w rozmiarze 64 jednostek SVG. Po załadowaniu docelowego fontu pomiar w przeglądarce wykazał, że długość PINE wynosi około 115,6 jednostki, a PINE & FIELD — 325,3 jednostki. Oba wiersze z dopasowaniem mają żądaną długość 240 jednostek.

Ta sama długość docelowa, inna typografia

W krótkim napisie spacing tworzy wyraźnie widoczne odstępy. W długim stłacza litery. W obu przypadkach glify zachowują swoje kształty, jednak żaden z tych rezultatów nie pasuje do tego projektu. Wiersz z spacingAndGlyphs osiąga tę samą rozpiętość przez widoczną zmianę proporcji kroju pisma.

W naszym teście użyliśmy Chrome 154 w przeglądarce wbudowanej w aplikację. Mierzyliśmy poziomą rozpiętość od pozycji początku pierwszego znaku do pozycji końca ostatniego znaku; każdy wiersz z dopasowaniem osiągnął około 240 jednostek. Przykład testowy wykorzystuje jeden font łaciński i prosty tekst pisany od lewej do prawej. Nie jest to test zgodności między różnymi mechanizmami renderującymi ani test wielojęzyczny.

Ustaw niewielką korektę długości

Dla długiego napisu powyżej 330 jednostek to wartość bliska jego naturalnej długości wynoszącej 325,3 jednostki. To bardziej użyteczny przykład kalibracji niż wymuszanie skrócenia go do 240.

Pobierz Abel-Regular.ttf i jego plik OFL.txt z Google Fonts Abel directory. Umieść je w folderze fonts obok pliku HTML zawierającego poniższy kod, a następnie udostępnij ten folder przez lokalny serwer:

<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>

Wartość 330 bez oznaczenia jednostki odnosi się do układu współrzędnych SVG. Skalowanie całego SVG na stronie skaluje również tę odległość na ekranie. Zachowaj emblemat i tekst jako osobne elementy, aby zmiana typografii nie zmieniała rysunku.

Font nadal ma znaczenie. textLength nie zamienia liter na kontury ani nie dołącza kroju pisma do pliku. Jeśli kształt liter zmienia się na innym komputerze, sprawdź przyczynę zastępowania fontów w SVG, zanim dopasujesz odstępy.

Przy maksymalnej szerokości najpierw wykonaj pomiar

Jeśli reguła brzmi „pozostaw krótkie napisy bez zmian, zmniejszaj tylko długie”, dodaj ten warunek samodzielnie. Ten przykład zmniejsza rozmiar fontu, więc litery zachowują proporcje, stając się mniejsze w obu wymiarach.

Umieść ten skrypt po powyższym SVG. Zastępuje on stałe dopasowanie do 330 jednostek maksymalną szerokością 240 jednostek:

<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 czeka na zakończenie ładowania fontów dokumentu i obliczania układu. Jawne wywołanie load() najpierw żąda załadowania odmiany fontu używanej w tym przykładzie. Pomiar wykonany przed załadowaniem docelowej odmiany może sprawić, że decyzja o dopasowaniu będzie oparta na literach fontu zastępczego.

Usuwamy textLength przed wywołaniem getComputedTextLength(), ponieważ ta gałąź kodu potrzebuje naturalnej długości. W naszym teście przeglądarkowym ta metoda nadal zwracała naturalną długość dla wierszy z spacing, mimo że wyświetlana rozpiętość od początku do końca uległa zmianie. Nie zakładaj, że jest to uniwersalny sposób pomiaru widocznej szerokości po dopasowaniu.

Po zastosowaniu tego skryptu krótki napis PINE zachowuje rozmiar 64 jednostek. Rozmiar długiego napisu spada do około 47,2 jednostki. Oceń rezultat w rzeczywistym rozmiarze wyświetlania lub wydruku. Jeśli pomniejszone słowa są zbyt małe, zmień układ lub treść zamiast zmniejszać rozmiar bez końca. Uruchom dopasowanie ponownie po zmianie treści lub ustawień fontu.

Sprawdź gotowy napis w miejscu docelowym

Dopasowanie liczbowe to tylko jedna z kontroli. Przyjrzyj się parom liter oraz odstępowi między emblematem a tekstem w końcowym rozmiarze. W zwykłych napisach zachowuj naturalne odstępy, chyba że projekt wymaga kalibracji.

Jeśli potrzebujesz wielu wierszy, utwórz je i rozmieść świadomie; samo textLength nie określa reguł zawijania. W przypadku odznaki z zakrzywionym napisem skorzystaj z osobnego poradnika umieszczania tekstu SVG na ścieżce. Ten poradnik pozwala kontrolować linię bazową, wzdłuż której biegną litery.

Zachowaj plik źródłowy z tekstem, a następnie otwórz plik przeznaczony do przekazania w docelowym edytorze, przeglądarce lub mechanizmie renderującym, w którym będzie używany. Poradnik o plikach SVG wyjaśnia, dlaczego SVG może zawierać edytowalny tekst, ścieżki wektorowe lub osadzony obraz mimo tego samego rozszerzenia.

Jeśli Twoje wyjściowe logo istnieje tylko jako obraz rastrowy, narzędzie PerfectVector do wektoryzacji logo może odtworzyć grafikę emblematu. Sprawdź i uporządkuj te ścieżki, a następnie wpisz słowa ponownie jako tekst przed dopasowaniem napisu. Słowo uzyskane przez wektoryzację składa się ze ścieżek; textLength nie może zmieniać odstępów między jego znakami. Nasz poradnik wektoryzacji logo krok po kroku opisuje ten etap odtwarzania grafiki źródłowej.

Najczęściej zadawane pytania

Czy textLength tylko zmniejsza zbyt długi tekst? Nie. Określa żądaną długość, więc może też rozszerzyć tekst, który naturalnie jest krótszy. Zmierz naturalną długość napisu i zastosuj własny warunek, jeśli potrzebujesz reguły maksymalnej szerokości.

Która wartość lengthAdjust zachowuje kształty liter? Użyj spacing, aby dopasować odstępy między znakami bez rozciągania glifów. Duża korekta nadal może tworzyć nieestetyczne odstępy lub powodować nachodzenie liter na siebie, więc sprawdź napis w końcowym rozmiarze.

Czy textLength może dopasować litery uzyskane przez wektoryzację obrazu PNG? Działa na tekście SVG, a nie na ścieżkach w kształcie liter. Wpisz treść ponownie jako tekst, jeśli potrzebujesz textLength lub edytowalnych odstępów między znakami, zachowując emblemat jako osobną grafikę wektorową.

Źródła

1. W3C — SVG 2 text adjustment — Dwa tryby i ich wpływ na kształty glifów oraz odległości przesunięcia do kolejnych glifów.
2. MDN — textLength — Żądana długość i domyślny tryb spacing.
3. MDN — FontFaceSet.ready — Oczekiwanie na załadowanie fontów i obliczenie układu.
4. MDN — getComputedTextLength — Pomiar elementu tekstowego SVG.
5. Google Fonts — Abel — Font i licencja wykorzystane w autorskim porównaniu.

W razie potrzeby odtwórz emblemat z obrazu rastrowego za pomocą narzędzia do wektoryzacji logo, a następnie zachowaj napis jako osobny element tekstowy. Porównaj gotowy napis w normalnym rozmiarze, zanim przygotujesz kopię do przekazania z tekstem zamienionym na kontury lub wyeksportujesz obraz rastrowy.