Gebruiksopmerkingen
Een <meta name="text-scale">-element heeft de volgende aanvullende attributen:
content | Specificeert het aanmeldingsgedrag voor de font-size-schaal.
De waarde is een trefwoord, dat een van de volgende kan zijn:
|
|---|
Beschrijving
Het <meta name="text-scale" content="scale" />-element kan worden opgenomen in de <head> van een document om aan de browser te signaleren dat de pagina zodanig is vormgegeven dat deze goed schaalt bij verschillende door de gebruiker gekozen lettergrootte-voorkeuren; het schakelt ook bestaande browsergebaseerde mechanismen en heuristieken uit.
Specifiek definieert het de waarde van de initiële font-size van het <html>-hoofdelement zodanig dat deze schaalt in verhouding tot door de gebruiker gedefinieerde OS- en browsergerelateerde lettergrootte-instellingen. De initial-waarde van de root-font-size is medium, wat de waarde van de rem-eenheid definieert. Mits je de root-font-size instelt op, of standaard laat instellen op, een lokale of aan de root gerelateerde <length>-eenheid, wordt elk daaropvolgend trefwoord (zoals medium) of aan het lettertype gerelateerde lengte (zoals em en rem) geschaald in verhouding tot de OS- of browserinstellingen voor lettergrootte.
Bijvoorbeeld, met <meta name="text-scale" content="scale"> opgenomen op de pagina, zou de volgende regel:
p {
font-size: medium;
}ertoe leiden dat alle <p>-elementen een geschaalde lettergrootte krijgen. Je zou font-size ook op initial kunnen zetten om hetzelfde effect te bereiken.
Op mobiele platformen is dit standaard niet het geval. <meta name="text-scale" content="scale" /> schakelt deze schaling in. Op desktopplatformen is het effect dat de omgevingsvariabele env(preferred-text-scale) de vermenigvuldigingsfactor weerspiegelt die overeenkomt met de lettergrootte-instellingen van de browser, maar verder heeft het geen merkbaar voordeel.
Samenvatting van het gebruik
Samengevat: stel scale alleen in als je app is ontworpen om tekstschaling te ondersteunen. Aanbevolen gebruik is om:
<meta name="text-scale" content="scale" />op te nemen in de<head>van je pagina.- De initiële
font-sizevan:rootniet te overschrijven met een absolute lengte-waarde (zoals16px). - Alleen aan het lettertype gerelateerde eenheden zoals
em/remof trefwoorden zoalssmall,x-large, enz. te gebruiken om inhoud te dimensioneren.
<meta name="text-scale"> versus env(preferred-text-scale)
Het gebruik van <meta name="text-scale" /> om afmetingen relatief aan de tekstschaalinstellingen van het OS te dimensioneren, wordt aanbevolen boven de omgevingsvariabele env(preferred-text-scale). Ze hebben een vergelijkbaar effect op mobiel, maar <meta> biedt ook verbeteringen voor desktopbrowsers (en is eenvoudiger te gebruiken).
Vermijd het gebruik van beide functies samen, aangezien tekstschaling dan mogelijk twee keer wordt toegepast, waardoor kleine aan het lettertype gerelateerde afmetingen kleiner worden en grote aan het lettertype gerelateerde afmetingen groter worden.
Voorbeelden
Demonstratie van meta viewport text-scale
Dit voorbeeld demonstreert het effect van <meta name="text-scale" content="scale">.
HTML
We nemen het <meta name="text-scale" content="scale">-element op in de <head> van het document, plus een <meta name="viewport">-element om een correcte weergave op mobiele apparaten te garanderen. We voegen ook wat tekstinhoud toe binnen <p>-elementen met verschillende class-attributen erop ingesteld, zodat we ze met verschillende stijlen kunnen aanspreken.
<!doctype html>
<html lang="en-US">
<head>
<meta name="text-scale" content="scale" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<p class="text-scale">
This font size obeys the user's font preferences, whether those
preferences are specified at the operating system level or the user agent
level.
</p>
<p class="fixed">
This font size does NOT respect the user's font preferences, even with
text-scale set.
<span class="text-scale">But this font size does!</span>
</p>
</body>
</html><!doctype html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<p class="text-scale">
This font size does not obey the user's font preferences, whether those
preferences are specified at the operating system level or the user agent
level.
</p>
<p class="fixed">
This font size does NOT respect the user's font preferences.
<span class="text-scale">Neither does this!</span>
</p>
</body>
</html>CSS
Tekstcontainers met een class van text-scale krijgen een font-size van 1rem, wat betekent dat in browsers die <meta name="text-scale" content="scale"> ondersteunen, die tekst zal schalen naarmate de OS-/browserlettertype-instellingen worden gewijzigd. Tekstcontainers met een class van fixed krijgen een font-size van 20px, wat betekent dat deze tekst op een vaste grootte blijft naarmate de OS-/browserlettertype-instellingen worden gewijzigd.
.text-scale {
font-size: 1rem;
}
.fixed {
font-size: 20px;
}Resultaat
Deze versie bevat het <meta name="text-scale">-element:
Deze versie bevat NIET het <meta name="text-scale">-element:
Test deze voorbeelden in een mobiele browser. Wijzig de gewenste lettergrootte in de weergave- of toegankelijkheidsinstellingen van het mobiele apparaat. Let op hoe, in het eerste voorbeeld, wanneer <meta name="text-scale"> is opgenomen, de boven- en onderregel tekst schalen in verhouding tot de OS-instellingen, terwijl de middelste regel, waarvan de font-size is ingesteld met absolute eenheden, niet van grootte verandert. Zonder het <meta name="text-scale">-element schaalt tekst niet proportioneel met de OS-instellingen.
Om het testen te vergemakkelijken, kun je beide versies volledig op scherm openen in een apart tabblad met behulp van de onderstaande links:
Een op text-scale reagerende lay-out
Dit voorbeeld demonstreert dat, met <meta name="text-scale"> toegepast op een pagina, aan het lettertype gerelateerde groottes kunnen worden gebruikt binnen @media-queries om mobiele browsers ervoor te laten zorgen dat breekpunten automatisch worden aangepast naarmate de OS-tekstgrootte wordt gewijzigd.
HTML
Net als in het vorige voorbeeld bevat onze markup opnieuw de elementen <meta name="text-scale"> en <meta name="viewport"> in de <head>. In deze demo bevat de inhoud van de body twee elementen — <main> en <aside> — die een hoofdinhoudskolom en een zijbalk voorstellen.
<!doctype html>
<html lang="en-US">
<head>
<meta name="text-scale" content="scale" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<main>Main content</main>
<aside>Aside content</aside>
</body>
</html>CSS
Standaard worden de hoofdinhoud en de zijbalk onder elkaar weergegeven. We voegen een @media-query toe die de elementen naast elkaar plaatst met behulp van CSS Grid wanneer de viewport breder wordt dan 35rem.
body {
margin: 0;
}
main,
aside {
background-color: silver;
padding: 24px;
font-size: 1.5rem;
}@media (width > 35rem) {
body {
display: grid;
gap: 24px;
grid-template-columns: 1fr 18.75rem;
}
}Resultaat
Test dit in een mobiele browser. Je zult zien dat, naarmate de OS-lettergrootte wordt vergroot, het breekpunt in verhouding daarmee toeneemt. Bij grotere OS-lettergroottes zullen de main en aside boven elkaar beginnen te verschijnen, terwijl ze voorheen naast elkaar stonden. Mogelijk moet je in liggende oriëntatie kijken om het effect te zien.
Je kunt de demo openen in een apart tabblad via onderstaande link om het testen te vergemakkelijken: