Arabic letters in pdf are corrupted

Viewing 15 replies - 1 through 15 (of 15 total)
  • Thread Starter msaudi

    (@msaudi)

    I got that your plugin does not support this due to pdf library limitation that you use. You can use this one https://www.tcpdf.org/
    It supports Arabic & RTL in general

    Plugin Contributor Ewout

    (@pomegranate)

    Hi msaudi,
    Unfortunately it is not as simple as it seems to simply replace the pdf library. I am looking into making this more modular though, but I can’t give an estimate on this for now.
    Note that the characters appearing as squares can be solved by simply using a different font. There’s a hack in this thread that allows RTL.

    Hope that helps!

    Ewout

    Hi msaudi,
    to fix Arabic characters support problem in PDF
    you should follow these steps to integrate ar-php library for khaled.alshamaa inside dompdf library
    so, please follow these steps:

    1- download the ar-php library for khaled.alshamaa from the following link

    https://www.ar-php.org/

    2 – upload I18N folder to the path on your site

    \wp-content\plugins\woocommerce-pdf-invoices-packing-slips\lib

    3-in text_renderer.cls.php file

    woocommerce-pdf-invoices-packing-slips/lib/dompdf/include/text_renderer.cls.php

    before this line

    $this->_canvas->text($x, $y, $text

    add this code

    if ( ! class_exists( 'I18N_Arabic' ) ){

	require_once( WooCommerce_PDF_Invoices::$plugin_path ."lib/I18N/Arabic/Glyphs.php" );
	$Arabic = new I18N_Arabic_Glyphs('Glyphs');
	$text = $Arabic->utf8Glyphs($text);

		}

    4-you should use custom arabic font , so follow this steps

    download any custom Arabic font , for Example you can use this font or other

    https://www.arfonts.net/fonts/e3lan-unicode/alhurratxtlight.zip

    extract it in this path

    \wp-content\plugins\woocommerce-pdf-invoices-packing-slips\templates\pdf\Simple

    replace style.css content with this code

    <?php global $wpo_wcpdf;?>
/* Main Body */
@font-face {
	font-family: 'alhurratxtlight';
	font-style: normal;
	font-weight: normal;
	src: local('alhurratxtlight'), local('alhurratxtlight'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/alhurratxtlight.ttf) format('truetype');
}

@page {
	margin-top: 1cm;
	margin-bottom: 3cm;
	margin-left: 2cm;
	margin-right: 2cm;
	font-family: 'alhurratxtlight', sans-serif !important;
	direction:rtl;
}
body {
	background: #fff;
	color: #000;
	margin: 0cm;
	font-family: 'alhurratxtlight', sans-serif !important;
	font-size: 9pt;
	line-height: 100%; /* fixes inherit MPDF bug */
	direction:rtl;

}

h1, h2, h3, h4 {
	font-weight: normal;
	margin: 0;
	font-family: 'alhurratxtlight', sans-serif !important;

}

h1 {
	font-size: 16pt;
	margin: 5mm 0;
	font-family: 'alhurratxtlight', sans-serif !important;

}

h2 {
	font-size: 14pt;
	font-family: 'alhurratxtlight', sans-serif !important;

}

h3, h4 {
	font-size: 9pt;

}

ol,
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

li,
ul {
	margin-bottom: 0.75em;
}

p {
	margin: 0;
	padding: 0;
}

p + p {
	margin-top: 1.25em;
}

a {
	border-bottom: 1px solid;
	text-decoration: none;
}

/* Basic Table Styling */
table {
	border-collapse: collapse;
	border-spacing: 0;
	page-break-inside: always;
	border: 0;
	margin: 0;
	padding: 0;
	font-family: 'alhurratxtlight', sans-serif !important;
}

th, td {
	vertical-align: top;
	text-align: left;
}

table.container {
	width:100%;
	border: 0;
}

tr.no-borders,
td.no-borders {
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	padding: 0 !important;
	width: auto;
}

/* Header */
table.head {
	margin-bottom: 12mm;
	font-family: 'alhurratxtlight', sans-serif !important;
}

td.header img {
	max-height: 3cm;
	width: auto;
}

td.header {
	font-size: 16pt;
	font-weight: 100;
}

td.shop-info {
	width: 40%;
}
.document-type-label {
	text-transform: uppercase;
}

/* Recipient addressses & order data */
table.order-data-addresses {
	width: 100%;
	margin-bottom: 10mm;
}

td.order-data {
	width: 40%;
}

.invoice .shipping-address {
	width: 30%;
}

.packing-slip .billing-address {
	width: 30%;
}

td.order-data table th {
	font-weight: normal;
	padding-right: 2mm;
}

/* Order details */
table.order-details {
	width:100%;
	margin-bottom: 8mm;
}

.quantity,
.price {
	width: 20%;
}

.order-details tr {
	page-break-inside: always;
	page-break-after: auto;
}

.order-details td,
.order-details th {
	border-bottom: 1px #ccc solid;
	padding: 0.375em;
}

.order-details th {
	font-weight: normal;
	text-align: left;
}

.order-details thead th {
	color: white;
	background-color: black;
	border-color: black;
}

dl {
	margin: 4px 0;
}

dt, dd, dd p {
	display: inline;
	font-size: 7pt;
	line-height: 7pt;
}

dd {
	margin-left: 5px;
}

dd:after {
	content: "\A";
	white-space: pre;
}

/* Notes & Totals */
.customer-notes {
	margin-top: 5mm;
}

table.totals {
	width: 100%;
	margin-top: 5mm;
}

table.totals th,
table.totals td {
	border: 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

table.totals th.description,
table.totals td.price {
	width: 50%;
}

table.totals tr:last-child td,
table.totals tr:last-child th {
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	font-weight: normal;
}

table.totals tr.payment_method {
	display: none;
}

/* Footer Imprint */
#footer {
	position: absolute;
	bottom: -2cm;
	left: 0;
	right: 0;
	height: 2cm; /* if you change the footer height, don't forget to change the bottom (=negative height) and the @page margin-bottom as well! */
	text-align: center;
	border-top: 0.1mm solid gray;
	margin-bottom: 0;
	padding-top: 2mm;
	font-family: 'alhurratxtlight', sans-serif !important;
}

    its the only good solution to fix Arabic language character in dompdf library

    thanks

    Plugin Contributor Ewout

    (@pomegranate)

    Thank you so much for this valuable addition, t3rep!
    I will look into integrating this into the main plugin, awesome!

    Ewout

    Thanks.
    It worked with me with little change

    #1 : I have used windows AdobeArabic font.
    Add font to \wp-content\plugins\woocommerce-pdf-invoices-packing-slips\templates\pdf\Simple\fonts

    @font-face {
    font-family: ‘AdobeArabic’;
    font-style: normal;
    font-weight: normal;
    src: local(‘AdobeArabic Regular’), local(‘AdobeArabic-Regular’), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/AdobeArabic-Regular.otf) format(‘truetype’);
    }
    @font-face {
    font-family: ‘AdobeArabic’;
    font-style: normal;
    font-weight: bold;
    src: local(‘AdobeArabic Bold’), local(‘AdobeArabic-Bold’), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/AdobeArabic-Bold.otf) format(‘truetype’);
    }
    @font-face {
    font-family: ‘AdobeArabic’;
    font-style: italic;
    font-weight: normal;
    src: local(‘AdobeArabic BoldItalic’), local(‘AdobeArabic-BoldItalic’), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/AdobeArabic-BoldItalic.otf) format(‘truetype’);
    }
    @font-face {
    font-family: ‘AdobeArabic’;
    font-style: italic;
    font-weight: bold;
    src: local(‘AdobeArabic Italic’), local(‘AdobeArabic-Italic’), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/AdobeArabic-Italic.otf) format(‘truetype’);
    }

    @page {
    margin-top: 1cm;
    margin-bottom: 3cm;
    margin-left: 2cm;
    margin-right: 2cm;
    }
    body {
    background: #fff;
    color: #000;
    margin: 0cm;
    font-family: ‘AdobeArabic’;
    font-size: 9pt;
    line-height: 100%; /* fixes inherit dompdf bug */
    dir:rtl;
    }

    #2 before this line

    $this->_canvas->text($x, $y, $text

    add this code

    //to reverse characters
    if (!mb_detect_encoding($text, array(“ASCII”))) {
    preg_match_all(‘/./us’, $text, $ar);
    $text = join(”, array_reverse($ar[0]));
    // if there are numbers in the string
    // so the next line reverse the number back
    // treat also numbers with dot (decimal) and email
    $text = preg_replace_callback(‘/\d+-\d+|\d+|\d+\.\d+|\S+@\S+/’, function (array $m) {
    return strrev($m[0]);
    }, $text);
    }
    //for arabic format data
    if (!class_exists(‘I18N_Arabic’) && !mb_detect_encoding($text, array(“ASCII”))) {

    require_once( WooCommerce_PDF_Invoices::$plugin_path . “lib/I18N/Arabic/Glyphs.php” );
    $Arabic = new I18N_Arabic_Glyphs(‘Glyphs’);
    $text = $Arabic->utf8Glyphs($text);
    }

    but this still doesn’t work in sentences with both arabic and english letters together.

    hi engeman08,

    you don’t need this part of code 

    //to reverse characters
if (!mb_detect_encoding($text, array("ASCII"))) {
preg_match_all('/./us', $text, $ar);
$text = join('', array_reverse($ar[0]));
// if there are numbers in the string
// so the next line reverse the number back
// treat also numbers with dot (decimal) and email
$text = preg_replace_callback('/\d+-\d+|\d+|\d+\.\d+|\S+@\S+/', function (array $m) {
return strrev($m[0]);
}, $text);
}

    arabic letters will appear correctly without characters reverse

    also if you using long line in your pdf you can do this change

    open Glyphs.php file in this path

    \I18N\Arabic\Glyphs.php
    search

    public function utf8Glyphs($str, $max_chars = 50
    replace to

    public function utf8Glyphs($str, $max_chars = 150

    arabic and english letters will work correctly together Depending on direction rtl or ltr and good font , Please attach a pic to both arabic and english letters together problem

    thanks

    I’ using windows AdobeArabic fonr as i mentioned.
    #1 if i removed “reverse” part https://postimg.org/image/3sxk0ihkh/
    #2 after adding reverse, works well , but if the sentence has both english and arabic letters, it get corruptes https://postimg.org/image/3tuenmr0d/

    hello engeman08 ,

    Arabic text Must not appear by this way in your pics
    all text in arabic should Appears like this

    https://s14.postimg.org/hkunegls1/ltr_v.jpg

    So surely there maybe something incorrectly ,

    please download plugin with modification for try in this url
    https://goo.gl/DcPLUC
    (don’t forget remove the old one)

    Thanks so much for your help.
    The used font didn’t work with me so i used AdobeArabic and it worked well .

    But there is still a small issue with price display.
    The price is 75.00 AED,but it is displayed corrupted as in the following image.
    https://postimg.org/image/okpmzy99n/

    Hi , engeman08 you are welcome

    i will back with fix to this problem

    Okay.Thanks alot.

    thank you t3rep.com it worked will for me but still numbers output reversed for this

    Price
    Subtotal
    Total

    hope @ewout also help us in this small issue
    price like $ 231.00 output 00.132

    but all thing except that worked very well ??

    Hello everyone! i apologize for the delay , in this post you will find last update also it’s will fix Total , Price and Subtotal reversed problem

    so Please do this solution last update

    1- download the ar-php library for khaled.alshamaa from the following link

    https://www.ar-php.org/

    2 – upload I18N folder to the path on your site

    wp-content\plugins\woocommerce-pdf-invoices-packing-slips\lib

    3- open Glyphs.php file in this path

    \I18N\Arabic\Glyphs.php

    search

    public function utf8Glyphs($str, $max_chars = 50

    replace to

    public function utf8Glyphs($str, $max_chars = 150

    4-in text_renderer.cls.php file

    woocommerce-pdf-invoices-packing-slips/lib/dompdf/include/text_renderer.cls.php

    before this line

    $this->_canvas->text($x, $y, $text

    add this code

    if (strtolower($style->direction) == 'rtl') {

 if ( ! class_exists( 'I18N_Arabic' ) ){

	require_once( WooCommerce_PDF_Invoices::$plugin_path ."lib/I18N/Arabic/Glyphs.php" );
	$Arabic = new I18N_Arabic_Glyphs('Glyphs');
	$text = $Arabic->utf8Glyphs($text);
		}
}

    5-you should use custom arabic font , so follow this steps

    download any custom Arabic font , for Example you can use this font or other

    https://www.arfonts.net/fonts/e3lan-unicode/ah-manal-high.zip
    (it’s New one)

    extract it in this path

    wp-content\plugins\woocommerce-pdf-invoices-packing-slips\templates\pdf\Simple

    replace style.css content with this code

    <?php global $wpo_wcpdf;?>
/* Main Body */
@font-face {
	font-family: 'ah-manal-high';
	font-style: normal;
	font-weight: normal;
	src: local('ah-manal-high'), local('ah-manal-high'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/ah-manal-high.ttf) format('truetype');
}

@page {
	margin-top: 1cm;
	margin-bottom: 3cm;
	margin-left: 2cm;
	margin-right: 2cm;
	font-family: 'ah-manal-high', sans-serif !important;
	direction:rtl;
}
body {
	background: #fff;
	color: #000;
	margin: 0cm;
	font-family: 'ah-manal-high', sans-serif !important;
	font-size: 13px;
	line-height: 100%; /* fixes inherit MPDF bug */
	direction:rtl;

}

h1, h2, h3, h4 {
	font-weight: normal;
	margin: 0;
	font-family: 'ah-manal-high', sans-serif !important;

}

h1 {
	font-size: 16pt;
	margin: 5mm 0;
	font-family: 'ah-manal-high', sans-serif !important;

}

h2 {
	font-size: 14pt;
	font-family: 'ah-manal-high', sans-serif !important;

}

h3, h4 {
	font-size: 9pt;
	font-family: 'ah-manal-high', sans-serif !important;

}

ol,
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

li,
ul {
	margin-bottom: 0.75em;
}

p {
	margin: 0;
	padding: 0;
}

p + p {
	margin-top: 1.25em;
}

a {
	border-bottom: 1px solid;
	text-decoration: none;
}

/* Basic Table Styling */
table {
	border-collapse: collapse;
	border-spacing: 0;
	page-break-inside: always;
	border: 0;
	margin: 0;
	padding: 0;
	font-family: 'ah-manal-high', sans-serif !important;
}

th, td {
	vertical-align: top;
	text-align: left;
}

table.container {
	width:100%;
	border: 0;
}

tr.no-borders,
td.no-borders {
	border: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	padding: 0 !important;
	width: auto;
}
.amount{direction:ltr !important;}

/* Header */
table.head {
	margin-bottom: 12mm;
	font-family: 'ah-manal-high', sans-serif !important;
}

td.header img {
	max-height: 3cm;
	width: auto;
}

td.header {
	font-size: 16pt;
	font-weight: 100;
}

td.shop-info {
	width: 40%;
}
.document-type-label {
	text-transform: uppercase;
}

/* Recipient addressses & order data */
table.order-data-addresses {
	width: 100%;
	margin-bottom: 10mm;
}

td.order-data {
	width: 40%;
}

.invoice .shipping-address {
	width: 30%;
}

.packing-slip .billing-address {
	width: 30%;
}

td.order-data table th {
	font-weight: normal;
	padding-right: 2mm;
}

/* Order details */
table.order-details {
	width:100%;
	margin-bottom: 8mm;
}

.quantity,
.price {
	width: 20%;
}

.order-details tr {
	page-break-inside: always;
	page-break-after: auto;
}

.order-details td,
.order-details th {
	border-bottom: 1px #ccc solid;
	padding: 0.375em;
}

.order-details th {
	font-weight: normal;
	text-align: left;
}

.order-details thead th {
	color: white;
	background-color: black;
	border-color: black;
}

dl {
	margin: 4px 0;
}

dt, dd, dd p {
	display: inline;
	font-size: 7pt;
	line-height: 7pt;
}

dd {
	margin-left: 5px;
}

dd:after {
	content: "\A";
	white-space: pre;
}

/* Notes & Totals */
.customer-notes {
	margin-top: 5mm;
}

table.totals {
	width: 100%;
	margin-top: 5mm;
}

table.totals th,
table.totals td {
	border: 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

table.totals th.description,
table.totals td.price {
	width: 50%;
}

table.totals tr:last-child td,
table.totals tr:last-child th {
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	font-weight: normal;
}

table.totals tr.payment_method {
	display: none;
}

/* Footer Imprint */
#footer {
	position: absolute;
	bottom: -2cm;
	left: 0;
	right: 0;
	height: 2cm; /* if you change the footer height, don't forget to change the bottom (=negative height) and the @page margin-bottom as well! */
	text-align: center;
	border-top: 0.1mm solid gray;
	margin-bottom: 0;
	padding-top: 2mm;
	font-family: 'ah-manal-high', sans-serif !important;
}

    please let me know if you need any further assistance

    Thanks T3rep for your great efforts. Unfortunately, I tried your last tips with no luck.

    Before any edits (plugin defaults):

    https://snag.gy/YG8Vq.jpg

    After applying your tips:

    https://snag.gy/wDN0s.jpg

    Issue hasn’t been fixed besides styles have been ruined. Any ideas?

    Hello everyone,

    I’ve used the last recommendation by @t3repcom but the invoice will be empty (no text appears). What is it that I am missing?

    @pomegranate any suggestion?

    Many thanks,

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Arabic letters in pdf are corrupted’ is closed to new replies.