Tekst i tipografija u mobilnom razvoju: šta je to, koji alati i kako funkcioniše

Tekst u mobilnim aplikacijama: NSAttributedString na iOS-u

NSAttributedString je fundamentalna iOS klasa za rad sa formatiranim tekstom. Omogućava primenu atributa na pojedinačne znakove ili opsege: font putem UIFont-a, boju putem UIColor-a, razmak između znakova putem kern-a i razmak između redova putem NSMutableParagraphStyle-a. U mobilnim aplikacijama, NSAttributedString se koristi svuda — od UILabel do složenih UITextView sa podrškom za uređivanje.

UIFont i podešavanje fonta

UIFont je glavna klasa za rad sa fontovima na iOS-u. Podržava sistemske tipove slova, prilagođene fontove i Dynamic Type. UIFont(name:size:) učitava font po imenu, UIFont.systemFont(ofSize:weight:) učitava sistemski font. UIFontDescriptor omogućava modifikaciju postojećeg fonta: promenu veličine, težine ili dodavanje matrice transformacije. Za prilagođene fontove, .ttf fajl se dodaje u projekat i registruje u Info.plist pod ključ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 i formatiranje pasusa

NSMutableParagraphStyle je izmenjiva verzija ParagraphStyle za konfigurisanje prikaza pasusa. Kontroliše poravnanje (alignment), razmak između redova (lineSpacing), uvlačenja (headIndent, tailIndent) i način prekida (lineBreakMode). ParagraphStyle je kritičan za čitljivost dugačkih tekstova na mobilnim uređajima: odgovarajući lineSpacing sprečava spajanje redova, a lineBreakMode sprečava sečenje reči. Podešavanje paragraphSpacing definiše razmak između pasusa.

Tekst u mobilnim aplikacijama: SpannableString na Android-u

SpannableString je glavni alat za formatiranje teksta na Android-u. Funkcioniše kroz mehanizam Span objekata, od kojih je svaki odgovoran za jedan aspekt: StyleSpan za podebljano ili kurziv, ForegroundColorSpan za boju, URLSpan za linkove, UnderlineSpan za podvlačenje. SpannableStringBuilder je pandan NSMutableAttributedString-u, omogućavajući izgradnju teksta iz više fragmenata. Razumevanje SpannableString je neophodno za kreiranje fleksibilnih interfejsa sa formatiranim tekstom u mobilnim aplikacijama.

Typeface i prilagođeni fontovi na Android-u

Typeface je klasa za rad sa fontovima na Android-u. Podržava sistemske tipove slova Roboto i Noto, kao i prilagođene fontove. Typeface.createFromResource() učitava font iz res/font/, Typeface.createFromAsset() iz foldera assets. Android 8.0+ podržava font porodice u XML, kombinujući više fajlova fonta u jedan resurs. Prilagođeni font za tekst u mobilnim aplikacijama na Android-u se postavlja putem atributa android:fontFamily ili programski putem setTypeface().

TextMeasurer i merenje teksta

TextMeasurer (API 29+) je moderan alat za merenje teksta bez vezivanja za View. Izračunava širinu, visinu i pozicije znakova pre renderovanja. Na starijim API-ima, Paint.measureText() se koristi za jednoredni tekst ili StaticLayout za višeredni tekst. TextMeasurer je posebno koristan u prilagođenim View-ovima gde se tekst crta putem Canvas.drawText(). Ispravno merenje sprečava sečenje znakova u interfejsu.

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

Tipografija u mobilnom razvoju: kerning, ligature i tracking

Tipografija u mobilnim aplikacijama je sveobuhvatna konfiguracija fontova, razmaka između znakova i redova. Pravilna tipografija u mobilnom razvoju direktno utiče na čitljivost teksta i vizuelnu percepciju interfejsa. Pogledajmo ključne parametre dostupne na obe platforme.

Kerning i Tracking

Kerning je podešavanje razmaka između specifičnih parova znakova (AV, To, Wa). Tracking je ujednačen razmak između znakova za ceo tekst ili njegov deo. Na iOS-u, kerning se postavlja putem NSKernAttributeName, na Android-u — putem svojstva letterSpacing u TextView. Negativne vrednosti približavaju znakove, pozitivne ih razdvajaju. Tipografija u mobilnom razvoju zahteva pažljivo podešavanje ovih parametara: za velike naslove razmak između znakova se obično povećava, za osnovni tekst ostaje standardan.

Ligature

Ligature su specijalni glifovi koji zamenjuju kombinacije dva ili više znakova: fi, fl, ffi. Na iOS-u, ligature se kontrolišu putem NSLigatureAttributeName: 0 — isključene, 1 — standardne, 2 — sve dostupne. Na Android-u, ligature se kontrolišu na nivou fonta putem OpenType mogućnosti. Uključivanje ligatura poboljšava izgled teksta, posebno u serifnim fontovima. Tipografija u mobilnom razvoju koristi ligature uglavnom za naslove i logotipe.

Prilagođeni fontovi u mobilnim aplikacijama: učitavanje i konfiguracija

Prilagođeni fontovi su jedan od glavnih alata za kreiranje jedinstvenog vizuelnog stila aplikacije. Pomažu u isticanju brenda i poboljšanju korisničkog iskustva. U mobilnim aplikacijama, prilagođeni fontovi se koriste za naslove, logotipe, akcentne elemente i korporativni identitet.

Varijabilni fontovi

Varijabilni fontovi su moderna tehnologija fontova gde jedan fajl sadrži više stilova: od tankog do ekstra podebljanog, od uskog do širokog. Ovo smanjuje veličinu aplikacije zamenjujući nekoliko fajlova fonta jednim. Na iOS-u, varijabilni fontovi se podržavaju putem UIFont sa parametrom weight. Na Android-u — putem Typeface.Builder sa navođenjem osa varijabilnosti wght, wdth, slnt. Korišćenje varijabilnih fontova pojednostavljuje tipografiju u mobilnim aplikacijama: developer ne mora da učitava odvojene fajlove za svaki stil.

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

NSTextAttachment i ImageSpan

NSTextAttachment na iOS-u omogućava ugrađivanje UIImage unutar NSAttributedString — slika se poravnava sa osnovnom linijom i pomera se zajedno sa tekstom. Na Android-u, pandan je ImageSpan unutar SpannableString. Oba pristupa su korisna za chat sa emoji-jima, vesti sa ikonicama i forme sa prilagođenim poljima za potvrdu. Važno je pravilno skalirati sliku da odgovara visini fonta kako bi tekst i grafika izgledali skladno.

Efekti teksta, poravnanje i elipsa

Pored osnovnog formatiranja, tekst u mobilnim aplikacijama podržava dodatne vizuelne efekte: senke, konture, precrtavanje i podvlačenje. Ovi alati proširuju mogućnosti tipografije, ali zahtevaju pažljivu primenu radi očuvanja čitljivosti.

Senka i kontura teksta

Senka teksta na iOS-u se postavlja putem NSShadow sa offset, blurRadius i color. Kontura — putem NSStrokeWidthAttributeName: negativne vrednosti stvaraju popunjavanje sa konturom, pozitivne samo konturu. Precrtavanje — NSUnderlineStyle (.single, .thick, .double). Na Android-u, senka TextView se konfiguriše putem android:shadowRadius, android:shadowDx, android:shadowDy. SpannableString podržava StrikethroughSpan i UnderlineSpan. Kontura teksta na Android-u se implementira putem OutlineSpan ili prilagođenog fonta.

Elipsa i Marquee

Elipsa je skraćivanje teksta sa tri tačke kada kontejner prelivi. Na iOS-u se konfiguriše putem lineBreakMode .byTruncatingTail i numberOfLines. Na Android-u — putem android:ellipsize="end" i android:maxLines. Marquee je animacija pomeranja teksta dostupna na Android-u putem android:ellipsize="marquee". Na iOS-u nema ugrađenog pandana — koristi se biblioteka MarqueeLabel. Elipsa je obavezna za sve jednoredne tekstove u mobilnim aplikacijama kako bi se izbeglo sečenje sadržaja.

Dynamic Type na iOS-u

Dynamic Type je adaptivni sistem teksta na iOS-u koji prilagođava veličinu fonta na osnovu podešavanja pristupačnosti korisnika. Koristite UIFontMetrics za skaliranje prilagođenih fontova. Dynamic Type je obavezan za aplikacije usklađene sa pristupačnošću. Na Android-u, pandan su sp jedinice i scaledPixels, koji se skaliraju u skladu sa sistemskim podešavanjima veličine teksta.