How to load fonts and images with Dompdf (laravel-dompdf)? - laravel-8

I have Laravel 8 and laravel-dompdf installed.
In the config/domppdf.php file i have some settings
"font_dir" => storage_path('pdf-assets-cache/'),
"font_cache" => storage_path('pdf-assets-cache/'),
"temp_dir" => storage_path('pdf-assets-cache/'),
"chroot" => realpath(base_path()),
"pdf_backend" => "PDFLib",
"enable_remote" => true,
"enable_html5_parser" => true,
The view:
#font-face {
font-family: 'TTNorms-Reg';
src: url('/pdf-fonts/TTNorms-Reg.eot') format('embedded-opentype'),
url('/pdf-fonts/TTNorms-Reg.woff2'),
url('/pdf-fonts/TTNorms-Reg.woff') format("woff"),
url('/pdf-fonts/TTNorms-Reg.ttf');
format("truetype");
}
body {
color: black !important;
background: white;
font-size: 13px;
line-height: 20px;
font-family: TTNorms-Reg;
}
In my controller i tried
$pdf = PDF::loadView('frontend.attendees.ticket', $data)
->setPaper('a4', 'portrait')
->setOptions(['dpi' => 96,
'isHtml5ParserEnabled' => TRUE,
'isRemoteEnabled' => TRUE,
'enable_html5_parser' => TRUE,
'enable_remote' => TRUE,
'enable_css_float' => TRUE,
'chroot' => storage_path('/')]);
The view loads perfectly with
return view('frontend.attendees.ticket', $data);
But the pdf result is without images and fonts.
When enabling the warnings I get:
Permission denied on /pdf-fonts/TTNorms-Reg.woff2. The file could not be found under the paths specified by Options::chroot
Kinda stuck. Any help or hints are much appreciated!

Solved by adding the utm and cache to the storage/pdf-assets-cache/ folder. The steps:
Not needed:
#font-face {
font-family: 'TTNorms-Reg';
src: url('/pdf-fonts/TTNorms-Reg.eot') format('embedded-opentype'),
url('/pdf-fonts/TTNorms-Reg.woff2'),
url('/pdf-fonts/TTNorms-Reg.woff') format("woff"),
url('/pdf-fonts/TTNorms-Reg.ttf');
format("truetype");
}
Download load_font.php
https://github.com/dompdf/utils/blob/master/load_font.php
In terminal
php load_font.php TTNorms-Reg public/fonts/TTNorms-Reg.ttf
php load_font.php MG-mono public/fonts/MonumentGrotesk-Mono.ttf
Copy newly generated .ufm, .ufm.php, dompdf_font_family_cache.php files in
vendor/dompdf/dompdf/lib/fonts/ folder
to
storage/pdf-assets-cache/ folder

Related

Snowpack built-in optimization removes comments from scss

I have a small project where I am trying to use Snowpack built-in optimization instead of #snowpack/plugin-webpack (docs).
When running a build process, comments from scss file are removed. What can I do to keep my comments?
This is what I am using in snowpack.config.mjs file:
optimize: {
bundle: true,
minify: false,
sourcemap: false,
target: 'es2015',
},
plugins: [
'#snowpack/plugin-sass',
'#snowpack/plugin-postcss'
],
I tested it in a simple index.scss file:
/* ------------ Comment example ---------- */
body {
font-family: sans-serif;
color: pink;
}
The resulted index.css file doesn't have my comment, but a different one:
/* build/index.css */
body {
font-family: sans-serif;
color: pink;
}
I don't need this new comment, but would like to keep mine.

How to load a Font from node_modules with Vite?

I'm trying to load a company font from a node_modules folder which only includes fonts and icons, it was working locally. At first, I thought it was because Vite/Rollup don't have the ~ by default, so I added an alias in vite config, but actually what I think really happens is that Rollup simply disregard (doesn't include) my node_modules/#company because I'm not importing any JS/TS code from it (it's just fonts/icons), so I assume that Rollup is probably skipping or ignoring that in the tree shaking process during the prod build because the only time it's reference is through the #import in my scss file which is probably not enough.
// https://vitejs.dev/config/
export default defineConfig({
base: './',
plugins: [
Vue({
reactivityTransform: true,
template: { transformAssetUrls },
}),
],
resolve: {
alias: {
'~#company': path.resolve(__dirname, 'node_modules/#company'),
'#': `${path.resolve(__dirname, './src')}`,
},
},
}
this only works locally, it doesn't work from a build (I get 404)
/* scss file */
#font-face {
font-family: 'comp-icon';
src: url('~#company/icons/fonts/comp-icon.woff2') format('woff2'), url('~#company/icons/fonts/comp-icon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
So like I said, I think Rollup is ignoring my node_modules/#company folder completely during the prod build tree shaking process.
I looked for why it doesn't work and came across this post in a similar issue, that person used rollup-plugin-copy lib to copy the font into the public assets folder and that seems to work for me but is not ideal since it copies font from one place to another on every build.
// https://vitejs.dev/config/
export default defineConfig({
base: './',
plugins: [
Vue({
reactivityTransform: true,
template: { transformAssetUrls },
}),
copy({
targets: [{ src: './node_modules/#company/icons/fonts/**/*', dest: 'public/assets/fonts'
}],
}),
],
resolve: {
alias: {
'~#company': path.resolve(__dirname, 'node_modules/#company'),
'#': `${path.resolve(__dirname, './src')}`,
},
},
}
and using it with
/* scss file */
#font-face {
font-family: 'comp-icon';
src: url('fonts/comp-icon.woff2') format('woff2'), url('fonts/comp-icon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
It seems to work but I think it's just an ugly patch, I don't really wish to keep this copy process unless I really have to. My project is a Vue 3 + Vite + Vitest, however I assume that my problem is stricly a Vite/Rollup problem.
What is the correct way to load custom company fonts from a node_modules that I believe gets excluded from Rollup at the tree shaking process? What do I need to do to get this working and expect Rollup to include all my fonts files (woff, woff2, ttf) in my final prod build?
EDIT
Creating an alias like this SO that was provided in the comments did help with my use case. However in my case I wanted to keep # as an alias to src so I added a ~ alias, it's similar to how it works in WebPack except that I need to add a trailing slash after the tilda, it would be nice to find how to make it the same as WebPack (path.join is suppose to help but that didn't work) but for now it's acceptable
resolve: {
alias: {
'~': path.resolve(__dirname, './node_modules'),
'#': `${path.resolve(__dirname, './src')}`,
},
},
#font-face {
font-family: 'se-icon';
src: url('~/#company/icons/fonts/se-icon.woff2') format('woff2'), url('~/#company/icons/fonts/se-icon.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Referencing files from within node_modules folder works for me in Vite 4.0.1
Might be that it's because I'm using tailwind, IDK.
#import "#openfonts/ubuntu_latin-ext/index.css";

Production build Vue js, can't access the image file in the build folder

I ve created a vue 3 project
and I have this code where I'm creating a div using jquery.
var div = $(
`<div data-v-3230242e data-item_index='${itemm.index}' data-itemid_name='${item_name}' data-sqlid='${itemm.id}' draggable=true class="itemImage"></div>`
);
div.css(
"background-image",
"url(" + `/assets/images/${item_name}.png` + ")"
);
console.log("ééé");
let container = $(`#mainBar .backbag_inventory #${box.id}`);
console.log(container);
container.append(div);
PS: When i'm runing npm run serve ( the vue server) everything works fine.
So I checked that the div is created but its background image cannot be set.
This is my vue.config.js
module.exports = {
publicPath: './',
filenameHashing: false,
lintOnSave: false,
outputDir: '../client_packages/gamemode/vuebrowser'
}
I have some static divs, however its background image are set.
divs css:
#backbag {
background: url("../../assets/images/backbagstatic.png");
background-repeat: no-repeat;
background-size: 95% auto;
object-fit: contain;
background-color: rgba(7, 10, 22, 0.796);
}
I tried those with the urls too but couldn't get it to work :
"url(" + `../../assets/images/${item_name}.png` + ")"
"url(" + `./assets/images/${item_name}.png` + ")"
And the builded folder is this:
Build Folder
Please can anyone had the issue before, help me and thank you

CREATE_REACT_APP env variable in index.css

Want to do something like this:
#font-face {
font-family: 'Proxima Nova SemiBold';
font-style: normal;
font-weight: 600;
src: url(%CREATE_REACT_APP_S3_BUCKET%"/fonts/ProximaNovaSemibold.otf") format('opentype');
}
It's not working. What are my alternatives?
You have two options:
Use inline styles
Load different CSS files in the view depending on the environment variable.

Symbols in #font-face font are not displayed in Safari 5, are displayed correctly in Safari 6 and other browsers

I'm having a weird issue with the displaying of quotes and accents in Safari 5. I'm using a font-face font with the following code.
#font-face {
font-family: 'MendozaRomanStd-Book';
src: url('fonts/mendozaromanstd-book.eot');
src: url('fonts/mendozaromanstd-book.svg#mendozaromanstd-book') format('svg'),
url('fonts/mendozaromanstd-book.eot?#iefix') format('embedded-opentype'),
url('fonts/mendozaromanstd-book.woff') format('woff'),
url('fonts/mendozaromanstd-book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
On Firefox, Chrome, Safari 6, iOS6 and IE the font are displayed correctly:
On Safari 5 however I'm seeing this:
Same charset, same html. I've searched everywhere for reported issues with font-face displaying under Safari 5 but there aren't any reports leading me to suspect something else is going on. Anyone have any idea what could going on here?
Turns out Safari 5 does not show accents or symbols in SVG fonts.
It does show them when using TTF or WOFF fonts, but not in SVG.
Chrome or Safari 6 do not seem to have this problem.
I ended up fixing it by defining a separate font with #font-face, and then targetting Safari 5 with browser specific CSS. So:
/* Font-face for all browsers */
#font-face {
font-family: 'MendozaRomanStd-Book';
src: url('fonts/mendozaromanstd-book.eot');
src: url('fonts/mendozaromanstd-book.svg#mendozaromanstd-book') format('svg'),
url('fonts/mendozaromanstd-book.eot?#iefix') format('embedded-opentype'),
url('fonts/mendozaromanstd-book.woff') format('woff'),
url('fonts/mendozaromanstd-book.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Safari5 fix */
#font-face {
font-family: 'MendozaRomanStd-Book2';
src: url('fonts/mendozaromanstd-book.ttf') format('truetype') !important;
font-weight: normal;
font-style: normal;
}
.safari5 body {
font-family: 'MendozaRomanStd-Book2', Times new roman, serif;
-webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
-webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;
}
Please note that this code already contains a fix to enable correct rendering of webfonts in Chrome under PC. With the standard fontsquirrel generated code, this leads to horrible jaggyness and not aliased fonts. Until Google can get its act together, a fix is to elevate the SVG file to the top.