Memanfaatkan HTML di PyQt5: Membuat Teks Formatting Dinamis untuk Aplikasi Desktop

 

**Pendahuluan**  

Salah satu fitur menarik PyQt5 adalah kemampuan menampilkan teks dengan formatting HTML dalam komponen GUI. Artikel ini akan menunjukkan cara membuat aplikasi desktop sederhana yang memanfaatkan tag HTML di dalam QLabel untuk membuat teks dinamis dengan variasi warna, gaya, dan struktur. Cocok untuk pemula yang ingin memperkaya tampilan GUI tanpa library tambahan!

---

### **Struktur Proyek**  

Proyek terdiri dari 2 file:  

1. **`main.py`** - File utama untuk menjalankan aplikasi  

2. **`TextForm.py`** - Implementasi GUI dengan HTML formatting  

---

### **File main.py**  

```python

#!/usr/bin/python3

import sys

from PyQt5.QtWidgets import QApplication

from TextForm import TextForm

if __name__ == '__main__':

    app = QApplication(sys.argv)  # Inisialisasi aplikasi Qt

    window = TextForm()           # Membuat objek form teks

    window.show()                 # Render GUI

    app.exec_()                   # Memulai event loop

```

**Penjelasan Kode:**  

- **`QApplication`**: Inti sistem event handling PyQt5  

- **`TextForm`**: Kelas kustom yang berisi implementasi GUI  

- **`app.exec_()`**: Menjaga aplikasi aktif sampai window ditutup  

---

### **File TextForm.py**  

```python

from PyQt5.QtWidgets import QWidget, QLabel

class TextForm(QWidget):

    def __init__(self):

        super().__init__()        # Inisialisasi parent class

        self.setupUI()            # Memanggil metode setup

        

    def setupUI(self):

        # Konfigurasi window

        self.setGeometry(300, 300, 300, 200)  # x, y, width, height

        self.setWindowTitle('Text Formatting Demo')

        

        # Label 1 dengan HTML styling

        self.label1 = QLabel('''

            <h1 style="text-align:center">

                Hello <font color="red">PyQt5</font>

            </h1>

        ''', parent=self)

        self.label1.move(10, 10)  # Posisi absolut

        

        # Label 2 dengan formatting kompleks

        self.label2 = QLabel('''

            <div style="margin: 10px">

                <p>Teks ini menggunakan berbagai tag HTML:</p>

                <ul>

                    <li><b>Teks tebal</b></li>

                    <li><i>Teks miring</i></li>

                    <li><u>Teks garis bawah</u></li>

                    <li><span style="color:blue">Warna custom</span></li>

                </ul>

            </div>

        ''', parent=self)

        self.label2.setWordWrap(True)  # Enable text wrapping

        self.label2.move(10, 50)

```

**Breakdown Kode:**  

1. **HTML dalam QLabel**  

   ```python

   QLabel('<h1>...</h1>', parent=self)

   ```

   - Mendukung subset tag HTML:  

     - Heading (`<h1>`-`<h6>`)  

     - Font styling (`<b>`, `<i>`, `<u>`)  

     - Warna (`<font color="">` atau CSS inline)  

     - List (`<ul>`, `<ol>`, `<li>`)  

     - Div/span dengan styling CSS dasar  

2. **Absolute Positioning**  

   - `move(x, y)` menentukan posisi widget secara manual  

   - **Catatan:** Untuk aplikasi kompleks, disarankan menggunakan layout manager

3. **Text Wrapping**  

   ```python

   setWordWrap(True)  # Otomatis wrap teks ke baris baru

   ```

**Hasil Tampilan:**  

```

[          Hello PyQt5          ]  <!-- Heading merah -->

• Teks tebal

• Teks miring

• Teks garis bawah

• Warna custom

```

---

### **Daftar Tag HTML yang Didukung**  

| Tag         | Contoh                  | Output              |

|-------------|-------------------------|---------------------|

| `<b>`       | `<b>Tebal</b>`          | **Tebal**           |

| `<i>`       | `<i>Miring</i>`        | *Miring*            |

| `<u>`       | `<u>Garis Bawah</u>`   | <u>Garis Bawah</u> |

| `<font>`    | `<font color="green">` | Warna hijau         |

| `<h1>-<h6>` | `<h2>Subjudul</h2>`    | ## Subjudul         |

| `<br>`      | Line break              | Pindah baris        |

---

### **Best Practice**  

1. **Gunakan CSS Inline** untuk styling yang lebih konsisten:  

   ```python

   QLabel('<p style="color: #ff5733; font-family: Arial">...</p>')

   ```

2. **Hindari Absolute Positioning** untuk aplikasi responsif:  

   ```python

   # Daripada move(), gunakan:

   layout = QVBoxLayout()

   layout.addWidget(label1)

   layout.addWidget(label2)

   ```

3. **Escape Karakter Khusus** jika diperlukan:  

   ```python

   QLabel("& menjadi &amp;")

   ```

---

### **Troubleshooting Umum**  

1. **Tag Tidak Berfungsi**:  

   - Pastikan menggunakan tag yang didukung Qt  

   - Cek penutup tag yang sesuai  

2. **Text Overflow**:  

   - Aktifkan word wrapping  

   - Atur ukuran window dengan `self.setMinimumSize()`  

3. **Performance Issue**:  

   - Hindari HTML kompleks untuk teks dinamis  

   - Gunakan QTextDocument untuk konten kaya teks berat  

---

### **Kesimpulan**  

Dengan memanfaatkan HTML dalam QLabel, Anda bisa:  

✅ Membuat antarmuka lebih menarik  

✅ Menampilkan konten dinamis dari database  

✅ Memformat teks kompleks tanpa widget tambahan  

**Contoh Advanced:** Coba integrasikan dengan QTimer untuk membuat teks beranimasi!  

---  

**Referensi:**  

- [Dokumentasi Qt HTML Subset](https://doc.qt.io/qt-5/richtext-html-subset.html)  

- [Contoh CSS yang Didukung](https://doc.qt.io/qt-5/stylesheet-reference.html)