متن و تایپوگرافی در توسعه موبایل: چیست، چه ابزارهایی و چگونه کار می‌کند

متن در برنامه‌های موبایل: NSAttributedString در iOS

NSAttributedString کلاس بنیادی iOS برای کار با متن قالب‌بندی شده است. این امکان را فراهم می‌کند که ویژگی‌ها را به حروف یا محدوده‌های جداگانه اعمال کنید: فونت از طریق UIFont، رنگ از طریق UIColor، فاصله بین حروف از طریق kern و فاصله خطوط از طریق NSMutableParagraphStyle. در برنامه‌های موبایل، NSAttributedString در همه جا استفاده می‌شود — از UILabel تا UITextView پیچیده با پشتیبانی از ویرایش.

UIFont و پیکربندی فونت

UIFont کلاس اصلی برای کار با فونت‌ها در iOS است. از فونت‌های سیستمی، فونت‌های سفارشی و Dynamic Type پشتیبانی می‌کند. UIFont(name:size:) یک فونت را بر اساس نام بارگذاری می‌کند، UIFont.systemFont(ofSize:weight:) فونت سیستمی را بارگذاری می‌کند. UIFontDescriptor امکان تغییر فونت موجود را فراهم می‌کند: تغییر اندازه، وزن یا افزودن ماتریس تبدیل. برای فونت‌های سفارشی، فایل .ttf به پروژه اضافه شده و در Info.plist تحت کلید 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 و قالب‌بندی پاراگراف

NSMutableParagraphStyle نسخه قابل تغییری از ParagraphStyle برای پیکربندی نمایش پاراگراف‌ها است. این تراز (alignment)، فاصله خطوط (lineSpacing)، تورفتگی (headIndent، tailIndent) و حالت برش (lineBreakMode) را کنترل می‌کند. ParagraphStyle برای خوانایی متون طولانی در دستگاه‌های موبایل حیاتی است: lineSpacing مناسب از ادغام خطوط جلوگیری می‌کند و lineBreakMode از برش کلمات جلوگیری می‌کند. تنظیم paragraphSpacing فاصله بین پاراگراف‌ها را تعریف می‌کند.

متن در برنامه‌های موبایل: SpannableString در Android

SpannableString ابزار اصلی برای قالب‌بندی متن در Android است. این از طریق مکانیزم اشیاء Span کار می‌کند که هر کدام مسئول یک جنبه هستند: StyleSpan برای پررنگ یا کج، ForegroundColorSpan برای رنگ، URLSpan برای پیوندها، UnderlineSpan برای زیرخط. SpannableStringBuilder معادل NSMutableAttributedString است و امکان ساخت متن از چندین بخش را فراهم می‌کند. درک SpannableString برای ایجاد رابط‌های منعطف با متن قالب‌بندی شده در برنامه‌های موبایل ضروری است.

Typeface و فونت‌های سفارشی در Android

Typeface کلاس کار با فونت‌ها در Android است. از فونت‌های سیستمی Roboto و Noto و همچنین فونت‌های سفارشی پشتیبانی می‌کند. Typeface.createFromResource() یک فونت را از res/font/ بارگذاری می‌کند، Typeface.createFromAsset() از پوشه assets بارگذاری می‌کند. Android 8.0+ از خانواده فونت‌ها در XML پشتیبانی می‌کند و چندین فایل فونت را در یک منبع واحد ترکیب می‌کند. یک فونت سفارشی برای متن در برنامه‌های موبایل در Android از طریق ویژگی android:fontFamily یا برنامه‌نویسی با setTypeface() تنظیم می‌شود.

TextMeasurer و اندازه‌گیری متن

TextMeasurer (API 29+) یک ابزار مدرن برای اندازه‌گیری متن بدون اتصال به View است. عرض، ارتفاع و موقعیت حروف را قبل از رندر محاسبه می‌کند. در APIهای قدیمی، Paint.measureText() برای متن تک خطی یا StaticLayout برای متن چند خطی استفاده می‌شود. TextMeasurer به ویژه در Viewهای سفارشی که متن از طریق Canvas.drawText() کشیده می‌شود مفید است. اندازه‌گیری صحیح از برش حروف در رابط جلوگیری می‌کند.

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

تایپوگرافی در توسعه موبایل: کرنینگ، لیگاتور و ترکینگ

تایپوگرافی در برنامه‌های موبایل یک پیکربندی جامع از فونت‌ها، فاصله بین حروف و فاصله خطوط است. تایپوگرافی مناسب در توسعه موبایل مستقیماً بر خوانایی متن و ادراک بصری رابط تأثیر می‌گذارد. بیایید پارامترهای کلیدی موجود در هر دو پلتفرم را بررسی کنیم.

کرنینگ و ترکینگ

کرنینگ تنظیم فاصله بین جفت حروف خاص (AV، To، Wa) است. ترکینگ فاصله یکنواخت بین حروف برای کل متن یا بخشی از آن است. در iOS، کرنینگ از طریق NSKernAttributeName تنظیم می‌شود، در Android — از طریق ویژگی letterSpacing در TextView. مقادیر منفی حروف را نزدیک‌تر می‌کنند، مقادیر مثبت آنها را دورتر می‌کنند. تایپوگرافی در توسعه موبایل نیاز به تنظیم دقیق این پارامترها دارد: برای عنوان‌های بزرگ، فاصله بین حروف معمولاً افزایش می‌یابد، برای متن اصلی استاندارد باقی می‌ماند.

لیگاتور

لیگاتور گلیف‌های ویژه‌ای هستند که ترکیب دو یا چند حرف (fi، fl، ffi) را جایگزین می‌کنند. در iOS، لیگاتورها از طریق NSLigatureAttributeName کنترل می‌شوند: 0 — غیرفعال، 1 — استاندارد، 2 — همه موجود. در Android، لیگاتورها در سطح فونت از طریق ویژگی‌های OpenType کنترل می‌شوند. فعال‌سازی لیگاتورها ظاهر متن را بهبود می‌بخشد، به ویژه در فونت‌های سریف. تایپوگرافی در توسعه موبایل عمدتاً از لیگاتورها برای عنوان‌ها و لوگوها استفاده می‌کند.

فونت‌های سفارشی در برنامه‌های موبایل: بارگذاری و پیکربندی

فونت‌های سفارشی یکی از ابزارهای اصلی برای ایجاد یک سبک بصری منحصربه‌فرد برای برنامه هستند. آنها به برجسته‌سازی برند و بهبود تجربه کاربر کمک می‌کنند. در برنامه‌های موبایل، فونت‌های سفارشی برای عنوان‌ها، لوگوها، عناصر تأکیدی و هویت سازمانی استفاده می‌شوند.

فونت‌های متغیر

فونت‌های متغیر یک فناوری مدرن فونت است که در آن یک فایل شامل چندین سبک است: از نازک تا فوق‌العاده پررنگ، از باریک تا پهن. این کار اندازه برنامه را با جایگزینی چندین فایل فونت با یک فایل کاهش می‌دهد. در iOS، فونت‌های متغیر از طریق UIFont با پارامتر weight پشتیبانی می‌شوند. در Android — از طریق Typeface.Builder با مشخص کردن محورهای تغییرپذیری wght، wdth، slnt. استفاده از فونت‌های متغیر تایپوگرافی را در برنامه‌های موبایل ساده می‌کند: توسعه‌دهنده نیازی به بارگذاری فایل‌های جداگانه برای هر سبک ندارد.

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

NSTextAttachment و ImageSpan

NSTextAttachment در iOS امکان جاسازی UIImage در داخل NSAttributedString را فراهم می‌کند — تصویر با خط پایه تراز شده و همراه با متن حرکت می‌کند. در Android، معادل ImageSpan در داخل SpannableString است. هر دو روش برای چت با ایموجی، فیدهای خبری با آیکون و فرم‌های با چک‌باکس سفارشی مفید هستند. مهم است که تصویر را به درستی با ارتفاع فونت تطبیق دهید تا متن و گرافیک هماهنگ به نظر برسند.

جلوه‌های متن، تراز و بیضی

علاوه بر قالب‌بندی پایه، متن در برنامه‌های موبایل از جلوه‌های بصری اضافی پشتیبانی می‌کند: سایه‌ها، طرح کلی، خط‌خوردگی و زیرخط. این ابزارها امکانات تایپوگرافی را گسترش می‌دهند اما برای حفظ خوانایی نیاز به کاربرد دقیق دارند.

سایه و طرح کلی متن

سایه متن در iOS از طریق NSShadow با offset، blurRadius و color تنظیم می‌شود. طرح کلی — از طریق NSStrokeWidthAttributeName: مقادیر منفی پر کردن با طرح کلی ایجاد می‌کنند، مقادیر مثبت فقط طرح کلی را ایجاد می‌کنند. خط‌خوردگی — NSUnderlineStyle (.single، .thick، .double). در Android، سایه TextView از طریق android:shadowRadius، android:shadowDx، android:shadowDy پیکربندی می‌شود. SpannableString از StrikethroughSpan و UnderlineSpan پشتیبانی می‌کند. طرح کلی متن در Android از طریق OutlineSpan یا یک فونت سفارشی پیاده‌سازی می‌شود.

بیضی و مارکی

بیضی برش متن با سه‌نقطه هنگام سرریز شدن ظرف است. در iOS، از طریق lineBreakMode .byTruncatingTail و numberOfLines پیکربندی می‌شود. در Android — از طریق android:ellipsize="end" و android:maxLines. مارکی یک انیمیشن متنی متحرک است که در Android از طریق android:ellipsize="marquee" در دسترس است. در iOS، معادل داخلی وجود ندارد — از کتابخانه MarqueeLabel استفاده می‌شود. بیضی برای تمام متن‌های تک خطی در برنامه‌های موبایل برای جلوگیری از برش محتوا الزامی است.

Dynamic Type در iOS

Dynamic Type یک سیستم متن تطبیقی در iOS است که اندازه فونت را بر اساس تنظیمات دسترسی کاربر تنظیم می‌کند. برای مقیاس‌بندی فونت‌های سفارشی از UIFontMetrics استفاده کنید. Dynamic Type برای برنامه‌های سازگار با دسترسی الزامی است. در Android، معادل واحدهای sp و scaledPixels هستند که با توجه به تنظیمات اندازه متن سیستم مقیاس می‌شوند.