# Text

---

# الـ Text في SwiftUI 📝

---

## الأساسي:

```swift
Text("Hello, world!")
```

---

## التعديلات (Modifiers):

### 🔤 الخط:

```swift
Text("Hello")
    .font(.title)        // حجم العنوان
    .font(.headline)     // عنوان فرعي
    .font(.body)         // النص العادي
    .font(.caption)      // نص صغير
```

---

### 🎨 اللون:

```swift
Text("Hello")
    .foregroundStyle(.red)    // أحمر
    .foregroundStyle(.blue)   // أزرق
    .foregroundStyle(.green)  // أخضر
```

---

### ✏️ الستايل:

```swift
Text("Hello")
    .bold()          // عريض
    .italic()        // مائل
    .underline()     // تحته خط
    .strikethrough() // عليه خط
```

---

### 📐 المحاذاة:

```swift
Text("Hello")
    .multilineTextAlignment(.center)  // وسط
    .multilineTextAlignment(.leading) // يسار
    .multilineTextAlignment(.trailing)// يمين
```

---

### 📏 الحجم:

```swift
Text("Hello")
    .frame(width: 200, height: 50) // عرض وارتفاع
    .padding()                      // مسافة
    .padding(.top, 20)             // مسافة فوق بس
```

# لأ! ❌

---

## `.padding()` بيحط المسافة **من برا** العنصر

```swift
Text("Hello")
    .padding()
```

```
        ↕️ padding
   ←→ Hello ←→
        ↕️ padding
```

---

## الفرق:

### padding = من برا 📦

```
┌─────────────────┐
│                 │  ← padding
│   ┌─────────┐   │
│   │  Hello  │   │
│   └─────────┘   │
│                 │  ← padding
└─────────────────┘
```

### اللي بيحط المسافة من جوا = `.frame` 📐

```swift
Text("Hello")
    .frame(width: 200, height: 100)
```

---

## ببساطة:

| | المسافة |
|--|---------|
| `.padding()` | من **برا** العنصر |
| `.frame()` | بيحدد الحجم من **جوا** |

---

> الـ padding زي **الهامش حوالين العنصر** من برا 🎯

---

### 🔢 عدد الأسطر:

```swift
Text("Hello")
    .lineLimit(1)  // سطر واحد بس
    .lineLimit(3)  // 3 أسطر بس
    .lineLimit(nil)// بلا حد
```

# `.lineLimit` 📏

---

## هو **الحد الأقصى** فقط ✅

---

## يعني:

```swift
Text("Hello, World, this is a very long text!")
    .lineLimit(1) // أقصى سطر واحد بس
```

```
// النتيجة:
Hello, World, this is a very...  ← Truncated بعد سطر واحد
```

---

## أمثلة:

```swift
.lineLimit(1)  // سطر واحد بس
.lineLimit(3)  // أقصى 3 أسطر
.lineLimit(nil) // بلا حد ✅ (افتراضي)
```

---

## مفيش حد أدنى؟
لأ، النص بيأخذ **بس ما يحتاجه**

```swift
// لو النص قصير
Text("Hi")
    .lineLimit(3) // مش هياخد 3 أسطر، هياخد سطر واحد بس
```

---

> ببساطة: **lineLimit = أقصى عدد أسطر مسموح بيه** 🎯

---

## مثال كامل:

```swift
Text("Hello, world!")
    .font(.title)
    .bold()
    .foregroundStyle(.blue)
    .padding()
```

---

> كل سطر بيبدأ بـ `.` اسمه **Modifier** 🎯

# `.baselineOffset` 📐

---

## إيه هو؟
بيحرك النص **لفوق أو لتحت** من خط الكتابة الأساسي.

---

## الاستخدام:

```swift
Text("Hello")
    .baselineOffset(10)  // لفوق ⬆️
    
Text("Hello")
    .baselineOffset(-10) // لتحت ⬇️
```

---

## توضيح:

```
بدون baselineOffset:
___H_e_l_l_o___  ← خط الكتابة

baselineOffset(10):
   H e l l o
_______________  ← خط الكتابة

baselineOffset(-10):
_______________  ← خط الكتابة
   H e l l o
```

---

## مثال عملي:

```swift
HStack(alignment: .bottom) {
    Text("Hello")
    Text("world")
        .baselineOffset(10) // "world" أعلى من "Hello"
}
```

---

## بيتستخدم إزاي في الحياة؟
| الاستخدام | المثال |
|-----------|---------|
| **Superscript** | X² |
| **Subscript** | H₂O |
| ضبط نصوص جنب بعض | كلمتين بمستويات مختلفة |

---

> ببساطة: **بيرفع أو بينزل النص عن خط الكتابة** 🎯

# `.kerning` 📐

---

## إيه هو?
بيتحكم في **المسافة بين الحروف**.

---

## الاستخدام:

```swift
Text("Hello")
    .kerning(5)   // مسافة أكبر ⬅️➡️

Text("Hello")
    .kerning(-2)  // مسافة أصغر
```

---

## توضيح:

```
بدون kerning:
Hello

kerning(5):
H e l l o

kerning(-2):
Helo
```

---

## مثال عملي:

```swift
VStack {
    Text("Hello")
        .kerning(0)   // عادي
    
    Text("Hello")
        .kerning(5)   // واسع
    
    Text("Hello")
        .kerning(-2)  // ضيق
}
```

---

## الفرق بين kerning و tracking:

| | `.kerning` | `.tracking` |
|--|-----------|------------|
| بيأثر على | المسافة بين كل حرفين | المسافة بعد كل حرف |
| الدقة | أدق | أبسط |

---

# الفرق بين `.kerning` و `.tracking` 🔍

---

## تخيل الجملة دي: `Hello`

---

### `.kerning` 
بيضيف مسافة **بين كل حرفين** بس مش بعد الحرف الأخير

```
H  e  l  l  o|
         ↑
      مفيش مسافة بعد الـ o
```

---

### `.tracking`
بيضيف مسافة **بعد كل حرف** حتى الأخير

```
H  e  l  l  o  |
               ↑
          في مسافة بعد الـ o
```

---

## مثال عملي:

```swift
// kerning
HStack {
    Text("Hello")
        .kerning(10)
    Text("World") // هيلتصق بالـ o
}
// H  e  l  l  oWorld

// tracking
HStack {
    Text("Hello")
        .tracking(10)
    Text("World") // هيبعد عن الـ o
}
// H  e  l  l  o  World
```

---

## ببساطة:

| | `.kerning` | `.tracking` |
|--|-----------|------------|
| المسافة | بين الحروف | بعد كل حرف |
| الحرف الأخير | ❌ مسافة بعده | ✅ مسافة بعده |
| التأثير على الكلمة التالية | ❌ | ✅ |

---

> الفرق بيظهر وضوح لما يكون في **كلمة تانية بعدها** 🎯

> ببساطة: **بيتحكم في المسافات بين الحروف** 🎯

# `.frame` 📐

---

## إيه هو?
بيتحكم في **حجم ومكان** العنصر.

---

## الاستخدام الأساسي:

```swift
Text("Hello")
    .frame(width: 200, height: 50)
```

---

## كل الخيارات:

### 📏 الحجم:

```swift
Text("Hello")
    .frame(width: 200)          // عرض بس
    .frame(height: 50)          // ارتفاع بس
    .frame(width: 200, height: 50) // الاتنين
```

---

### 📐 الحد الأقصى والأدنى:

```swift
Text("Hello")
    .frame(minWidth: 100)    // أقل عرض
    .frame(maxWidth: 300)    // أكبر عرض
    .frame(minHeight: 50)    // أقل ارتفاع
    .frame(maxHeight: 200)   // أكبر ارتفاع
```

---

### 🔲 ملء الشاشة كلها:

```swift
Text("Hello")
    .frame(maxWidth: .infinity)  // عرض كامل
    .frame(maxHeight: .infinity) // ارتفاع كامل

// الاتنين مع بعض
Text("Hello")
    .frame(maxWidth: .infinity, maxHeight: .infinity)
```

---

### 📍 المحاذاة:

```swift
Text("Hello")
    .frame(width: 200, height: 100, alignment: .topLeading)  // فوق يسار
    .frame(width: 200, height: 100, alignment: .center)      // وسط
    .frame(width: 200, height: 100, alignment: .bottomTrailing) // تحت يمين
```

---

## مثال عملي:

```swift
Text("Hello")
    .frame(maxWidth: .infinity)
    .background(.blue)
    .foregroundStyle(.white)
```

النتيجة = نص على خلفية زرقاء بعرض الشاشة كلها

---

## توضيح الـ alignment:

```
topLeading    top    topTrailing
    ┌─────────────────────┐
    │                     │
leading     center    trailing
    │                     │
    └─────────────────────┘
bottomLeading bottom bottomTrailing
```

---

> ببساطة: **بيتحكم في الحجم والمكان والمحاذاة** 🎯

```swift
Text("Hello, World, this is designed for beginners who want to learn SwiftUl, i hope it will be enjoyable for you.")
                .font(.system(size: 16, weight:.bold ,design:.default))
                .foregroundStyle(.blue)
                .frame(width: 200, height: 200, alignment: .center)
                .multilineTextAlignment(.center)
                .minimumScaleFactor(1)
```

# شرح الكود ده 🎯

---

## النص:

```swift
Text("Hello, World, this is designed for beginners...")
```

مجرد نص طويل هيتعرض على الشاشة.

---

## شرح كل Modifier:

### 1️⃣ `.font(.system(size: 16, weight: .bold, design: .default))`

```swift
.font(.system(size: 16, weight: .bold, design: .default))
```

| الجزء | المعنى |
|-------|---------|
| `size: 16` | حجم الخط 16 |
| `weight: .bold` | عريض |
| `design: .default` | الخط الافتراضي |

الـ design عنده خيارات:
- `.default` = خط عادي
- `.rounded` = خط مدور
- `.monospaced` = كل الحروف نفس العرض
- `.serif` = خط كلاسيكي

---

### 2️⃣ `.foregroundStyle(.blue)`

```swift
.foregroundStyle(.blue)
```

لون النص **أزرق**.

---

### 3️⃣ `.frame(width: 200, height: 200, alignment: .center)`

```swift
.frame(width: 200, height: 200, alignment: .center)
```

- العرض = **200**
- الارتفاع = **200**
- المحاذاة = **وسط**

---

### 4️⃣ `.multilineTextAlignment(.center)`

```swift
.multilineTextAlignment(.center)
```

النص الطويل كل أسطره **في الوسط**.

---

### 5️⃣ `.minimumScaleFactor(1)`

```swift
.minimumScaleFactor(1)
```

⚠️ **هنا في مشكلة!**

| القيمة | المعنى |
|--------|---------|
| `1` | مش هيصغر الخط خالص |
| `0.5` | يصغر لحد 50% من الحجم |
| `0.1` | يصغر لحد 10% |

لو النص طويل ومش بيتناسب مع الـ frame:
- `1` = هيتقطع ❌
- `0.5` = هيصغر عشان يتناسب ✅

---

## الحل الصح:

```swift
Text("Hello, World...")
    .font(.system(size: 16, weight: .bold, design: .default))
    .foregroundStyle(.blue)
    .frame(width: 200, height: 200, alignment: .center)
    .multilineTextAlignment(.center)
    .minimumScaleFactor(0.5) // ✅ بدل 1
```

---

> ببساطة: نص أزرق عريض في مربع 200x200 في الوسط 🎯

# التصحيح ✅

بدل "هيتقطع" المصطلح الصح هو:

---

## **Truncated** ✂️

```
Hello, World, this is designed for beg...
```

يعني النص بيتقطع وبيظهر **`...`** في الآخر

---

## وفيه كمان:

| المصطلح | المعنى |
|---------|---------|
| **Truncated** | النص اتقطع وظهر `...` |
| **Clipped** | النص اتقطع من غير `...` |
| **Wrapped** | النص لف لسطر جديد |
| **Scaled** | النص اتصغر عشان يتناسب |

---

> فـ `.minimumScaleFactor(1)` = النص هيكون **Truncated** ❌

# `.minimumScaleFactor` 📐

---

## إيه هو?
بيحدد **أقل حجم** ممكن يصغر له النص عشان يتناسب مع المساحة.

---

## الاستخدام:

```swift
Text("Hello, World!")
    .minimumScaleFactor(0.5)
```

---

## القيم:

| القيمة | المعنى |
|--------|---------|
| `1` | مش هيصغر خالص = **Truncated** |
| `0.5` | يصغر لحد **50%** من الحجم |
| `0.1` | يصغر لحد **10%** من الحجم |

---

## توضيح:

```
font size = 16

minimumScaleFactor(1)
= مش هيصغر
= Hello, World, this is...  ← Truncated

minimumScaleFactor(0.5)
= يصغر لحد 8 (50% من 16)
= Hello, World, this is designed for beginners ✅
```

---

## مثال عملي:

```swift
Text("Hello, World, this is a very long text!")
    .font(.system(size: 16))
    .frame(width: 150)
    .minimumScaleFactor(0.5) // يصغر لحد size 8
```

---

# صح! ✅ شكراً على التصحيح

---

## التوضيح الصح:

`minimumScaleFactor` بيشتغل صح **بدون** `lineLimit(1)`

لأن:

```swift
// لو حطيت lineLimit(1)
Text("Hello, World, this is a very long text!")
    .lineLimit(1)           // سطر واحد بس
    .minimumScaleFactor(0.5) // هيصغر بس لو فضل Truncated ❌
```

```swift
// الصح بدون lineLimit
Text("Hello, World, this is a very long text!")
    .minimumScaleFactor(0.5) // هيصغر ويلف على أسطر ✅
```

---

## ببساطة:
- `lineLimit(1)` = **يجبر النص على سطر واحد** فبيتعمله Truncated
- بدونه = النص **يصغر ويلف** على أسطر كتير ✅

---

> أنا غلطت، شكراً إنك نبّهتني! 🎯