Text Customization

Al Islam's Text Customization system is a unified, language-aware interface that lets you control the appearance of every text element across the entire app. Rather than scattered settings, everything flows through a single customization system where you can adjust font size, line height, spacing, colors, fonts, and more with real-time preview and per-language precision.

Overview

Text Customization is accessible from any content view in the app:

Random Hadith view → tap ⋮ (More) → Customize Text
Hadith Books listing → tap ⋮ (More) → Customize Text
Quranic Ayah view → tap ⋮ (More) → Customize Text
Chapter listings → tap ⋮ (More) → Customize Text
Any other content view → tap ⋮ (More) → Customize Text

When you tap "Customize Text" from any screen, the system remembers which section and language you came from, pre-selecting them. You can also manually select any section and language from within the customization interface.

Philosophy

Text Customization is built on the principle of granular, per-language control. The app recognizes that:

Different scripts have different needs — Arabic, Urdu, English, and other languages render best with different typography
Different content types need different emphasis — supporting text should visually differ from main content
Personal preference varies — customize according to your needs
Language-specific fonts matter — the best font for one language may not work well for another

Accessing Text Customization

From Any Content View

When you're viewing content (Hadith, Quran, Tafsir, etc.), tap the ⋮ (More) menu in the top-right corner. You'll see the Customize Text option.

When you do this, the system automatically pre-selects:

The content section you came from
The language you were viewing

Section Selection

At the top-left, a dropdown menu shows available content sections:

Random Hadith — customize appearance of the daily hadith widget
Hadith Books Listing — customize chapter and book titles
Hadith Preview — customize the main hadith text
Quranic Ayah — customize Quranic text display
Quranic Ayah Listing — customize verse number/reference display
Tafsir Content — customize tafsir text and commentary
Collection Content — customize your personal collection notes
(and other content-specific sections)

Language Selection

At the top-right, a dropdown menu shows available languages. You can customize appearance separately for each language:

Arabic (العربية)
Urdu (اردو)
English
French (Français)
Indonesian (Bahasa Indonesia)
Turkish (Türkçe)
(+ 56 more languages)

Why per-language customization?

You might view the Quran in both Arabic and English translations. You may prefer:

Arabic text: Larger font, wider line height
English text: Smaller font, standard line height

Text Customization lets you set completely different styles for each language, applied automatically depending on which you're viewing.

Real-Time Preview

At the top of the customization area, you see a live preview of your text content in the selected language and section.

As you adjust any setting below (font size, color, line height, etc.), the preview updates in real-time.

Typography Controls

Line Height

Controls the vertical spacing between lines of text. Higher line height = more breathing room.

Three ways to adjust:

Slider — drag to adjust
Numerical input — tap and type
Plus/Minus buttons — increase or decrease

Range: Values adjustable according to your preference

Affects readability, especially for scripts with diacritics (Arabic with vowel marks).

Letter Spacing

Controls the horizontal space between individual letters.

Three ways to adjust:

Slider — drag to adjust
Numerical input — tap and type
Plus/Minus buttons — increase or decrease

Can improve readability for certain scripts and font sizes.

Color Customization

Text Color

Choose the primary color for main content text.

How to select:

You can:

Enter the hex code directly — type a color code (e.g., #1A1A1A)
Select from a color wheel — visual color picker
Select transparency — adjust opacity of the color
Select saturation — adjust color intensity

You'll see a preview of the color and the hex code as you adjust.

Prefix Color

Some content has prefix or supporting text that should be visually distinguished from the main content.

What is prefix text?

Examples include:

Hadith chains — the narration chain before the hadith text
Supporting text — metadata or narration context
References — Surah names, verse numbers, edition names

Prefix color lets you make these visually distinct so they don't compete for attention with the main content.

How to set:

Use the same color customization interface (hex code, color wheel, transparency, saturation) to choose a color that's lighter, less saturated, or more muted than the main text color.

Font Management

Built-In Fonts

Tap the [Font Selection] button to open the font manager.

Al Islam comes pre-loaded with curated fonts optimized for each language:

Arabic Fonts:

Arabic Typesetting
Scheherazade
Cairo
Reem Kufi

Urdu Fonts:

Jameel Noori Nastaliq
Urdu Typesetting
Noto Nastaliq Urdu

English Fonts:

Lora
Open Sans
Georgia
Roboto

Multi-Language Fonts:

Noto Sans
DejaVu Sans

Each font shows:

Font name
Live sample text in that font (in the selected language)
Tap to select

Tapping any font instantly applies it.

Importing Custom Fonts

You can import custom fonts from your device.

How to import:

From the Font Selector, tap the + (Plus) button
A file picker appears
Select a TTF (TrueType) font file
A dialog appears for import options

During import:

Font File — automatically filled with your selected file
Font Title — give the font a display name for your reference
Language — select which language to use for the preview sample text (this is only for preview purposes; you can use the font with any language)

After import:

The font instantly appears in your font list
You can select it immediately
It's saved permanently and available for all sections and languages

Managing Imported Fonts

Once imported, you can:

Rename — change the font's display name
Change preview language — adjust which language the preview displays
Delete — remove the font if you no longer need it
Reorder — organize fonts in your list

All Styles Preview

Tap the [All Styles Preview] button to see how all content sections look in your chosen language.

What you see:

A comprehensive view showing every content section side-by-side, displaying:

How each section is configured
How each section looks with your customized fonts and colors
Real-time updates as you make changes

Navigation in All Styles:

Language selector — switch to see all styles in a different language
Scroll vertically — browse through all sections
Real-time updates — changes you made are reflected instantly

This view helps you:

Ensure consistency across sections
Compare how different content types look with the same font
Spot if one section needs adjustment relative to others

Reset to Default

If you've made customizations and want to start fresh, tap the [Reset to Default] button.

What happens:

All settings for the current section and language revert to Al Islam's recommended defaults
Other sections and languages are unaffected
You can redo your customizations immediately if desired

Customization Scope

Text Customization applies to all content views where text is displayed:

Random Hadith — the daily hadith widget on home screen
Hadith Books — chapter listings and hadith previews
Quranic Verses — Quranic text and translations
Tafsir — interpretation text and commentary
Collections — your saved items and notes
Any other content view — wherever text appears

Tips & Best Practices

Customize per-language — don't force one style across all languages
Test readability — ensure your chosen size and line height are comfortable for extended reading
Use prefix colors — distinguish supporting text from main content for better visual hierarchy
Check All Styles Preview — see how all sections look together
Import judiciously — only import fonts you'll actively use
Consider your device — large, complex fonts may render differently on low-end devices

What's New in v4.3

Text Customization improvements in v4.3 include:

Faster font switching
Improved color picker interface
Better language detection when entering from content views
Enhanced All Styles Preview rendering
Improved custom font rendering on all devices.