Text a typografie v mobilním vývoji: co to je, jaké nástroje a jak to funguje

Text v mobilních aplikacích: NSAttributedString na iOS

NSAttributedString je základní třída iOS pro práci s formátovaným textem. Umožňuje aplikovat atributy na jednotlivé znaky nebo rozsahy: písmo přes UIFont, barvu přes UIColor, mezeru mezi znaky přes kern a řádkování přes NSMutableParagraphStyle. V mobilních aplikacích se NSAttributedString používá všude — od UILabel po komplexní UITextView s podporou úprav.

UIFont a konfigurace písma

UIFont je hlavní třída pro práci s písmy na iOS. Podporuje systémová písma, vlastní písma a Dynamic Type. UIFont(name:size:) načte písmo podle názvu, UIFont.systemFont(ofSize:weight:) načte systémové písmo. UIFontDescriptor umožňuje upravit existující písmo: změnit velikost, tloušťku nebo přidat transformační matici. Pro vlastní písma se soubor .ttf přidá do projektu a zaregistruje v Info.plist pod klíčem 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 a formátování odstavců

NSMutableParagraphStyle je upravitelná verze ParagraphStyle pro konfiguraci zobrazení odstavců. Řídí zarovnání (alignment), řádkování (lineSpacing), odsazení (headIndent, tailIndent) a režim ořezu (lineBreakMode). ParagraphStyle je kritický pro čitelnost dlouhých textů na mobilních zařízeních: správné lineSpacing zabraňuje slévání řádků a lineBreakMode zabraňuje ořezávání slov. Nastavení paragraphSpacing definuje mezeru mezi odstavci.

Text v mobilních aplikacích: SpannableString na Androidu

SpannableString je hlavní nástroj pro formátování textu na Androidu. Funguje prostřednictvím mechanismu objektů Span, z nichž každý je zodpovědný za jeden aspekt: StyleSpan pro tučné nebo kurzívu, ForegroundColorSpan pro barvu, URLSpan pro odkazy, UnderlineSpan pro podtržení. SpannableStringBuilder je ekvivalentem NSMutableAttributedString a umožňuje sestavit text z více fragmentů. Porozumění SpannableString je nezbytné pro vytváření flexibilních rozhraní s formátovaným textem v mobilních aplikacích.

Typeface a vlastní písma na Androidu

Typeface je třída pro práci s písmy na Androidu. Podporuje systémová písma Roboto a Noto, stejně jako vlastní písma. Typeface.createFromResource() načítá písmo z res/font/, Typeface.createFromAsset() ze složky assets. Android 8.0+ podporuje rodiny písem v XML, kombinující více souborů písma do jednoho zdroje. Vlastní písmo pro text v mobilních aplikacích na Androidu se nastavuje pomocí atributu android:fontFamily nebo programově pomocí setTypeface().

TextMeasurer a měření textu

TextMeasurer (API 29+) je moderní nástroj pro měření textu bez vazby na View. Vypočítává šířku, výšku a pozice znaků před vykreslením. Na starších API se používá Paint.measureText() pro jednořádkový text nebo StaticLayout pro víceřádkový text. TextMeasurer je užitečný zejména ve vlastních Views, kde se text kreslí přes Canvas.drawText(). Správné měření zabraňuje ořezávání znaků v rozhraní.

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

Typografie v mobilním vývoji: kerning, ligatury a tracking

Typografie v mobilních aplikacích je komplexní konfigurace písem, mezer mezi znaky a řádkování. Správná typografie v mobilním vývoji přímo ovlivňuje čitelnost textu a vizuální vnímání rozhraní. Podívejme se na klíčové parametry dostupné na obou platformách.

Kerning a Tracking

Kerning je úprava mezery mezi konkrétními páry znaků (AV, To, Wa). Tracking je rovnoměrná mezera mezi znaky pro celý text nebo jeho část. Na iOS se kerning nastavuje přes NSKernAttributeName, na Androidu — přes vlastnost letterSpacing TextView. Záporné hodnoty přibližují znaky, kladné hodnoty je oddalují. Typografie v mobilním vývoji vyžaduje pečlivé doladění těchto parametrů: pro velké nadpisy se mezera mezi znaky obvykle zvětšuje, pro hlavní text zůstává standardní.

Ligatury

Ligatury jsou speciální glyfy nahrazující kombinace dvou nebo více znaků: fi, fl, ffi. Na iOS jsou ligatury řízeny přes NSLigatureAttributeName: 0 — vypnuty, 1 — standardní, 2 — všechny dostupné. Na Androidu jsou ligatury řízeny na úrovni písma přes funkce OpenType. Zapnutí ligatur zlepšuje vzhled textu, zejména u patkových písem. Typografie v mobilním vývoji používá ligatury především pro nadpisy a loga.

Vlastní písma v mobilních aplikacích: načítání a konfigurace

Vlastní písma jsou jedním z hlavních nástrojů pro vytvoření jedinečného vizuálního stylu aplikace. Pomáhají zvýraznit značku a zlepšit uživatelský zážitek. V mobilních aplikacích se vlastní písma používají pro nadpisy, loga, akcentní prvky a firemní identitu.

Variabilní písma

Variabilní písma jsou moderní technologie písem, kde jeden soubor obsahuje více stylů: od tenkého po extra tučný, od úzkého po široký. To zmenšuje velikost aplikace nahrazením několika souborů písma jedním. Na iOS jsou variabilní písma podporována přes UIFont s parametrem weight. Na Androidu — přes Typeface.Builder s určením os variability wght, wdth, slnt. Použití variabilních písem zjednodušuje typografii v mobilních aplikacích: vývojář nemusí načítat samostatné soubory pro každý styl.

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

NSTextAttachment a ImageSpan

NSTextAttachment na iOS umožňuje vložit UIImage do NSAttributedString — obrázek se zarovná k základní lince a pohybuje se s textem. Na Androidu je ekvivalentem ImageSpan uvnitř SpannableString. Oba přístupy jsou užitečné pro chat s emoji, zpravodajské kanály s ikonami a formuláře s vlastními zaškrtávacími políčky. Je důležité správně škálovat obrázek na výšku písma, aby text a grafika vypadaly harmonicky.

Efekty textu, zarovnání a elipsa

Kromě základního formátování podporuje text v mobilních aplikacích další vizuální efekty: stíny, obrysy, přeškrtnutí a podtržení. Tyto nástroje rozšiřují možnosti typografie, ale vyžadují pečlivé použití pro zachování čitelnosti.

Stín a obrys textu

Stín textu na iOS se nastavuje přes NSShadow s offset, blurRadius a color. Obrys — přes NSStrokeWidthAttributeName: záporné hodnoty vytvářejí výplň s obrysem, kladné hodnoty pouze obrys. Přeškrtnutí — NSUnderlineStyle (.single, .thick, .double). Na Androidu se stín TextView konfiguruje přes android:shadowRadius, android:shadowDx, android:shadowDy. SpannableString podporuje StrikethroughSpan a UnderlineSpan. Obrys textu na Androidu je implementován přes OutlineSpan nebo vlastní písmo.

Elipsa a Marquee

Elipsa je ořezávání textu s třemi tečkami při přetečení kontejneru. Na iOS se konfiguruje přes lineBreakMode .byTruncatingTail a numberOfLines. Na Androidu — přes android:ellipsize="end" a android:maxLines. Marquee je animace posouvání textu dostupná na Androidu přes android:ellipsize="marquee". Na iOS není vestavěný ekvivalent — používá se knihovna MarqueeLabel. Elipsa je povinná pro všechny jednořádkové texty v mobilních aplikacích, aby se zabránilo ořezávání obsahu.

Dynamic Type na iOS

Dynamic Type je adaptivní textový systém na iOS, který přizpůsobuje velikost písma podle nastavení usnadnění uživatele. Použijte UIFontMetrics pro škálování vlastních písem. Dynamic Type je povinný pro aplikace kompatibilní s usnadněním. Na Androidu jsou ekvivalentem jednotky sp a scaledPixels, které se škálují podle systémového nastavení velikosti textu.