xhtml2pdf Word wrapping of multi-line Arabic text

179 views Asked by At

I need to display Arabic text in pdf that spans multiple lines. I set the language style feature to Arabic and the text displays well if it spans only one line. For text that spans multiple lines, the word wrapping is displayed bottom-up, rather than up-bottom. For example, if you have an Arabic phrase of

The quick brown fox jumps over the lazy dog

then it is displayed as:

jumps over the lazy dog
The quick brown fox

This is the python code which is being used for pdf generation.

def render_to_pdf(template_src, context_dict={}):
    template = get_template(template_src)
    html  = template.render(context_dict)
    result = BytesIO()
    pdf = pisa.pisaDocument(BytesIO(html.encode("utf-16")), dest=result, 
    link_callback=link_callback, encoding="utf-16")
    if not pdf.err:
        return HttpResponse(result.getvalue(), content_type='application/pdf')
    return None

I have added font which support the arabic fonts.

This is my html code

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Payment Voucher</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1" name="viewport"/>
  <meta content="" name="description"/>
  <meta content="" name="author"/>
                
<style>
    @page {
        size: letter landscape;
        margin: 2cm;
    }
    @font-face {
        font-family: "Deja Vu Sans";
        src: url("{% static 'fonts/DejaVuSansCondensed.ttf' %}")
    }
   
   
    table {
        font-family: "Deja Vu Sans" !important;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 12px;
        font-family: "Deja Vu Sans" !important;
        font-size: 16px;
    }
    p{
        font-family: "Deja Vu Sans" !important;
        font-size: 15px;
        border: none;
    }
    @media(max-width:767px){
        #lines{
            width: 100% !important;
        }
        td, th {
            padding: 4px;
            font-size: 14px;
        }
        body p b {
            padding: 0 10px !important;
            display: block;
        }
        table tbody tr th p {
            font-size: 13px;
        }
        td img.logo-default, th img.logo-default {
            width: 100% !important;
        }
    }

</style>
</head>
<body>
    <pdf:language name="arabic"/>
    <p style="width: 10px; color: red">لمّا كان الاعتراف بالكرامة المتأصلة في جميع</p>
    <div id="lines" style="border: 1px solid black;width: 70%;margin: auto auto auto 0;">
        <table style="width:100%">
            <tr>
                <th colspan="3"style="font-weight: bold">Student Name</th>
                <th style="font-weight: unset">{{ application_obj.first_name|title }}</th>
                <th style="font-weight: bold">Graduation</th>
                <th style="font-weight: unset">{{ secondary_cert_obj.academic_year.year_name|default_if_none:"" }}</th>
            </tr>
            <tr>
                <td style="font-weight: bold">Type of secondary</td>
                <td>{{ secondary_cert_obj.secondary_certificate.school_certificate|default_if_none:"" }}</td>
                <td style="font-weight: bold">Seat No</td>
                <td>{{ secondary_cert_obj.seat_number|default_if_none:"" }}</td>
                 <td style="font-weight: bold">Secondary Avg</td>
                <td>{{ secondary_cert_obj.average|default_if_none:"" }}</td>
            </tr>
            </tr>
        </table>
        <p style="text-align: center;font-size: 20px;">Selected Study Options</p>
        <table>
            <tr>
                <th>Study Mode</th>
                <th>Faculty</th>
                <th>Option No</th>
                <th>Specialty</th>
                <th>Tanseeq Fees</th>
            </tr>
            {% if scenario == TanseeqAppConstants.FACULTY %}
                {% for rec in applied_objs %}
                    <tr>
                        {% if scenario == TanseeqAppConstants.FACULTY and forloop.first%}
                            <td rowspan="{{ applied_objs|length }}" style="text-align: center">{{ rec.program_details.study_mode.study_mode|default_if_none:"" }}</td>
                        {% else %}
                        {% endif %}

                        {% if scenario == TanseeqAppConstants.FACULTY and forloop.first%}
                            <td rowspan="{{ applied_objs|length }}" style="text-align: center">{{ rec.program_details.faculty.name|default_if_none:"" }}</td>
                        {% else %}
                        {% endif %}

                        <td>{{ rec.choice_id }}</td>
                        <td>{{ rec.program_details.program.name|default_if_none:"" }}</td>
                        {% if scenario == TanseeqAppConstants.FACULTY and forloop.first%}
                            <td rowspan="{{ applied_objs|length }}" style="text-align: center">{{fee}}</td>
                        {% else %}
                        {% endif %}
                    </tr>
                {% endfor %}
            {% elif scenario == TanseeqAppConstants.UNIVERSITY %}
                {% for rec in applied_objs %}
                    <tr>
                        <td>{{ rec.program_details.study_mode.study_mode|default_if_none:"" }}</td>
                        <td wrap='hard' style="direction: rtl !important; text-align: right; width: 20%;">{{ rec.program_details.faculty.name|default_if_none:"" }}</td>
                        <td>{{ rec.choice_id }}</td>
                        <td>{{ rec.program_details.program.name|default_if_none:"" }}</td>
                        <td>{{fee}}</td>
                    </tr>
                {% endfor %}

            {% else %}
                {% for rec in applied_objs %}
                    <tr>
                        <td>{{ rec.program_details.study_mode.study_mode|default_if_none:"" }}</td>
                        <td>{{ rec.program_details.faculty.name|default_if_none:"" }}</td>
                        <td>{{ rec.choice_id }}</td>
                        <td>{{ rec.program_details.program.name|default_if_none:"" }}</td>
                        <td style="text-align: center">{{fee}}</td>
                    </tr>
                {% endfor %}
            {% endif %}
        </table>
        <p style="text-align: center;"><b>Important Notes</b></p>
    </div>
</body>
</html>

0

There are 0 answers