Using Japanese characters in DOMPDF? - dompdf

I'm trying to get my PDF's created using DOMpdf to work correctly with Japanese characters. I have it working fine with French etc, but Japanese characters don't show (just get ???)
Here is how the HTML page looks:
...but the PDF comes out as:
The code I'm using is pretty simple:
<?php
// include autoloader
require_once '/path/to/admin/invoices/autoload.inc.php';
define("DOMPDF_ENABLE_REMOTE", true);
define("DOMPDF_UNICODE_ENABLED", true);
// reference the Dompdf namespace
use Dompdf\Dompdf;
$order_id = $argv[1];
$content = file_get_contents("/path/to/admin/invoices/html_versions/$order_id.html");
// // instantiate and use the dompdf class
$dompdf = new Dompdf();
$dompdf->loadHtml($content);
// Render the HTML as PDF
$dompdf->render();
// Output the generated PDF to Browser
$dompdf->stream();
?>
From what I can see, it wants a font specifically for Japanese.
What font would work?
Can I have it running alongside the normal font? i.e I still want to be able to show stuff like íóé etc
UPDATE: I'm getting a bit closer!
I've downloaded the CyberCJK TTF font (as suggested here: https://github.com/dompdf/dompdf/issues/938 )
Then I tweaked my CSS to:
#font-face {
font-family: CyberCJK;
font-style: normal;
font-weight: normal;
src: url("https://example.com/cgi-bin/admin/invoices/lib/fonts/DejaVuSerif.ttf") format("truetype");
}
* {
font-family: 'CyberCJK', sans-serif;
}
#page { margin: 0px; } body { margin: 0px; }
html { font-size: 14px/1; font-family: 'CyberCJK', sans-serif; overflow: auto; }
..and now I get partial characters:
I have also tested uploading my HTML page on: http://www.htm2pdf.co.uk , and it comes out perfectly as a PDF, and is also only 64kb, compared to 13mb+ using DOMPdf. Something must be up!
I'm really at a loss as to what else to try :/

Related

How to output PDF by HTML with CSS in Laravel project

I am looking for a way to create PDF from (BLADE )HTML with CSS
I am using this.
"barryvdh/laravel-dompdf": "^0.8.7",
but its output looks misconversion.
$pdf = PDF::loadView('test'
)->setPaper('a4', 'portrait');
return $pdf->stream("aaa.pdf");
I use this html
https://github.com/okoppe8/PaperFormToHTML
result here.
Use Custom font to display.So download simhei.ttf from any source.and place it public folder.Then you can use below css
<style type="text/css">
#font-face {
font-family: SimHei;
src: url('simhei.ttf') format('truetype');
}
* {
font-family: SimHei;
}
</style>
As per github issue
Ref:https://github.com/barryvdh/laravel-dompdf/issues/198
Download font from
https://www.wfonts.com/font/simhei

Ugly Arial font rendering with wkhtmltopdf.exe

Looking af https://wkhtmltopdf.org to render HTML to PDF
What can be done to improve the horrific rendering of a standard font link Arial?
HTML
<div style="font-family:'Arial'; font-size:11px; font-weight:100;">THIS is my test size:11 weight:100</div>
Command line
PS C:\Users\me\test> echo "<div style=""font-family:'Arial'; font-size:11px; font-weight:100; "">THIS is my test size:11 weight:100</div>" | .\wkhtmltopdf.exe - test.pdf
Rendered result
Expected result
I had a similar issue with a webfont (which was not installed by default in the system). I could only solve it including the base64 font in the style.css passed to user-style-sheet. Reference here
#font-face {
font-family: 'Arial';
font-style: normal;
font-weight: 400;
src: url(data:font/opentype;charset=utf-8;base64,d09GRgABAAAAAD00AA4A---[large string ommited]----3MAuAH/hbAEjQA=) format("woff"),
url(data:font/truetype;charset=utf-8;base64,AAEAAAARAQAABAAQRFNJRwAAAAEAAJUIAAA---[large string ommited]-----wAAAAAAAAAAAAEAAAAA) format("truetype");
}
You can use a tool like this to transform your font to base64.
Hope it helps!

ionic 3 alert font-sizing

i'm using the ion-select => ion-option as an input for my ionic 3 project. It gives an alert on selection, however the font-size of the alert body is really small and i have tried all sass options to increase its font-size all in vain. I have tried using .alert-md,.alert-tappable. Is there any way i can increase this font.
.scss
.ios, .md {
page-add-stock {
/*.alert-md .alert-checkbox-label{
}*/
.alert-radio-label {
font-size: 3rem;
}
}
}
.html
<ion-select [(ngModel)]="category" formControlName="category" >
<ion-option>Pesticides</ion-option>
<ion-option>Seeds</ion-option>
<ion-option>Herbicides</ion-option>
<ion-option>Fertilizers</ion-option>
<ion-option>Farming tools</ion-option>
</ion-select>
Html ion-select that generates the alert, just in case.
I cannot find any Ionic Sass variable related to the labels (I found one for the message, the title and the subtitle of the alert, but not for the labels), so you can always use a css style rule to set the right font-size:
.alert-radio-label {
font-size: 3rem;
}
The default is font-size: 1.6rem; for Android, and font-size: 1.4rem; for iOS.
UPDATE
Please notice that the alert html element is outside the page, so that style rule should be placed in the app.scss file.

CK-editor, autoset styles in dropdown with custom.css

I'm having trouble with CK4 and getting the styles for headers reflected in the styles-dropdown.
The .css should be shared of both back- and frontend and uses #page as css-id
Is there any way to tell the dropdown to parse headers with the #page-prefix.
I'm using
CKEDITOR.config.bodyId = 'page';
and css
.cke_editable {
}
#page {
/* works - editor area goes black..
font-family:Arial;
margin:10px;
font-family:Arial;
background-color:#000;
font-size: 10px;
color:#fff;
}
#page h1 {
/* works in editor-area, but not dropdown */
font-family: Verdana;
color:#999;
}
.cke_editable h2 {
/* same as h1.. */
font-family:Arial;
color:#f00;
font-size:16px;
background-color:#999;
}
h3 {
/* work BOTH in editor and style shows in dropdown. */
color:#0f0;
}
I guess that you're about to use stylesheetparser plugin to parse additional selectors. This issue has already been answered here: CKEditor - Stylesheet Parser - Valid Selectors
It's not straightforward but I believe you'll manage to do this. Good luck!
The problem is that CKEditor doesn't apply the bodyId and/or bodyClass to the styles combo: http://dev.ckeditor.com/ticket/7452
As you can see that bug was reported almost two years ago and it has been without activity from the developers most of that time.
I achived a working solution by parsing the css e.g.
#page h1 {...}
when attaching to CK like:
['config']['css'] = 'parseMyCss.php?theFile=style.css
and in parseMyCss (simplified):
$s = file_get_contents($theFile);
$s = str_replace('#page ','', $s);
header('content-type:text/css');
echo $s;

jqGrid Pager Area - Using Font Awesome Icons

I would like to use Font Awesome icons:
<i class="icon-edit"></i>
in the jqGrid pager area instead of the physical images by default.
.navButtonAdd('#vw_ComplaintSearchGridPager', { caption: '', buttonicon: 'ui-icon-disk', title: 'Save Grid Settings', onClickButton: function () { $(this).SaveGridSetting(); } })
Does anyone know how to achieve this?
It's very interesting question! I never used Font Awesome icons before, but it seems very interesting project.
jqGrid has currently no direct support of Font Awesome icons, but I prepared the simple demo which shows how to replace the standard jQuery UI navigator icons with the corresponding icons from Font Awesome.
One can see mostly clear the difference to the original navigator icons after zoom of the page. I included below the navigator displayed with zoom 400%:
The original navigator using jQuery UI icons
The navigator with Font Awesome icons:
The code which I used is very simple. Instead of usage
$grid.jqGrid("navGrid", "#pager", {view: true});
I used
$grid.jqGrid("navGrid", "#pager", {editicon: "icon-pencil",
addicon: "icon-plus", delicon: "icon-trash", searchicon: "icon-search",
refreshicon: "icon-refresh", viewicon: "icon-file",view: true});
$("#pager .navtable .ui-pg-div>span").removeClass("ui-icon");
I added the CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span { margin: 0 5px; font-size: 12px; }
I think it's possible to replace more jQuery UI icons to Font Awesome icons, but it's not very simple. I will think about the problem more and will contact the developer of jqGrid (Tony Tomov) to consider to make jqGrid more friendly to Font Awesome icons, so that it could be possible very simple switch to Font Awesome icons.
UPDATED: I added the code which allows top replace more icons from the pager:
var $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");
$pager.find(".ui-pg-button>span.ui-icon-seek-first")
.removeClass("ui-icon ui-icon-seek-first")
.addClass("icon-step-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-prev")
.removeClass("ui-icon ui-icon-seek-prev")
.addClass("icon-backward");
$pager.find(".ui-pg-button>span.ui-icon-seek-next")
.removeClass("ui-icon ui-icon-seek-next")
.addClass("icon-forward");
$pager.find(".ui-pg-button>span.ui-icon-seek-end")
.removeClass("ui-icon ui-icon-seek-end")
.addClass("icon-step-forward");
As the result one get the following pager:
instead of
UPDATED 2: The code for changing minimizing icon looks a little completer. One should first change the icon initially
$grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
.removeClass("ui-icon ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
and then change it after every click on the icon:
onHeaderClick: function (gridstate) {
if (gridstate === "visible") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-up ui-icon-circle-triangle-n")
.addClass("icon-circle-arrow-down");
} else if (gridstate === "hidden") {
$(this.grid.cDiv).find(">.ui-jqgrid-titlebar-close>span")
.removeClass("icon-circle-arrow-down ui-icon-circle-triangle-s")
.addClass("icon-circle-arrow-up");
}
}
Additionally one need to add the CSS
.ui-jqgrid .ui-jqgrid-titlebar-close>span { margin: 0 3px; font-size: 16px; }
.ui-jqgrid .ui-jqgrid-titlebar-close { text-decoration: none; }
To fix the sorting icons I used the code
var $sortables = $grid.closest(".ui-jqgrid")
.find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
$sortables.find(">span.ui-icon-triangle-1-s")
.removeClass("ui-icon ui-icon-triangle-1-s")
.addClass("icon-sort-down");
$sortables.find(">span.ui-icon-triangle-1-n")
.removeClass("ui-icon ui-icon-triangle-1-n")
.addClass("icon-sort-up");
and the CSS
.ui-jqgrid .ui-icon-asc { height: auto; margin-top: 0; }
.ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc {
height: auto; margin-top: 0; margin-left: 5px;
}
.ui-jqgrid .s-ico>.ui-state-disabled, .s-ico>.ui-state-disabled { padding: 0; }
As the result one will get the following:
UPDATED 3: In the next demo one can find more full replacement of jQuery UI icons to Font Awesome icons.
UPDATED 4: The answer provides solution for Font Awesome version 4.x.
Figured I would put a CSS alternative answer for those interested. One of our developers implemented a JS option, which did functionally work, however, there was a delay before it rendered correctly (not ideal).
We used font-awesome icons for our paging options, and here is how we implemented it.
Found the four classes that jqGrid was using for the paging icons we desired to customize and created the following css to apply base font awesome styles
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
Then it is simply a matter of grabbing the content from font-family icon and using them as your own.
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
So the entire CSS together looks like this
.ui-icon-seek-next, .ui-icon-seek-prev, .ui-icon-seek-end, .ui-icon-seek-first
{
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.ui-icon-seek-next:before
{
content: "\f105";
}
.ui-icon-seek-prev:before
{
content: "\f104";
}
.ui-icon-seek-end:before
{
content: "\f101";
}
.ui-icon-seek-first:before
{
content: "\f100";
}
And the output on our grid without JS and without delay
By looking at answer from Oleg above, I did the following to simplify things.
Additional CSS
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div>span.fntawsm { margin: 0 5px; font-size: 12px; padding-left:2px;padding-right:2px;}
** padding-left:2px;padding-right:2px; is optional
And this only works with icons only with no caption ...
And then just start adding fontawesome icons in navButtonAdd like
caption:"", // important for above
title:"Give any",
buttonicon:"fntawsm icon-remove"
buttonicon:"fntawsm icon-eject icon-rotate-90"
etc .. You can use all extra functionality from font-awesome like icon-rotate-XX too.
Thisway i did`nt have to remove ui-icon class from spans.
Inspired by #afreeland answer, I created a css available on github which allows you to convert your icons to Font-Awesome icons.
The performance advantage of this over the jquery method that #Oleg described is important in my opinion.
It is also a very elegant solution in my opinion.
You are welcome to use it: https://github.com/guylando/ToAF
Note: you must give priority for this ToAF.css file styles over your other icons styles so that can be achieved for example by copying the css content into a tag in your document.

Resources