Chinese characters not displaying properly

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Contributor Ewout

    (@pomegranate)

    8 years, 10 months ago

    Hi Rosinsky,
    The Default font used in the PDF does not support Chinese characters. You will need to setup a template that uses a Chinese font. Check out the instructions in our documentation:
    Using custom fonts

    Note that not all servers handle chinese fonts very well (they require much more memory during processing), and if you have not enabled subsetting, the PDF files become very large.

    Hope that helps!

    ericgonzalezoboe

    (@ericgonzalezoboe)

    8 years, 9 months ago

    Ok , maybe this question will help other people.

    Well I spent like 2 days trying todo it but…. doest work . Of course is because i am doing something incorrect.

    fist step i created copy all to child theme and create the folder fonts , after i upload the font . Of course as well i created the pdf folder.

    2 . with all the files there i strated to write the code . I am sure where is the mistake.

    <?php global $wpo_wcpdf;?>
    /* Load font */
    @font-face {
    font-family: ‘ipaexm’;
    font-style: normal;
    font-weight: normal;
    src: local(‘ipaexm’), local(‘ipaexm’), url(<?php echo $wpo_wcpdf->export->template_path; https://www.eg-reeds.com/fonts/ipaexm.ttf) format(‘truetype’);
    }
    @font-face {
    font-family: ‘ipaexm.ttf’;
    font-style: normal;
    font-weight: bold;
    src: local(‘ipaexm.ttf Bold’), local(‘ipaexm-Bold’), url(<?php echo $wpo_wcpdf->export->template_path; https://www.eg-reeds.com/fonts/ipaexm-bold.ttf) format(‘truetype’);
    }
    @font-face {
    font-family: ‘ipaexm’;
    font-style: italic;
    font-weight: normal;
    src: local(‘ipaexm Italic’), local(‘ipaexm.ttf-Italic’), url(<?php echo $wpo_wcpdf->export->template_path; https://www.eg-reeds.com/fonts/ipaexm-italic.ttf) format(‘truetype’);
    }
    @font-face {
    font-family: ‘ipaexm’;
    font-style: italic;
    font-weight: bold;
    src: local(‘ipaexm Bold Italic’), local(‘ipaexm-BoldItalic’), url(<?php echo $wpo_wcpdf->export->template_path; https://www.eg-reeds.com/fonts/ipaexm-bolditalic.ttf) format(‘truetype’);

    3 – Step-
    I am not sure where i must paste this…

    then make sure you assign that font family to the body or other elements of the template:

    body {
    font-family: ‘ipaexm’;
    }

    4- step.

    after this i am nos sure if i must change something in WP or if is all.

    thank you very much for your help.

    regards.

    Plugin Contributor Ewout

    (@pomegranate)

    8 years, 9 months ago

    Hi Eric,
    You’ve mixed two approaches, server paths and urls. The code you use now:

    <?php echo $wpo_wcpdf->export->template_path; https://www.eg-reeds.com/fonts/ipaexm.ttf

    is missing a php closing tag and is also trying to output the server path.

    To use the server path (the child theme folder), use:

    src: local('ipaexm'), local('ipaexm'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/ipaexm.ttf) format('truetype');

    To use the site url:

    src: local('ipaexm'), local('ipaexm'), url(https://www.eg-reeds.com/fonts/ipaexm.ttf) format('truetype');

    As for the third step, this is in the same file that you changed the above: after the @font-face declarations, first comes the @page tag and then the body tag. This is where you change the font-family, which will normally say font-family: 'Open Sans', sans-serif;

    Hope that helps!
    Ewout

    ericgonzalezoboe

    (@ericgonzalezoboe)

    8 years, 9 months ago

    Thank you very much for your help!

    really helpful !!! THANK YOU

    now I still with some questions

    in the 3 step..

    now looks like this
    @page {
    margin-top: 1cm;
    margin-bottom: 3cm;
    margin-left: 2cm;
    margin-right: 2cm;
    }
    body {
    background: #fff;
    color: #000;
    margin: 0cm;
    font-family: ‘Open Sans’, sans-serif;
    font-size: 9pt;
    line-height: 100%; /* fixes inherit dompdf bug */
    }

    them must be like this right?

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

    _____________________

    ones more thank you

    Plugin Contributor Ewout

    (@pomegranate)

    8 years, 9 months ago

    almost correct! There is no ‘ipaexm-serif’ though, and the second font is just a fallback font. This should do:

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

    ericgonzalezoboe

    (@ericgonzalezoboe)

    8 years, 9 months ago

    OK.. tired but doest work.

    well will paste the full code .

    What do you think?
    thank you very much.
    _________________

    <?php global $wpo_wcpdf;?>
/* Main Body */

<?php global $wpo_wcpdf;?>
/* Load font */
@font-face {
    font-family: 'ipaexm';
    font-style: normal;
    font-weight: normal;
    <strong>src: local('ipaexm'), local('ipaexm'), url(https://www.eg-reeds.com/fonts/ipaexm.ttf) </strong>format('truetype');
}
@font-face {
    font-family: 'ipaexm.ttf';
    font-style: normal;
    font-weight: bold;
    <strong>src: local('ipaexm'), local('ipaexm'), url(https://www.eg-reeds.com/fonts/ipaexm.ttf) format('truetype');}</strong>
@font-face {
    font-family: 'ipaexm';
    font-style: italic;
    font-weight: normal;
    <strong>src: local('ipaexm'), local('ipaexm'), url(https://www.eg-reeds.com/fonts/ipaexm.ttf) format('truetype');</strong>
}
@font-face {
    font-family: 'ipaexm';
    font-style: italic;
    font-weight: bold;
   <strong> src: local('ipaexm'), local('ipaexm'), url(https://www.eg-reeds.com/fonts/ipaexm.ttf) format('truetype');</strong>

@page {
	margin-top: 1cm;
	margin-bottom: 3cm;
	margin-left: 2cm;
	margin-right: 2cm;
}
body {
	background: #fff;
	color: #000;
	margin: 0cm;
	<strong>font-family: 'ipaexm';</strong>
	font-size: 9pt;
	line-height: 100%; /* fixes inherit dompdf bug */
}
h1, h2, h3, h4 {
	font-weight: bold;
	margin: 0;
}

h1 {
	font-size: 16pt;
	margin: 5mm 0;
}

h2 {
	font-size: 14pt;
}

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;
}

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;
}

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

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

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: bold;
	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: bold;
}

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;
}
    Plugin Contributor Ewout

    (@pomegranate)

    8 years, 9 months ago

    First of all, it looks like you have use the same name for each src, you may want to change that for each font-weight/style combo (as with the original open sans).
    Furthermore, you have used the wrong font-family name for the bold font (remove the .ttf).
    You’re also missing a } after the last @font-face declaration.

    I suggest you check out the template in the browser first by enabling the “output to HTML” option in the Status tab. This will allow you to debug the code much better.
    Also, if you enable debug output here, you’ll get better error reporting if you have made a mistake.

    Hope that helps!

    ericgonzalezoboe

    (@ericgonzalezoboe)

    8 years, 9 months ago

    Hello again! first of all, thank you very much for you help.

    I change the code. what happen now is the next.

    The pdf come in blank ….

    1 – i activate output to HTML , and the invoice come out perfect in JP.
    2- Notice: Constant FORCE SSL ADMIN already defined in /home/egreedssc/public_html/wp-config.php on line 87

    any suggestions?

    thank you very much .
    EG

    Plugin Contributor Ewout

    (@pomegranate)

    8 years, 9 months ago

    Hi!
    I don’t have many more suggestions, but please double check your code for any CSS errors! In the code you posted there is still and error:
    and in several spots.
    Please check your code carefully. Computers are not always as forgiving as humans :o)
    Even when the browser displays your font correctly, the PDF engine may be more picky.

    Are you not getting any errors at all, besides the FORCE SSL notice?

    Ewout

    ericgonzalezoboe

    (@ericgonzalezoboe)

    8 years, 9 months ago

    Hello , thank you for try help me.
    I change the code ,
    I still having some problems.

    1 I changed the URL for the order way to call it.

    src: local(‘ipaexm’), local(‘ipaexm’), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/ipaexm.ttf) format(‘truetype’);

    and was really working for sort time, but never display the total of the invoice , just partially ( but in Chinese .. ) so ok .

    2 now i tried again and it doest work any more and with the debug mode..

    Notice: Constant FORCE_SSL_ADMIN already defined in /home/egreedsc/public_html/wp-config.php on line 87

    Notice: Undefined offset: 5 in /home/egreedsc/public_html/wp-content/plugins/woocommerce-pdf-invoices-packing-slips/lib/dompdf/include/stylesheet.cls.php on line 1115

    Notice: Undefined index: in /home/egreedsc/public_html/wp-content/plugins/woocommerce-pdf-invoices-packing-slips/lib/dompdf/lib/class.pdf.php on line 3154

    Notice: Undefined index: in /home/egreedsc/public_html/wp-content/plugins/woocommerce-pdf-invoices-packing-slips/lib/dompdf/lib/class.pdf.php on line 3521

    Notice: Undefined index: in /home/egreedsc/public_html/wp-content/plugins/woocommerce-pdf-invoices-packing-slips/lib/dompdf/lib/class.pdf.php on line 2549

    Notice: Undefined index: in /home/egreedsc/public_html/wp-content/plugins/woocommerce-pdf-invoices-packing-slips/lib/dompdf/lib/class.pdf.php on line 3154

    Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 5572568 bytes) in /home/egreedsc/public_html/wp-content/plugins/woocommerce-pdf-invoices-packing-slips/lib/dompdf/lib/class.pdf.php on line 1406

    <?php global $wpo_wcpdf;?>
/* Load font */
@font-face {
font-family: 'ipaexm';
font-style: normal;
font-weight: normal;
src: local('ipaexm'), local('ipaexm'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/ipaexm.ttf) format('truetype');
}
@font-face {
font-family: 'ipaexm';
font-style: normal;
font-weight: bold;
src: local('ipaexm Bold'), local('ipaexm-Bold'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/ipaexm.ttf) format('truetype');
}
@font-face {
font-family: 'ipaexm';
font-style: italic;
font-weight: normal;
src: local('ipaexm Italic’),local('ipaexm-Italic’), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/ipaexm.ttf) format('truetype');
}
@font-face
font-family: 'ipaexm';
font-style: italic;
font-weight: bold;
src:src: local('ipaexm Bold Italic'),local('ipaexm-Bold-Italic'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/ipaexm.ttf) format('truetype');
}
@page {
	margin-top: 1cm;
	margin-bottom: 3cm;
	margin-left: 2cm;
	margin-right: 2cm;
}
body {
	background: #fff;
	color: #000;
	margin: 0cm;
	font-family: 'ipaexm';
	font-size: 9pt;
	line-height: 100%; /* fixes inherit dompdf bug */

    What do you think about?

    regards and thank you

    Plugin Contributor Ewout

    (@pomegranate)

    8 years, 9 months ago

    This is starting to become a really long thread 🙂
    You need to make absolutely sure that your code contains no errors! I spotted another one:

    src:src: local('ipaexm Bold Italic'),local('ipaexm-Bold-Italic'), url(<?php echo $wpo_wcpdf->export->template_path; ?>/fonts/ipaexm.ttf) format('truetype');

    Should be src only once!

    Here’s my advice:
    output to HTML and run the resulting CSS (copied from the browser, leave out the rest of the HTML) through a validator like this:
    https://jigsaw.w3.org/css-validator/#validate_by_input

    Good luck!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Chinese characters not displaying properly’ is closed to new replies.