Sales Invoice print format In billingual ( arabic and english ) using Print Designer

Print Designer
, , , ,
1

Hey Everyone ,

I need to create a sales invoice print format in both languages ( Arabic & English ) ,
but while using print designer when i am writing arabic text it is getting misaligned while printing , and i am using default fonts , and i also need to install arabic fonts so how can i do it , and by using arabic font will my issue will be resolve?

Regards,

2

From ChatGPT: -

In ERPNext this is a common issue: Arabic (and other RTL languages) don’t render well in print formats when using the default fonts, because:

  1. Default fonts (like Helvetica, Times, etc.) don’t support Arabic shaping properly.

    • Arabic letters need contextual shaping (different glyphs for start, middle, end).
    • If the font doesn’t support this, the letters appear disconnected or misaligned.

  2. Print Designer uses Frappe’s PDF engine (wkhtmltopdf with Jinja + HTML/CSS).

    • By default, only limited fonts are embedded.
    • Without a proper Arabic font (e.g., Amiri, Noto Naskh Arabic, Cairo), alignment breaks.

:white_check_mark: How to Fix

  1. Install Arabic fonts on your server/container

    • If you’re on Docker:

      apt-get update
apt-get install -y fonts-noto fonts-noto-cjk fonts-noto-color-emoji fonts-noto-unhinted \
                   fonts-noto-core fonts-noto-extra fonts-amiri

      The most reliable: Amiri and Noto Naskh Arabic.

    • On bare-metal Ubuntu/Debian: same apt-get install command.

  2. Tell ERPNext print format to use the font

    • In your custom print format (Jinja/HTML), define CSS like:

      <style>
  body {
    font-family: 'Amiri', 'Noto Naskh Arabic', sans-serif;
    direction: rtl;
    unicode-bidi: embed;
  }
  .english {
    direction: ltr;
    text-align: left;
  }
  .arabic {
    direction: rtl;
    text-align: right;
    font-family: 'Amiri', 'Noto Naskh Arabic', sans-serif;
  }
</style>

    • Then in your print template:

      <div class="english">Customer Name: {{ doc.customer_name }}</div>
<div class="arabic">اسم الزبون: {{ doc.customer_name }}</div>

  3. Check wkhtmltopdf version

    • Some older versions don’t handle complex Arabic shaping properly.
    • Ensure you’re on wkhtmltopdf 0.12.6 or later.

  4. Testing bilingual layout

    • For bilingual invoices, best practice is two columns:

      • Left side LTR (English),
      • Right side RTL (Arabic).

    • This avoids constant flipping of alignment. Example CSS grid:

      <div style="display:grid; grid-template-columns:1fr 1fr;">
  <div class="english">Invoice No: {{ doc.name }}</div>
  <div class="arabic">رقم الفاتورة: {{ doc.name }}</div>
</div>

:red_question_mark: Will using Arabic font resolve it?

  • Yes, 90% of the issue will be solved because fonts like Amiri/Noto handle Arabic shaping properly.
  • But you must also set direction: rtl; and unicode-bidi: embed; in CSS to get correct alignment.

Do you want me to give you a ready-to-use bilingual Sales Invoice template (HTML + CSS) that you can paste directly in Print Format Builder (instead of fighting with Print Designer drag-drop)?