Text och typografi i mobilutveckling: vad det är, vilka verktyg och hur det fungerar

Text i mobilappar: NSAttributedString på iOS

NSAttributedString är den grundläggande iOS-klassen för att arbeta med formaterad text. Den gör det möjligt att tillämpa attribut på enskilda tecken eller intervall: teckensnitt via UIFont, färg via UIColor, teckenavstånd via kern och radavstånd via NSMutableParagraphStyle. I mobilappar används NSAttributedString överallt — från UILabel till komplexa UITextView med redigeringsstöd.

UIFont och teckensnittskonfiguration

UIFont är huvudklassen för att arbeta med teckensnitt på iOS. Den stöder systemteckensnitt, anpassade teckensnitt och Dynamic Type. UIFont(name:size:) laddar ett teckensnitt efter namn, UIFont.systemFont(ofSize:weight:) laddar systemteckensnittet. UIFontDescriptor gör det möjligt att modifiera ett befintligt teckensnitt: ändra storlek, vikt eller lägga till en transformationsmatris. För anpassade teckensnitt läggs .ttf-filen till i projektet och registreras i Info.plist under nyckeln Fonts provided by application.

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont(name: "HelveticaNeue-Bold", size: 18) as Any,
    .foregroundColor: UIColor.darkGray as Any,
    .kern: 1.5 as Any
]
let attributedString = NSAttributedString(
    string: "Форматированный текст",
    attributes: attributes
)
label.attributedText = attributedString

NSMutableParagraphStyle och styckeformatering

NSMutableParagraphStyle är en föränderlig version av ParagraphStyle för att konfigurera styckesvisning. Den styr justering (alignment), radavstånd (lineSpacing), indrag (headIndent, tailIndent) och avbrottsläge (lineBreakMode). ParagraphStyle är avgörande för läsbarheten av långa texter på mobila enheter: korrekt lineSpacing förhindrar att rader smälter samman och lineBreakMode förhindrar att ord kapas. Inställningen paragraphSpacing definierar utrymmet mellan stycken.

Text i mobilappar: SpannableString på Android

SpannableString är det huvudsakliga verktyget för textformatering på Android. Den fungerar genom en mekanism med Span-objekt, var och en ansvarig för en aspekt: StyleSpan för fet eller kursiv stil, ForegroundColorSpan för färg, URLSpan för länkar, UnderlineSpan för understrykning. SpannableStringBuilder är motsvarigheten till NSMutableAttributedString och gör det möjligt att bygga text från flera fragment. Att förstå SpannableString är viktigt för att skapa flexibla gränssnitt med formaterad text i mobilappar.

Typeface och anpassade teckensnitt på Android

Typeface är klassen för att arbeta med teckensnitt på Android. Den stöder systemteckensnitten Roboto och Noto, samt anpassade teckensnitt. Typeface.createFromResource() laddar ett teckensnitt från res/font/, Typeface.createFromAsset() från assets-mappen. Android 8.0+ stöder teckensnittsfamiljer i XML, vilket kombinerar flera teckensnittsfiler till en resurs. Ett anpassat teckensnitt för text i mobilappar på Android ställs in via attributet android:fontFamily eller programmatiskt med setTypeface().

TextMeasurer och textmätning

TextMeasurer (API 29+) är ett modernt verktyg för att mäta text utan bindning till en View. Den beräknar bredd, höjd och teckenpositioner före rendering. På äldre API:er används Paint.measureText() för enkelradstext eller StaticLayout för flerradstext. TextMeasurer är särskilt användbar i anpassade vyer där text ritas via Canvas.drawText(). Korrekt mätning förhindrar att tecken kapas i gränssnittet.

val spannable = SpannableString("Жирный текст с цветом")
spannable.setSpan(
    StyleSpan(Typeface.BOLD),
    0, 6,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
spannable.setSpan(
    ForegroundColorSpan(Color.RED),
    14, 19,
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)
textView.text = spannable

Typografi i mobilutveckling: kerning, ligaturer och tracking

Typografi i mobilappar är en omfattande konfiguration av teckensnitt, teckenavstånd och radavstånd. Korrekt typografi i mobilutveckling påverkar direkt textens läsbarhet och den visuella uppfattningen av gränssnittet. Låt oss titta på de viktigaste parametrarna som finns på båda plattformarna.

Kerning och Tracking

Kerning är justering av utrymmet mellan specifika teckenpar (AV, To, Wa). Tracking är enhetligt teckenavstånd för hela texten eller en del av den. På iOS ställs kerning in via NSKernAttributeName, på Android — via TextView-egenskapen letterSpacing. Negativa värden för tecken närmare varandra, positiva värden sprider dem. Typografi i mobilutveckling kräver noggrann justering av dessa parametrar: för stora rubriker ökas teckenavståndet vanligtvis, för brödtext förblir det standard.

Ligaturer

Ligaturer är speciella glyfer som ersätter kombinationer av två eller flera tecken: fi, fl, ffi. På iOS styrs ligaturer via NSLigatureAttributeName: 0 — inaktiverade, 1 — standard, 2 — alla tillgängliga. På Android styrs ligaturer på teckensnittsnivå via OpenType-funktioner. Att aktivera ligaturer förbättrar textens utseende, särskilt i serif-teckensnitt. Typografi i mobilutveckling använder ligaturer främst för rubriker och logotyper.

Anpassade teckensnitt i mobilappar: laddning och konfiguration

Anpassade teckensnitt är ett av de främsta verktygen för att skapa en unik visuell stil för en app. De hjälper till att framhäva varumärket och förbättra användarupplevelsen. I mobilappar används anpassade teckensnitt för rubriker, logotyper, accentelement och företagsidentitet.

Variabla teckensnitt

Variabla teckensnitt är en modern teckensnittsteknik där en enda fil innehåller flera stilar: från tunn till extra fet, från smal till bred. Detta minskar appens storlek genom att ersätta flera teckensnittsfiler med en. På iOS stöds variabla teckensnitt via UIFont med parametern weight. På Android — via Typeface.Builder med angivande av variabilitetsaxlarna wght, wdth, slnt. Användning av variabla teckensnitt förenklar typografin i mobilappar: utvecklaren behöver inte ladda separata filer för varje stil.

let customFont = UIFont(name: "CustomFont-Regular", size: 16)
let scaledFont = UIFontMetrics.default
    .scaledFont(for: customFont)
label.font = scaledFont
label.adjustsFontForContentSizeCategory(true)

NSTextAttachment och ImageSpan

NSTextAttachment på iOS gör det möjligt att bädda in UIImage i NSAttributedString — bilden justeras mot baslinjen och flyttas med texten. På Android är motsvarigheten ImageSpan i SpannableString. Båda metoderna är användbara för chatt med emoji, nyhetsflöden med ikoner och formulär med anpassade kryssrutor. Det är viktigt att skala bilden korrekt så att den matchar teckensnittshöjden för att text och grafik ska se harmoniska ut.

Texteffekter, justering och ellips

Utöver grundläggande formatering stöder text i mobilappar ytterligare visuella effekter: skuggor, konturer, genomstrykning och understrykning. Dessa verktyg utökar typografins möjligheter men kräver noggrann tillämpning för att bibehålla läsbarheten.

Textskugga och kontur

Textskugga på iOS ställs in via NSShadow med offset, blurRadius och color. Kontur — via NSStrokeWidthAttributeName: negativa värden skapar fyllning med kontur, positiva värden skapar endast kontur. Genomstrykning — NSUnderlineStyle (.single, .thick, .double). På Android konfigureras TextView-skugga via android:shadowRadius, android:shadowDx, android:shadowDy. SpannableString stöder StrikethroughSpan och UnderlineSpan. Textkontur på Android implementeras via OutlineSpan eller ett anpassat teckensnitt.

Ellips och Marquee

Ellips är kapning av text med tre punkter när behållaren svämmar över. På iOS konfigureras det via lineBreakMode .byTruncatingTail och numberOfLines. På Android — via android:ellipsize="end" och android:maxLines. Marquee är en rullande textanimation tillgänglig på Android via android:ellipsize="marquee". På iOS finns ingen inbyggd motsvarighet — biblioteket MarqueeLabel används. Ellips är obligatorisk för alla enkelradiga texter i mobilappar för att undvika kapning av innehåll.

Dynamic Type på iOS

Dynamic Type är ett adaptivt textsystem på iOS som justerar teckensnittsstorleken baserat på användarens tillgänglighetsinställningar. Använd UIFontMetrics för att skala anpassade teckensnitt. Dynamic Type är obligatoriskt för tillgänglighetskompatibla appar. På Android är motsvarigheten sp-enheter och scaledPixels, som skalas enligt systemets textstorleksinställningar.