Wyrównanie tekstu SVG w pionie: wyśrodkuj odtworzoną etykietę

W przypadku poziomej etykiety SVG y określa położenie wybranej linii bazowej. Nie umieszcza górnej krawędzi liter na tej współrzędnej. Zacznij od dominant-baseline="middle", gdy umieszczasz krótką etykietę zapisaną alfabetem łacińskim wokół poziomej prowadnicy, i sprawdź wynik w docelowym foncie. Użyj text-anchor="middle", aby wyśrodkować tekst w poziomie względem jego współrzędnej x.

Etykieta obok znaku graficznego nadal może wyglądać na umieszczoną zbyt wysoko lub zbyt nisko. middle i central korzystają z różnych linii bazowych fontu, natomiast centrowanie wizualne zależy od kształtów liter w danym słowie. Zanim dodasz przesunięcie, zdecyduj, czy układ wymaga wspólnej linii bazowej, wyśrodkowanej ramki tekstu, czy korekty optycznej.

Wybierz cel wyrównania

To samo y="100" może dać różne położenia liter:

Definicje linii bazowych W3C rozróżniają middle i central. Żadna z tych definicji nie gwarantuje wyśrodkowania konturów wyrenderowanych liter każdego słowa. Znaczenie mają również tabele linii bazowych fontu i heurystyki mechanizmu renderującego, co wyjaśnia MDN dominant-baseline reference.

W przypadku zwykłego tekstu poziomego text-anchor="middle" odpowiada za drugą oś. Wyrównuje fragment tekstu względem podanego położenia w poziomie; nie zapewnia centrowania w pionie. Zobacz text-anchor reference, aby poznać jego związek z fragmentami tekstu.

Porównaj znak graficzny i etykietę pozostawioną jako tekst

Zapisz ten kompletny przykład jako baseline-example.svg i otwórz go w przeglądarce. Pierścień ma oryginalną geometrię; Agyp to ciąg testowy zawierający wydłużenie górne i wydłużenia dolne. Czerwona linia oznacza 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>

Zmień tylko dominant-baseline na alphabetic, a następnie na central. Zachowaj te same współrzędne, rozmiar fontu i treść. Następnie porównaj wynik z drugim dostępnym fontem. Zmiana kilku ustawień naraz utrudnia ustalenie, które z nich przesunęło etykietę.

Wyrenderowaliśmy wszystkie trzy wartości z użyciem załadowanych kopii fontów Arial i Times New Roman. Każdy panel korzysta z tych samych współrzędnych SVG i oryginalnego pierścienia. Zielone prostokąty pokazują wynik przeglądarkowej metody getBBox() dla edytowalnego tekstu.

Przykłady z ustawieniem alphabetic znajdują się wyżej względem poziomej linii przechodzącej przez środek pierścienia. Przykłady z ustawieniem middle przesuwają się w dół, natomiast central umieszcza zwracane ramki blisko prowadnicy. Pomiary podane pod każdą próbką dotyczą tych plików fontów i tego renderowania w przeglądarce. Nie są to przesunięcia, które należy skopiować do innego projektu.

Nasze pliki fontów zostały załadowane przed pomiarem. Wyeksportowany SVG może użyć fontu zastępczego, gdy żądany font jest niedostępny; zadbaj o dostępność wymaganego fontu, zanim ocenisz wyrównanie. Poradnik dotyczący zmian fontów w SVG opisuje, jak sprawdzić faktycznie używany krój i zachować kopię do przekazania.

Wyśrodkowana ramka tekstu nadal może wyglądać nierówno

Granice tekstu SVG nie muszą tworzyć najmniejszego prostokąta otaczającego widoczne kształty liter. Reguły ramek ograniczających SVG wykorzystują komórki glifów oraz metryki fontu określające zasięg powyżej i poniżej linii bazowej (ascent i descent) do obliczeń dotyczących tekstu. Prostokąt otaczający te komórki może obejmować przestrzeń, której nie wypełnia żadna litera.

To rozróżnienie ma znaczenie w przypadku etykiet takich jak Agyp: litery g, y i p sięgają poniżej alfabetycznej linii bazowej. Etykieta zapisana wyłącznie wielkimi literami ma inny rozkład wizualny. Podczas wyrównywania używaj docelowego fontu i rzeczywistej treści.

W przypadku rzędu etykiet, które powinny być czytane w jednym wierszu, zachowaj wspólną alfabetyczną linię bazową. Przesuwanie każdego słowa osobno, aż jego widoczny kształt będzie wyglądał na wyśrodkowany, może sprawić, że rząd będzie nierówny.

W przypadku pojedynczego zestawienia znaku graficznego z tekstem porównaj etykietę w jej docelowym rozmiarze i po wybraniu linii bazowej skoryguj ją wizualnie. Jeśli układ wymaga konkretnie wyrównania według konturów liter, użyj w edytorze duplikatu zamienionego na kontury, aby sprawdzić tę geometrię, zachowując jednocześnie tekst w edytowalnym pliku źródłowym. Traktuj granice konturów i korektę optyczną jako osobne decyzje.

Wyśrodkuj zmierzoną ramkę tekstu SVG, jeśli taki jest cel

Dla prostego, nieprzekształconego, jednowierszowego elementu <text> oblicz przesunięcie od środka zwracanej ramki do punktu docelowego. Uruchom ten kod w dokumencie zawierającym przykład, gdy jego font będzie gotowy:

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

To obliczenie wyrównuje zwracaną ramkę tekstu do targetY. Nie oblicza równowagi wizualnej ani nie usuwa niewykorzystanej przestrzeni komórek glifów fontu. Powtórz pomiar po zmianie tekstu, fontu, grubości lub rozmiaru.

document.fonts.ready czeka na załadowanie fontów i zakończenie powiązanych obliczeń układu. Nie dowodzi, że docelowy font został pomyślnie dostarczony; sprawdź również zasób fontu lub informacje przeglądarki o fontach użytych do renderowania.

Ten fragment kodu zakłada jedną wartość y, brak pozycji przypisanych poszczególnym znakom, brak przesunięć dy i brak przekształconej grupy tekstu. getBBox() zwraca lokalną ramkę SVG. Punkt docelowy w innym układzie współrzędnych wymaga przeliczenia; skorzystaj z procedury pracy z granicami SVG, zanim połączysz piksele ekranowe z jednostkami SVG.

Rozwiąż konflikty ustawień, zanim dodasz kolejne przesunięcia

Sprawdź tekst i jego grupy nadrzędne. Pozostawione dy, zagnieżdżony <tspan> lub transformacja mogą wpływać na położenie tekstu, które próbujesz przeanalizować. W kopii usuwaj po jednej podejrzanej korekcie i porównuj wynik.

Sprawdź również style strony. CSS może nadpisać atrybut prezentacyjny dominant-baseline. Jeśli zmiana atrybutu nie daje widocznego efektu, sprawdź wartość obliczoną, zanim dodasz drugą korektę.

alignment-baseline określa, jak linia bazowa elementu jest wyrównywana do odpowiadającej jej linii bazowej elementu nadrzędnego. Nie jest ogólnym synonimem polecenia „wyśrodkuj tę etykietę w SVG”. MDN alignment-baseline reference wskazuje również ograniczenia obsługi w przeglądarkach. W przypadku tej samodzielnej etykiety skoncentruj się podczas testu na dominant-baseline, a następnie sprawdź wynik w docelowym środowisku użycia wyeksportowanego pliku.

Ten przykład dotyczy poziomego tekstu zapisanego alfabetem łacińskim w jednej przeglądarce. Etykiety na krzywych wymagają innego sposobu sprawdzania położenia; instrukcja umieszczania tekstu SVG na ścieżce rozdziela liternictwo od krzywej prowadzącej. Inne systemy pisma i tekst pionowy wymagają osobnych decyzji dotyczących linii bazowych.

Zachowaj znak graficzny oddzielnie od liternictwa

Jeśli masz już czysty wektorowy znak graficzny, zachowaj go i odtwórz etykietę jako tekst. Przesuwanie etykiety lub wybór fontu nie wymagają wektoryzacji.

Gdy znak graficzny istnieje tylko w pliku PNG lub JPG, wektoryzator logo PerfectVector może przygotować propozycję geometrii dla tej części projektu. Sprawdź jej kontur i otwory, a następnie umieść ją obok nowo wpisanego tekstu, korzystając z wybranej linii bazowej. Wektoryzacja nie rozpoznaje oryginalnego fontu ani nie przywraca edytowalnej typografii z obrazu rastrowego.

Aby wiernie odwzorować liternictwo marki, użyj oryginalnego fontu i zasobów wektorowych, jeśli są dostępne, albo świadomie odtwórz liternictwo. Poradnik wektoryzacji logo pomaga wybrać między zachowaniem źródła, obrysowaniem go i ponownym narysowaniem.

Przed przekazaniem pliku sprawdź rzeczywistą treść i font, obejrzyj zestawienie znaku z tekstem w docelowym rozmiarze i ponownie otwórz wyeksportowany SVG w jego miejscu docelowym. Zachowaj edytowalny plik źródłowy, jeśli kopia do przekazania zawiera tekst zamieniony na kontury.

Często zadawane pytania

Czy dominant-baseline="middle" jest tym samym co central? Nie. Middle korzysta z linii bazowej powiązanej z wysokością x, natomiast central używa centralnej linii bazowej fontu związanej z polem em. Ich położenia mogą się różnić, a żadna z nich nie gwarantuje optycznego wyśrodkowania każdego słowa.

Czy text-anchor="middle" centruje tekst SVG w pionie? W przypadku zwykłego tekstu poziomego text-anchor kontroluje położenie w poziomie względem współrzędnej x. Wybierz osobno linię bazową w pionie za pomocą dominant-baseline, a następnie sprawdź wynik w docelowym foncie.

Czy getBBox może dokładnie wyśrodkować widoczne litery? Może wyśrodkować ramkę tekstu SVG zwracaną przez przeglądarkę. Granice tekstu mogą obejmować przestrzeń komórek glifów wykraczającą poza wyrenderowane litery, więc to obliczenie nie gwarantuje centrowania optycznego ani ścisłego wyrównania konturów.

Źródła

1. W3C — SVG baseline alignment — Definiuje linie bazowe alphabetic, middle i central.
2. MDN — dominant-baseline — Wyjaśnia tabele linii bazowych, heurystyki fontów i pierwszeństwo CSS.
3. MDN — text-anchor — Dokumentuje zakotwiczenie fragmentów tekstu względem podanego położenia.
4. W3C — SVG bounding boxes — Opisuje model komórek glifów używany do wyznaczania granic tekstu.
5. MDN — FontFaceSet.ready — Określa, kiedy ładowanie fontów i obliczanie układu zostały zakończone.
6. MDN — getBBox — Dokumentuje lokalne granice SVG i nieuwzględnianie transformacji.
7. MDN — alignment-baseline — Wyjaśnia wyrównanie do linii bazowej elementu nadrzędnego i ograniczenia obsługi w przeglądarkach.

Jeśli Twoje odtworzone logo nadal potrzebuje edytowalnego znaku graficznego, przygotuj propozycję SVG za pomocą PerfectVector, sprawdź odzyskany kontur, a następnie zestaw go z liternictwem pozostawionym jako tekst i sprawdź wyrównanie w docelowym miejscu użycia.