Technical guide
Arabic letters change form based on context. Harakat attach to base glyphs, mixed text follows the Unicode Bidirectional Algorithm, and each font has its own outlines. A text shaper resolves those relationships before anything is drawn.
The Studio keeps the Unicode source string intact. It never reverses Arabic text to fake RTL.
bidi-js separates Arabic, Latin, numbers, punctuation, and URLs into the correct visual runs.
HarfBuzz applies script, direction, language, ligatures, joining forms, marks, and positioning.
opentype.js reads each shaped glyph ID from the selected TTF and produces an explicit path.
The scene applies alignment, position, scale, rotation, fill, stroke, shadow, and canvas settings.
The preview, PNG, SVG, and PDF all consume those same scene paths.
A browser text node, a canvas fillText call, and a PDF text layer can choose different shaping engines or font fallbacks. The Studio instead shapes once and passes explicit glyph paths to every output. That makes visual differences testable and keeps SVG independent from installed fonts.
Unicode stores the characters you typed; it does not require you to replace every Arabic letter with a visual presentation-form character. The shaping engine reads the text, direction, font tables and nearby characters, then selects and positions the correct glyphs. Keeping the source text intact preserves copying and editing.
A browser can shape live text for the screen, but an SVG or PDF made from outlines needs exact glyph IDs, positions and advances. HarfBuzz supplies that layout data before the exporter converts each glyph to a path. This keeps joins, ligatures and Harakat consistent in a file that no longer depends on installed fonts.
Enter Arabic with diacritics, numbers or a Latin word in the editor, compare the preview, then export SVG to inspect the final paths. You can also compare all 12 included typefaces before choosing one.
Open your text in the full path-based editor.
Open Studio