Tekst schalen

Scaling tekst is een functie waarmee je tekst kunt schalen om op een bepaalde breedte of hoogte te passen. Dit is handig als je er zeker van wilt zijn dat tekst in een bepaald gebied past (bijvoorbeeld een naam). De functie schaalt de tekst zodat hij in het gebied past, terwijl de beeldverhouding behouden blijft. Dit betekent dat je tekst niet vervormd wordt.

Als je de editor gebruikt om scaling tekst toe te voegen, kun je alle code voorbeelden in deze documentatie negeren. De afbeeldingen en de positionering van tekst blijven wel relevant. Positionering en resizen van tekst kan eenvoudig via de editor zoals dit ook werkt met elk ander element.

Syntax

{{{scalingText breedte hoogte horizontaleUitlijning verticaleUitlijning text [font]}}}

Breedte en hoogte

Breedte en hoogte zijn getallen in pixels. De tekst wordt geschaald in een rechthoekig gebied met de opgegeven breedte en hoogte.

Voorbeelden

900x200

200x200

Conclusie

Zoals je ziet, wordt de tekst geschaald om in het gebied te passen met behoud van de beeldverhouding. Dit betekent dat uw tekst niet wordt vervormd en altijd in het opgegeven gebied past.

Horizontale uitlijning

De horizontale uitlijning kan zijn:

  • left

  • center

  • right

Voorbeelden

Links

Midden

Rechts

Rechts met lange tekst

Conclusie

Zoals je ziet wordt de tekst uitgelijnd aan de bovenkant, het midden of de onderkant van het gegeven gebied. Wat we ook zien is dat de uitlijning weinig tot geen effect heeft als de tekst wordt verkleind om in het gebied te passen, omdat er dan geen ruimte overblijft om de tekst uit te lijnen.

Verticale uitlijning

De verticale uitlijning kan zijn:

  • top

  • middle

  • bottom

Voorbeelden

Boven

Midden

Onder

Onder met korte tekst

Conclusie

Zoals je ziet wordt de tekst uitgelijnd aan de bovenkant, het midden of de onderkant van het gegeven gebied. Wat we ook zien is dat de uitlijning weinig tot geen effect heeft als de tekst wordt verkleind om in het gebied te passen, omdat er dan geen ruimte overblijft om de tekst uit te lijnen.

Tekst

De tekst is een tekenreeks die zo wordt geschaald dat hij in het opgegeven gebied past. De tekst kan alle tekens bevatten die door het gekozen font worden ondersteund.

Font

Het font is optioneel en is standaard ipag. Het kan een custom font zijn of een URL naar een remote url (denk aan een Google Font). Ondersteunde font formaten zijn .ttf, .otf, .woff en .woff2.

Volledige voorbeelden

Voorbeeld met standaard font(ipag)

{{{scalingText 900 200 'center' 'middle' 'My Text'}}}

Voorbeeld met standaard font(ipag) en dynamische tekst

{{{scalingText 900 200 'center' 'middle' myMergeVariable}}}

Voorbeeld met custom file als font

{{{scalingText 900 200 'center' 'middle' 'My Text' 'Mynerve-Regular.ttf'}}}

Voorbeeld met extern google-font

{{{scalingText 900 200 'center' 'middle' 'Some text' 'https://fonts.gstatic.com/s/pangolin/v11/cY9GfjGcW0FPpi-tWMfN79w.woff2'}}}

Extra informatie

Onze tekstschalingsfunctie ondersteunt alleen het invoeren van een variabele. Het lijkt misschien alsof je willekeurige statische tekst vóór of na die variabele kunt toevoegen, maar dat is niet mogelijk. Voeg gewoon het statische deel aan jouw kant toe bij de API-oproepen.

Bijvoorbeeld, je hebt een tekstschalingscomponent waarin je een gebruiker wilt verwelkomen. Je wilt misschien tekst zoals deze: "Welkom, {{naam}}, bij ons bedrijf!". Noem de variabele gewoon {{welkomstbericht}} en voer een verzoek uit met een stuk statische tekst en dynamische tekst samen.