Troika: Dukungan tata letak teks kanan-ke-kiri

Dibuat pada 5 Apr 2021  ·  11Komentar  ·  Sumber: protectwise/troika

Sebagai pengganti dari solusi pembentukan teks tingkat lanjut (misalnya harfbuzz.wasm) saya ingin beberapa dukungan out-of-the-box dasar untuk tata letak RTL. Typr sudah menyertakan beberapa tingkat dukungan untuk penggantian mesin terbang Arab, meskipun saya tidak tahu seberapa lengkap itu.

Saya telah menambahkan beberapa logika tata letak/pembungkusan RTL yang sangat mendasar. Mari gunakan masalah ini untuk melacak bug dengan itu dan celah lain yang mendukung.

Halaman pengujian sementara: https://troika-examples.netlify.app/#text -rtl

Komentar yang paling membantu

Saya telah mendorong implementasi deteksi tipe gabungan yang lebih lengkap; logika yang saya adaptasi dari Opentype.js terbukti tidak lengkap. Implementasi baru sebenarnya menyematkan versi definisi tipe gabungan unicode yang sangat terkompresi sehingga sekarang harus menangani semua karakter yang dapat digabungkan dalam bahasa Arab dan lainnya. Ini juga memberikan peningkatan kecepatan yang layak atas kode Typr.

@MichaelHazani sejak Anda mengajukan diri untuk menguji bahasa Ibrani, saya pikir ini sudah siap untuk Anda sekarang. Anda dapat menggunakan halaman pengujian ini di mana saya telah menambahkan beberapa font Ibrani ke dropdown "font", dan Anda dapat mengetikkan teks Anda sendiri. Terima kasih!

Semua 11 komentar

Pertama saya ingin mengucapkan terima kasih banyak untuk bekerja pada ini. Mendukung tata letak bahasa Arab dan RTL akan berguna bagi banyak orang.
Saya telah melakukan beberapa tes pertama, teks Arab standar sebagian besar didukung dengan baik dalam font cairo, Lemonada, Scheherazade (tanpa Tachkil).

Saya sedang menguji 2 aturan ini untuk bahasa Arab:

  1. Apakah 3 bentuk karakter tulisan baik-baik saja (satu di awal, di tengah, di akhir) dan koneksi (ligatur).
  2. Tachkil yang merupakan kumpulan indikasi untuk pengucapan (tidak digunakan di sebagian besar teks yang Anda temukan di internet kecuali dalam kasus yang jarang terjadi)

Di mirza, beberapa huruf internal tidak terhubung (bentuk akhir huruf diletakkan bukan yang internal atau sebaliknya)
arabicTachkil

Dengan tachkil, beberapa font berfungsi dengan baik sementara yang lain mengubah bentuk karakter di sebelahnya. Beberapa bekerja dengan teks yang saya tulis di dalam kotak sementara tidak dengan teks yang disalin.

Jika saya menggunakan huruf non-Arab seperti tanda kurung "(", ")" mereka dialihkan (perlu dibalik.).

Ini adalah tes cepat yang saya buat, saya perlu memeriksa lebih banyak dan memberi Anda lebih banyak detail di mana hal-hal menjadi aneh. (Saya juga perlu memeriksa font, beberapa font tidak menyediakan karakter yang dibutuhkan)

Terima kasih banyak! Saya senang mendengar bahwa ini adalah awal yang baik.

Sangat menarik bahwa hasil untuk substitusi posisi kata bervariasi menurut font. Logika pendeteksian posisi kata di Typr selalu sama, jadi pasti ada sesuatu yang berbeda dalam cara font-font tersebut mengkodekan substitusinya yang tidak ditangani oleh Typr. Saya akan memeriksa Mirza secara khusus untuk melihat apakah saya dapat menentukan perbedaannya.

Karena saya tidak tahu karakter ini, dan dengan demikian tidak dapat menentukan sendiri yang benar vs. yang salah, akan sangat membantu jika Anda dapat memberi saya beberapa kasus uji yang ditargetkan dengan hasil yang diharapkan, mungkin hanya satu kata, seperti:

Teks masukan: xxx
Seharusnya terlihat seperti: [gambar]
Terlihat benar dalam font A: [image]
Terlihat salah dalam font B: [gambar]

Adapun tanda kurung, saya pikir itu adalah bagian dari Paired Brackets dari algoritma Bidi. Saya belum yakin apakah itu sesuatu yang akan saya atasi sendiri, tetapi saya pasti akan memeriksanya.

Saya telah mendorong kode dengan beberapa dukungan tata letak dua arah yang kasar. Saat ini murni manual menggunakan karakter kontrol LRO/RLO/PDF untuk menentukan rentang arah. Bidi otomatis penuh jauh lebih rumit dan saya masih bingung dengan cakupannya, tetapi kemampuan untuk menyusun rentang (dengan pembungkusan garis dan pemilihan!) adalah awal yang penting.

image

Saya benar-benar minta maaf saya belum memposting umpan balik kemarin. Saya berpikir untuk melakukan tes penuh pada akhir pekan, tetapi saya pikir lebih baik melakukan hal-hal secara bertahap.
Mari kita mulai dari font yang bekerja dengan sangat baik (mungkin ada beberapa masalah di beberapa font) Saya telah menggunakan font Scheherazade, tetapi Cairo dan Lemonada memberikan hasil yang sama.
Font Mirza dan Amiri selalu menampilkan huruf yang terputus.
Font Noto Sans, Roboto tidak berfungsi sama sekali.

Pada gambar di bawah, saya menggunakan warna merah untuk mengartikan bentuk huruf yang salah, dan hijau adalah bentuk yang benar.
Masalah muncul hanya ketika kita memiliki Tachkil (vocal note) atau karakter latin atau angka.

  1. Alih-alih bentuk akhir, kami memiliki bentuk internal.
  2. Di dalam kata, alih-alih bentuk awal, kita memiliki bentuk internal. (di dalam kata beberapa huruf tidak memiliki pengikat)
  3. Ketika kita memiliki angka tepat setelah kata, (كم2), kita mempertahankan bentuk akhirnya.
  4. angka dibalik.

arabThree

Teks yang saya gunakan:
2.
2
اللَّه الرحمن الرحيم
اللَّهِ الرَّحمٰنِ الرَّحيمِ

Jawaban ini berisi gambar tentang bagaimana huruf digambar
https://www.quora.com/How-can-anyone-read-Arabic-as-the-letters-are-all-connected-to-each-other/answer/Hashem-Mohamed-4

Terima kasih banyak untuk testcase yang ditandai ini, itu sangat membantu!!! Ini sangat membantu saya memahami banyak hal.

Logika Typr untuk mendeteksi posisi kata pasti salah; Saya telah menggantinya dengan logika yang diadaptasi dari opentype.js dan hasilnya sekarang tampak jauh lebih baik:

image

Saya akan berkontribusi memperbaiki Typr kembali ke hulu setelah pengujian lebih lanjut.

Masalah "angka dibalik" akan ditangani dengan pekerjaan BiDi yang saya mulai. Untuk saat ini, itu dapat diselesaikan dengan karakter LRO/PDF eksplisit.

Biarkan testcase semacam ini terus datang! 🤩.

Itu cepat.
Yah, saya belum menemukan sesuatu yang perlu diperbaiki kecuali apa yang dapat dilakukan menggunakan pekerjaan BiDi yang Anda sebutkan (angka dan tanda kurung dapat digunakan secara luas dengan teks Arab).
Bisakah Anda menunjukkan contoh tentang cara menggunakan karakter LRO/PDF? Saya sendiri tidak dapat mereproduksi contoh teks campuran.

Hal terakhir yang tidak terkait dengan teks Arab tetapi mungkin terkait dengan rendering SDF, beberapa karakter memiliki warna hitam di dalamnya ketika 2 karakter dihubungkan bersama seperti di sini
image
image
dan terkadang dalam karakter yang sama
image
Ini hanya terlihat dengan font Lemonda. Scheherazade, Kairo berfungsi dengan baik (mungkin karena karakter terhubung di tempat yang tepat).
(Sepertinya operasi boolean di alat rendering vektor.)

Dan sekali lagi terima kasih atas pekerjaan Anda.

Terima kasih! Saat ini saya sedang berupaya menambahkan implementasi algoritme bidi penuh yang menurut saya akan menyelesaikan semua masalah lain yang Anda jelaskan sejauh ini.

Teks "BiDi 1" di dropdown contoh memiliki contoh LRO/PDF, tetapi jangan khawatir tentang itu untuk saat ini, itu hanya pengganti sementara dan toh tidak sepenuhnya benar. Bidi sejati akan lebih baik.

Masalah pengisian boolean dengan font itu menurut saya sama seperti yang dibahas di # 57.

Kami sekarang memiliki dukungan bidi penuh!

image

Ada beberapa cuplikan bidi di halaman contoh, tetapi berikan beberapa pengujian dengan teks rtl+ltr campuran Anda sendiri.

Ini berubah menjadi contoh klasik saya turun ke lubang kelinci; Saya tidak menemukan implementasi JS bidi yang cocok dan tidak ingin memasukkan fribidi.wasm, jadi saya memutuskan untuk mengambil implementasi JS baru sebagai proyek malam dan akhir pekan. Lihatlah https://github.com/lojjic/bidi-js! Saya perlu menambahkan beberapa dokumen di sana tetapi sepenuhnya sesuai dengan tes bidi resmi, cukup kecil (~ 10kb) dan cukup cepat meskipun mungkin bisa lebih dioptimalkan.

Saya merasa sangat senang dengan solusi ini dan betapa sedikit itu menambah ukuran bundel. Saya pikir kami sangat dekat dengan dukungan penuh RTL sekarang. Saya perlu meninjau kembali logika formulir bergabung, saya menyadari bahwa logika yang saya adaptasi dari opentype.js hanya menangani skrip Arab tetapi tidak yang lain yang juga bergabung.

Saya telah mendorong implementasi deteksi tipe gabungan yang lebih lengkap; logika yang saya adaptasi dari Opentype.js terbukti tidak lengkap. Implementasi baru sebenarnya menyematkan versi definisi tipe gabungan unicode yang sangat terkompresi sehingga sekarang harus menangani semua karakter yang dapat digabungkan dalam bahasa Arab dan lainnya. Ini juga memberikan peningkatan kecepatan yang layak atas kode Typr.

@MichaelHazani sejak Anda mengajukan diri untuk menguji bahasa Ibrani, saya pikir ini sudah siap untuk Anda sekarang. Anda dapat menggunakan halaman pengujian ini di mana saya telah menambahkan beberapa font Ibrani ke dropdown "font", dan Anda dapat mengetikkan teks Anda sendiri. Terima kasih!

Tampak hebat!
("well, tampaknya tesnya berhasil. Tanda baca adalah di mana seharusnya; perataan kanan terlihat bagus. Kedua font menampilkan bahasa Ibrani seperti yang seharusnya ditampilkan. Beralih ke bahasa Inggris, yaitu kata ini, tidak merusak keselarasan. Sudah selesai dilakukan dengan baik!")
image

Saya telah merilis v0.41.0 dengan pekerjaan yang dilakukan di sini sejauh ini. Tidak diragukan lagi ada skrip RTL lain yang memerlukan penanganan khusus tambahan, tetapi ini memberikan dasar yang cukup kuat sehingga saya pikir kami dapat menanganinya berdasarkan kasus per kasus. Dan selalu ada kemungkinan untuk mengizinkan plugin Harfbuzz opsional (#91) untuk beberapa kasus yang lebih canggih/tidak jelas.

Sekali lagi terima kasih @boulabiar dan @MichaelHazani atas bantuan Anda yang tak ternilai di sini!!! 🎉.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat