Title: JustyKhatt: A Script-Agnostic DOM-Level Line Justification Engine

Azizmohseny
Azizmohseny Posts: 24
in Type Design Software

Hello everyone,

I have developed a JavaScript library called JustyKhatt, which performs line justification at the DOM layer (in the browser) by leveraging OpenType and Variable Font capabilities.

While my initial focus has been on the Arabic script, the architecture is intentionally script-agnostic. The codebase separates the generic processing Core from independent Rule Packs. The Core handles measurement, tagging, and rendering, while Rule Packs (e.g., Naskh, Nastaliq) contain the specific calligraphic logic and decision-making for each script.

The architecture documentation (ARCHITECTURE.md) and the full source code are available here:
https://github.com/AzizMohseny/FFB/tree/main/justykhatt

You can test the behavior of the engine with your own text in the live sandbox here:
[لینک ورسل خود را اینجا بگذارید، مثلاً https://justykhatt.vercel.app]

I would be very grateful if fellow type designers and engineers could test this tool and share their technical feedback. I do not have the financial means to compensate you for your valuable time, but I am more than willing to reciprocate by offering my time, advice, or expertise on your own projects whenever you might need it.

Thank you,

Disclaimer: AI tools were used to assist with the translation and editing of this post.


Tagged:

Comments

  • Simon Cozens
    Simon Cozens Posts: 906
    Safari 26:


  • John Hudson
    John Hudson Posts: 3,913
    I tried this in the Chrome and Zen (FireFox fork) browsers, and it didn’t work in either of them.
  • Azizmohseny
    Azizmohseny Posts: 24
    edited October 24

    Thank you for the screenshots and for testing it. I really appreciate your help.

    I noticed something in the console: the browser is showing a warning about "Slow network is detected" and it's trying to load the font FFB_Master-VF.ttf from Vercel. It seems the fallback font is being used before the variable font fully loads, which is why the justification doesn't appear.

    This might be a CDN loading issue. To fix this for testing, I could perhaps host the font file differently or ensure it's preloaded. I will look into this and update the demo. Thank you again for pointing this out—it's a valuable technical clue!

  • Azizmohseny
    Azizmohseny Posts: 24
    edited October 25

    Simon Cozens said:
    Safari 26:
    John Hudson said:

    Thank you so much, Simon and John, for your patience and for testing it again.

    I found the root cause of the issue: it was a font-loading timing issue on the CDN. On faster connections, the scripts ran before the variable font was fully loaded, which prevented the justification from rendering correctly. I have fixed this by preloading the font and waiting for document.fonts.ready before executing the justification logic.

    I also noticed a separate issue during my tests: when the line breaks (e.g., at narrower widths), the justification logic doesn't seem to handle the last line correctly, and words might move to the next line unexpectedly. I am currently investigating this behavior in my lineAnalyzer.js module.

    I have updated the live demo. Could you please try it again and let me know if it works for you now? Any feedback on the line-breaking behavior would also be greatly appreciated as I continue to refine the engine.

    Thank you again for your time and valuable help!

Categories