Vytváření transkripce a grafiky 1.12.2025

'a⁡Auw⁡Du biℓLahi mina­ℓšajTaániℓ­radžijm

Nejprve jsem programoval převod z arabského textu pouze pro zpracování transkripce. To trvalo asi dva roky, přičemž po několika letech jsem transkripci rozšiřoval ještě na další znaky, aby byly odlišené třeba i různé hamzy apod. Po pár letech jsem k tomu začal předělávat Koránský text do barevné vektorové grafiky.

Zpočátku jsem několik týdnů až měsíců také dával dohromady barvy, neb se ukázalo, že obarvená latinková písmena vypadají jinak než barevná arabská - a zdaleka ne každá barva co ladila v latince ladila i v arabském písmu. Také se ukázalo, že netučná barevná latinková písmena jsou mnohdy špatně vidět, tudíž všechna barevná latinková jsou nakonec tučně.

Převod do vektorové grafiky si vyžadoval vytvářet i vlastní arabský font. Zpočátku jsem vůbec nevěděl co vytváření vlastního fontu obnáší. Zkoušel jsem obarvovat tehdy mně dostupné fonty, ale narazil jsem na to, že měly všechny křivky natvrdo spojené a nešlo v ligaturách obarvit pouze část značící jedno písmeno, vždy to obarvilo celou ligaturu → šlo např. pouze , avšak já chtěl . Sice by šlo font upravit, ale zdaleka ne všechny co se tvářily že umí arabštinu byly volné, tudíž nemělo cenu snažit se upravovat jakési byrokratické problémové fonty. Žádný font také neměl všechny znaky potřebné pro Korán. Tehdy jsem Koránskou arabštinu vůbec neznal a nevěděl jsem, kolik znaků a vokalizačních znamének vlastně obsahuje; a už vůbec ne kolik ligatur může být v zápise Koránu.

Ligatur je hodně a žádné fonty neobsahovaly všechny, Stejně tak chyběla nějaká vokalizace. Nakonec jsem jako základ natvrdo použil znaky z fontů KFGQPC Uthman Taha Naskh a Zekr Quran, což bylo asi 300 glyfů. Tyto fonty v rámci možností odpovídaly mushafu Tajweed Qur'an With meaning translation in English WITH TRANSLITERATION dle kterého jsem dělal grafiku.

Ale nešlo jen o to rozdělit křivky v ligaturách aby bylo možné barvit jejich jednotlivé části, bylo potřeba i optimalizovat počet bodů (to jsou ta žlutá kolečka na obrázku níže) ze kterých jsou křivky vykreslovány, což ale FontForge oproti InkScape zvládal bravurně, neb zjednodušení křivek nedělal natvrdo po nějaké minimální vzdálenosti, ale nechával všechny inflexní body (body ve kterých na křivce dochází k nějakému zlomu).

Tímto způsobem došlo k redukci velikosti výsledných SVG, neboť je zapisováno mnohem menší množství souřadnic pro křivky. Někde je velikost třeba o 30% menší, někdy ještě o více. Dále jsem pro optimalizaci SVG použil ještě SVGO Gui a SVG Cleaner (v tomto pořadí, ne opačně).

Naučil jsem se jak dělat ligatury a různé substituce ve fontech (něco okoukáno i z fontů Amiri a Scheherazade) a začal dávat dohromady systém, dle kterého by šlo elegantně prodlužovat písmena, neb předloha byla např. , ale z fontů šlo buď neprodlužovat , nebo prodlužovat pomocí vodorovné kašídy , což nevypadalo dobře.

Začal jsem tedy dělat šikmé obloučky a skládat z nich různě široká písmena, přičemž jsem se rozhodl že vytvořím deset rozšířek, ale později se ukázalo, že bude potřeba ještě zužovat, tudíž nějaká písmena mají až 14 šířek. Pro rozšířená písmena bylo potřeba také vytvořit správné navazování a to z levé, pravé i obou stran, neboť již šlo o navazování šikmých oblouků a nikoliv jen vodorovných zakulacení, která jsem srovnal na pravé úhly. Z toho již začalo vznikat mnohem větší množství kombinací. Také bylo potřeba dát dohromady nějaké systematické pojmenovávání pro vznikající varianty, ale tam jsem zvolil nějaké předpony a přípony a nebylo jich ani tolik.

Dále bylo potřeba začít rozdělovat ligatury na více objektů, aby bylo možné barvit jen nějakou část, což znamenalo rozdělit objekty a poskládat je jako části.

Jenže množství kombinací začalo dost narůstat a bylo třeba začít odlišovat co jsou základní znaky a co již nějaké kombinace. Z toho důvodu jsem začal ke glyfům přidávat pomocné grafické symboly (číslice a hvězdičku, čtvereček a šikmou čárku) a všelijak je kombinovat, abych byl každý glyf jasně vizuálně rozlišený a věděl jsem se kterým pracuji.

Začalo totiž ruční korigování poloh znamének a samohlásek, což si vyžadovalo ruční zapisování hodnot posunů do fontu, typu: v kombinaci X1b.init a sadaa3 a n3P.medi a a5 posunout a5 o 250 bodů nahoru. Těchto korekcí je odhadem snad přes 10 tisíc a všechny jsem je musel napsat růčo.

Musel jsem na to vymyslet nějaký systém podtabulek v definicích fontu, neboť těch kombinací začalo být hrozně moc a v jedné tabulce to prostě nešlo. Jenže program občas začal nečekaně házet chyby, neb definice fontů jsou nějakým způsobem velikostně omezené a já to začal přetahovat. Naštěstí při přetažení povolené velikosti nějaké podtabulky šlo alespoň zjistit, která to byla. A ukázalo se, že to lze někdy vyřešit přesunutím definic do jiné podtabulky, někdy sloučením podtabulek, a někdy prohozením jejich pořadí. A prohazování pořadí ve stylu poslat problémovou subtabulku na konec se ukázalo jako nejjednodušší (a po čase ji třeba vrátit na původní místo).

Problém s křivkami tím ovšem nekončil, neb po převodu písmena na křivku bylo potřeba ještě rozdělit tvary křivky, aby bylo možné obarvit právě jen část ligatury, jenže rozdělení způsobilo to, že z křivky oddělilo vniřní části a obarvilo je na černo. Já potřeboval prostě kliknout na křivku a pak na barvu

Jenže po nezbytném rozdělení tvarů jsem dostal samé černé tvary

A napřed bylo potřeba označit ty vnitřní a dát jim nikoliv bílou barvu, ale jejich tvar odečíst od vnější křivky, to aby vnitřní prostor byl průhledný a nevykresloval se bíle na barevném pozadí. Což bylo nejen několik nepříjemných a stereotypních kliknutí navíc, ale mnohé ligatury ty oddělené vnitřní tvary posunovaly hlouběji na pozadí, takže napřed bylo potřeba na pozadí dát hlavní tvar a vnitřní tvary do popředí, neb teprve pak šly označit jeden po druhém vnitřní tvary a teprve poté je bylo možné odečíst od hlavního tvaru.

Nadefinovat které tvary jdou v jakém pořadí od pozadí do popředí je dost pracné a téměř pořád se na to při jakékoliv úpravě křivek musí myslet. Vyklikávání vnitřních tvarů je další ubíjející vojeb. A kdybych na to udělal makro, tak by to znamenalo buď ručně označovat pořád obdélník kolem celého písmene aby zahrnoval všechny vnitřní křivky což je dost nepraktické; nebo zkoušet počítat jestli v místě kde se rozprostírá vybraný hlavní tvar jsou i nějaké podkřivky a ty odečítat, což je nejenže zbytečně výpočetně náročné, ale také by to zahrnovalo prázdné body vzniklé při nuceném odstraňování pomocných grafických symbolů rozlišujících jednotlivé glyfy. Tyto grafické symboly totiž bylo možné ve FontForge odstranit jen ručně z jednotlivých glyfů, což by byl neustálý vojeb i pro jeden glyf, ale množství glyfů začalo narůstat do tisíců.

Nicméně jsem objevil, že lze grafické značky programově alespoň pseudoodstranit z glyfů a to tak, že se jim dá zoomování na 0%, čímž zůstaly jen reference, které se projevovaly jako prázdné obdélníky.

A nerozdělování vnitřních křivek jsem vyřešil jednotahovostí, kdy křivka byla vykreslena nikoliv jako sada vnějších a vnitřních křivek, ale v podstatě jedním tahem s tím, že pak validátor holt řval, že dochází k průnikům tvarů. Vypadá to takto.

Byť ve skutečnosti je to právě jednotahové, akorát body se dotýkají což právě validátor bere jako průniky. Zde jsem pro ukázku nechal mezeru aby byla vidět právě jednotahovost.

Tohle všechno bylo setsakra myšování (furt samé označování něčeho a klikání). Ještě že mi Aláh dopřál sehnat si kvalitní gemblerskou krysu, neb z těch standartních malých myší by mi snad odešlo zápěstí či předloktí.

Tímto jsem tedy dosáhl toho, že jde jedním kliknutím vybrat potřebnou část křivky a druhým ji obarvit, žádné další klikání ani spouštění maker. A ve výsledných SVG nejsou ani prázdné obdélníky pozůstalé po zmenšení pomocných grafický symbolů na 0%, ani průniky křivek při jednotahovosti, neb obé odstraní použité optimalizátory SVG.

Později jsem také vytvořil makro které odstraní reference na pomocné grafické symboly přímo z SFD souboru, byť napřed s několika kroky ručně. Ale pro nasazení při vytváření fontů to není použitelné, ty ruční operace přeci jen nejsou tak jednoduché a dělat to třeba padesátkrát za den není pro psychickou pohodu reálné.

Výchozí arabský text vypadal takto, žádné ligatury, žádná prodlužování písmen ani znamének, žádné spojování slovDoDlouhých:

Po přefontování je to již jinak:

A bez pomocných grafických značek:

Vůbec jsem nevěděl které znaky Korán obsahuje a tak mi do fontu přibývaly znaky dost neuspořádaně. FontForge však bohužel neumožňuje seřadit NonUnicode znaky, tudíž jsem si vytvořil makro v Calcu, která načte zdrojový SFD soubor a umístí definice každého glyfu na jeden řádek, kde jsem poté využitím CtrlXV prohazoval jednotlivé řádky abych to měl setříděné a vyznal se v tom. Druhé makro to poté zpátky ukládá do SFD souboru.

Další fuškou byly názvy súr. Nejprve jsem zkoušel stáhnout nějaká hotová SVG s názvy súr, neb v mushafu byly ty názvy jiným fontem. Sice jsem našel potřebná SVG, ale nelíbily se mi v nich různé ozdobné serepetičky, které jsem začal mazat, což vypadalo že bude na dlouho než to vše promažu, neboť některé byly spojené s písmeny a znamenalo to pak ručně pospojovávat a korigovat tvary křivek. Narazil jsem však na to, že některé súry mají vícero názvů, neboť ty názvy súr jsou tradice od lidí a vícero dalších názvů nebylo v oněch SVG.

Byl jsem před dilematem jestli tedy oželet některé jiné názvy, nebo názvy súr nedávat vůbec, nebo udělat vlastní. Ono je docela praktické mít i ty názvy a nikoliv jen čísla, ale dělat vlastní se mi nechtělo, neb by to bylo jedním fontem a připadalo mi, že by to teoreticky mohlo někdy svádět k tomu, že by ty názvy byly jakoby součástí Koránu. Jenže vytvořit ty chybějící názvy z těch SVG by pro mě bylo v podstatě nereálné. Takže nakonec jsem se rozhodl, že udělám ty vlastní z vytvářeného fontu a bude to prostě všechno v jednom stylu.

Ale ještě se ukázalo, že v dialogovém okně v LibreOffice vytvořené názvy nebyly moc dobře vidět a tak jsem dodělal ještě ztučnéné názvy.

Poslední problém byl se zaokrouhlování hodnot v Drawu, kdy při převodu písma aKoran o velikosti 20pt na grafické objekty docházelo občas díky zaokrouhlování k posunu jednotlivých částí křivek o bod, což se projevilo nechtěnou drobnou mezerou. Výsledná SVG jsou tedy získána z velikosti písma 100pt, přičemž zde mají zmenšenou velikost která odpovídala výšce 4rem což si prohlížeč přepočítal na 64px. Vkládání SVG přes tag <img> jsem tedy opět řešil makrem, kdy v LibreOffice mi to vygenerovalo HTML tagy pro vkládané obrázky <img src="…" width="" height="64"> a následný JavaScript vygeneroval kompletní zápis tagu z již prohlížečem vykreslených obrázků <img loading="lazy" src="…" width="…" height="…" alt="SVG">. Čili dvojí CtrlCV do HTML zdrojáku → poprvé jen s výškami height="64" a podruhé již s komplet rozměry. Ale po nějaké době se ukázalo, že bude lepší SVG vkládat jako tagy <svg> přímo do HTML, aby zbytečně nedocházelo k posílání požadavků na server když jde třeba o desítky či stovky SVG na stránce a nikde jinde na webu již tyto nejsou, což jsem vyřešil přes CSS definici svg {height:4rem; width:auto;} která nastavuje požadovanou výšku SVG a jejich automatickou šířku dle nastavené výšky, čímž se zmenší tak jak jsem chtěl; a samotné vygenerovnání potřebného HTML kódu opět makrem v LibreOffice.

Celou práci jsem dělal v editoru VSCodium s rozšířeními: FiveServer – aktualizace prohlížeče hned při uložení souboru v editoru, Beautify – zpřehlednění kódu, DartJS Sass Compiler – automatické vytváření minifikovaných CSS souborů z SCSS při uložení, HTML-validate – offline interaktivní validace HTML, Material Icon Theme – praktické ikony pro editor, Minify – automatická minifikace HTML, CSS a JS souborů při uložení, Snippets Viewer – snadné vkládání Snippetů; a něco i Notepad++. Nebýt toho editoru a rozšíření, asi bych se na to vykašlal, neb by to bylo enormně úmorné.

Tvorba transkripce

Transkripci jsem začal vytvářet vůbec jako první, aniž bych počítal s tím, že vytvořím i arabský font a k tomu barevná SVG. Po asi půl roce kdy jsem byl muslimem jsem stále nedokázal přečíst téměř ani jedno arabské slovo a že si vytvořím vlastní transkripci abych to měl ve vlastní latince, neb jsem si nemohl zapamatovat ani různé již vytvořené transkripce a pořád se mi pletly různě podtečkované a nadtečkované znaky – a kolikrát mě ty nečeské znaky fakt teda hodně vytáčely :-). Tehdy jsem se rozhodoval, v jakém programu bych to vytvářel, jestli obnovit a rozšířit nějaké školní znalosti programování v Pascalu či C/C++ (s tím že do Céčka se mi nechtělo, neb když jsem v něm jeden čas dělal, tak mě z něj fakt hodně bolela hlava), nebo to začít dělat v LibreOffice ve kterém jsem sice makra moc předtím nedělal, ale jinak bych pro něj nepotřeboval žádné dodatečné grafické prostředí, neb vše již má. Několik týdnů jsem zkoumal možnosti které umí s makry, neboť jsem si říkal, že bych udělal i HTML výstup do Zekru. A objevil jsem, že to je v podstatě komplet vývojové prostředí, tudíž jsem se rozhodl pro LibreOffice, což se později ukázalo jako to nejlepší rozhodnutí.

Začalo tedy asi dvouleté období kdy jsem si naprogramoval převodní tabulku s arabskými vzory a po puštění to ar text podle těch vzorů převedlo na obarvenou latinku a speciální písmenočíselný kód. Obarvená latinka se pak projížděla a generovalo se i HTML pro Zekr, což jsem však později odstranil, neb ten již není vyvíjen a má staré vykreslovací jádro pročež nezvládá některé formátování. Mám dojem, že vzorů v převodní tabulce bylo asi 1200 (ručně zadáváno) a asi 400 variant jsem naklikával ručně přímo v arabském textu → to byly případy které měly třeba jen jeden až pár desítek výskytů a nevyplatilo se je zahrnovat do kombinací v tabulce, neboť by pak dramaticky narůstal počet variant snad až někam ke třiceti tisícům, což by bylo nepřekontrolovatelné.

Ukázal se však problém s pauzami, neboť jsem nedokázal určit, která varianta při volitelných pauzách by byla lepší. Ale padlo rozhodnutí prostě do kódu dát obě možnosti a pak z toho do dokumentu přegenerovat jen jednu. Obě možnosti jsem však neudělal pro konce numerizací, tam je natvrdo jen tvar dělané pauzy.

Po několika letech však přišel nápad tu transkripci rozšiřovat o další varianty. Pro to jsem vytvořil další makra kde jsem klikal do arabského textu a ve výsledném kódu se mi na daných pozicích automaticky předělávaly kódy pro změny, což při barevném odlišení bylo celkem i dobře kontrolovatelné. Ale zabralo to několik měsíců, neb nějakých změn bylo pár desítek či stovek, ale zrovna s různými hamzami to bylo myslím asi 5 tisíc změn.

Zpočátku jsem myslel že udělám jen vlastní verzi transkripce s jednou sadou písmen co by mi vyhovovala, ale po několika týdnech či měsících jsem si uvědomil, že někomu (např. cizincům co neznají češtinu) nebude vyhovovat česká latinka, tudíž že to udělám celé nastavitelné. Takže ve zdrojáku je písmenoČíselný kód a dle toho jak se vyplní trankripční tabulka, tak se pak onen kód převádí na transkripci. Je to vždy kombinace písmenoČíslo, vypadá to v podstatě takto:

Když jsem tedy měl transkripci hotovou a snad dvakrát překontrolovanou, padlo rozhodnutí, že by to chtělo právě i barevný arabský zápis a začal jsem vytvářet speciání arabský font, ze kterého šlo dostat grafické křivky v LibreOffice, naklikat je do barev a ukládat jako SVG.

Vzpomínám si i na to, že po několika letech jsem si říkal, že kdybych hned na začátku věděl jak to bude náročné a kolik toho všeho budu muset dělat, tak bych do toho nikdy nešel. Aláh mi to však dávkoval postupně, takže mně to vlastně nikdy nepřestalo bavit, byť někdy to fakt byly náročné šichty, nicméně stále to nějak odsýpalo :-).

Metrika SVG

Ta je vcelku jednoduchá, ale nevyplatí se eSVéGéčkům ručně měnit velikost, neboť se snadno stane, že to právě metriku rozhodí. Makro převede zvolený text na křivky do Drawu, přičemž ke každému slovu přidá obarvené svislítko.

Po vyklikání barev další makro uloží vybrané slovo jako SVG a tomu překoriguje rozměry přes InkScape – což sice poněkud zdržuje, ale v LibreOffice (25.2) je bohužel chyba při exportu křivek.

Následuje přetažení souborů do optimalizátorů SVG a nakonec skript který odstraní vložená svislítka. Ar písmena v SVG tedy mají polohu jako kdyby byla na řádku a nejsou nikde v nežádoucí poloze v řádku.

'alkita⁡áb příklad nežádoucího posunu při ořezu SVG

Font pro transkripci

Zpočátku jsem také hledal který font zvolit jako výchozí pro transkripci v LibreOffice, ale až později mě překvapilo, že to bylo vlastně hrozně snadné, neb mi Aláh asi dopřál štěstí a font Merriweather byl mezi prvními který jsem zkoušel a u kterého už jsem zůstal.

Šlo o to aby font zahrnoval nejen českou latinku, ale pokud možno celou latinku; a nejlépe i další používané západní abecedy, což snad má (pro složitější písma jako znaková to nechávám třeba na později a třeba spolupráci s někým, kdo ono písmo dobře zná, Aláh ví). Nicméně byly ještě silnější důvody – font nemá tak velké rozdíly mezi normálním a tučným písmem tudíž barevná písmena jsou již dobře vidět, ale neruší přitom větší šířkou ve slově; a v podstatě v pohodě v něm jdou kombinovat normální a kurzívní znaky, což u mnoha jiných fontů není a kurzívy přesahovaly do normálních. Viditelnost byla uvažovaná i pro tisk a čtení z papíru třeba i při lampičce či v přítmí. A font samotný má i příznivou velikost ve formátu WOFF2 a šel upravovat i generovat ve FontForge.

Také mi začalo vyhovovat, když jsem i do latinky mohl vepsat něco na způsob slyšitelnosti, např. pro znaky ⁡H nebo ⁡T, které jsou přidané do fontu jako ligatury tvořené znakem U+2061 a souhláskou. Znak U+2061 se ve fontech téměř nepoužívá, ale editory bývá brán jako písmeno na kterém nenastává zalomení či rozdělení slova, z toho důvodu je použit jako kombinace do ligatur pro vícero přidaných znaků.

Pojmenování fontů

Bylo mi jasné, že v LibreOffice budu při práci každou chvíli klikat na název vytvářených fontů, tudíž začínají písmenem a, abych pořád nemusel v seznamu písem rolovat, proto aKoranLatin či aKoran.

Zahrnutí transkripce do webu

Nejdřív jsem měl jednoduchý skript který ty písmenočíselné kódy transkripce převáděl do HTML tagů a ty jsem potom ručně kopíroval do HTML zdrojáku. Jenže po nějaké době jsem něco v transkripci dost změnil a potřeboval jsem to změnit i na webovkách. Takže následoval asi týden předělávání webovek do podoby, kdy veškerá transkipce je obalená komentáři s jedinečnými identifikátory a v jednom dokumentu mám tabulku s těmi identifikátory a písmenočíselnými kódy, podle níž se to poté nahradí ve všech potřebných HTML souborech.

Vypadá to v podstatě takto:

<var><!--@k5-3a-->×<!--@--> <span class="bgsvg2"><!--@k5-3b-->×<!--@--></span>&MediumSpace;<!--@k5-3c-->×<!--@--></var>

Vše mezi danými komentáři <!--@identifikátor-->všeMezi<!--@--> pak makro nahradí za aktuálně vygenerovanou transkripci. Ale v rámci rychlosti jsou HTML soubory minifikované, takže u uživatele by se změna transkripce musela editovat ručně.

Nicméně po čase se ukázalo že ani tento systém nebyl pro vyhnutí se ruční editaci samospásný, neb jsem stejně transkripci několikrát ještě doplňoval a texty měnil, takže nakonec jsem stejně nějaké změny tak jako tak musel dělat ručně a posléze to překontrolovávat.