I putted html2pdf.js in my project,
https://github.com/eKoopmans/html2pdf.js .
And too I putted Font Awesome in my project,
Before pdf
After pdf
Why did not show the font awesome after output the pdf?
this is my codes
<script src="{{ asset('js/html2pdf.bundle.min.js') }}"></script>
<script>
function generatePDF() {
const element = document.getElementById("invoice");
let opt = {
filename: 'resume.pdf',
image: { type: 'jpeg', quality: 0.98 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf()
.set(opt)
.from(element)
.save();
{{--location.replace("{{route('index')}}");--}}
}
</script>
A font can be embedded only if it contains a setting by the font vendor that permits it to be embedded. Embedding prevents font substitution when readers view or print the file, and ensures that readers see the text in its original font. Embedding increases file size only slightly, unless the document uses CID fonts. a font format commonly used for Asian languages. You can embed or substitute fonts in Acrobat or when you export an InDesign document to PDF.
Please read the adobe documentation.
It is possible that the version you are using to do not be supported.
Related
I have been replacing my existing site images with .webp. And in HTML it's relatively easy to add fallback support for instance in which .webp isn't supported. However, I'm struggling to find an equivalent for markdown?
HTML
<img src="img.webp" />
HTML with fallback support
<picture>
<source srcset="img.webp" type="image/webp">
<source srcset="img.jpg" type="image/jpeg">
<source srcset="img.png" type="image/png">
</picture>
For Example
Markdown
Markdown with fallback support
I don't think there's a spec for fallback images like that in markdown, but if you're using markdown-it (which is the default markdown parser in Eleventy) you can add custom plugins to extend the syntax. You can also just put HTML in your markdown, or you can even use shortcodes in your markdown if you're using Eleventy.
Using shortcodes
You can define custom shortcodes in Eleventy and then use them in your markdown. This could be easier and more flexible than setting up markdown-it plugins, but has the drawback of putting non-markdown things in your markdown.
Using a markdown-it plugin
If you already have pre-generated images that you want to use, you may want to use something like markdown-it-picture and modify it to set the type attribute, either by parsing the file extension or changing the media query/title spot to accept the type instead. You'll want to copy the code into a new file in your project, make your modifications, and register it like so:
// .eleventy.js
module.exports = function(eleventyConfig) {
const mdPicture = require('/path/to/plugin.js')
const md = require('markdown-it')()
md.use(mdPicture)
eleventyConfig.setLibrary('md', md)
// ...
};
With eleventy-image
Alternatively, if you don't have images already generated and would like to generate them as part of the 11ty build step, you can use eleventy-image (Docs). This Twitter thread has a discussion on creating a custom markdown-it renderer, which I've modified to use with eleventy-image below.
// you might want to put this in another file
// such as ./utils/markdown.js
// responsive images with 11ty image
// this overrides the default image renderer
// titles are also used for size setting (optional)
//
//  100vw, 768px')
const md = require('markdown-it')();
const Image = require('#11ty/eleventy-img')
md.renderer.rules.image = function (tokens, idx, options, env, self) {
const token = tokens[idx]
let imgSrc = token.attrGet('src')
const imgAlt = token.content
// you can modify the default sizes, or omit
const imgSize = token.attrGet('title') || '(max-width: 768px) 100vw, 768px'
const widths = [250, 426, 580, 768] // choose your own widths, or [null] to disable resize
const imgOpts = {
widths: widths
.concat(widths.map((w) => w * 2)) // generate 2x sizes for retina displays
.filter((v, i, s) => s.indexOf(v) === i), // dedupe widths
formats: ['webp', 'jpeg'], // choose your own formats (see docs)
urlPath: '/assets/img/', // src path in HTML output
outputDir: './_site/assets/img/' // where the generated images will go
}
// generate the images
// see https://www.11ty.dev/docs/plugins/image/#synchronous-usage
Image(imgSrc, imgOpts)
const metadata = Image.statsSync(imgSrc, imgOpts)
return Image.generateHTML(metadata, {
alt: imgAlt,
sizes: imgSize,
loading: 'lazy',
decoding: 'async'
})
}
// in your .eleventy.js
module.exports = function(eleventyConfig) {
// you may need to `require` the file with
// your markdown config with the custom renderer
// const md = require('./utils/markdown.js')
eleventyConfig.setLibrary('md', md)
// ...
};
This renderer will automatically generate different sizes of your image, as well as different formats, and then output the <picture> tags in your HTML. Since markdown-it doesn't play well with async functions, we use the syncronous pattern of eleventy-image. More information about configuration can be found in the docs.
One thing you might have to be careful about is that the image path in your markdown should be where the image is located in your website source, NOT the eventual published URL. For example, my image may be located at src/images/img.png, but published at https://example.com/images/img.png. The markdown should be  and NOT . You can also do additional parsing in the renderer function.
Not sure if this will work, but you can try it out:
[](image_url)
I am trying to draw a Markups in forge Viewer but it's working when loading extension
var extensionOptions = {
hideIssuesButton: false,
hideFieldIssuesButton: true,
};
// Use the `viewer` reference to call `loadExtension` with the extension name and the extension options:
viewer["3d"].loadExtension('Autodesk.BIM360.Extension.PushPin', extensionOptions).then(function (extension)
{
PushPinExtensionHandle = extension;
});
but draw Thickness and Font Size is very small.How to increases the size?
Please find the attachment for reference.
here are some properties which u can adjust to set the size and width of your Text
var textgeometry = new Three.TextGeometry(text,
Object.assign({}, {
font: fonts,
bevelEnabled: false,
curveSegments: 2,
bevelThickness: 0,
color: 0xFFA500,
bevelSize: 0.21,
height: 3,
size: 1
}));
here is the link for reference how u can add Text Geometry
TextGeometry
It looks to me the post is about how to set font size and freehand thickness of Markup in Forge Viewer. I am not sure why the code snippet is about loading Pushpin Extension.
anyway, let me try to answer the question of font size and freehand thickness.
Markup Core extension provides the parameter to set font style when you create text. The parameter is a json, in which font-size is one key. So to set font size, the code is like below:
markupExt.enterEditMode();
var text1= new Autodesk.Viewing.Extensions.Markups.Core.CreateText(markupExt,2333,
{x:10,y:10}, {x:100,y:100},'My Test String Small', {"font-size":5})
text1.execute();
var text2= new Autodesk.Viewing.Extensions.Markups.Core.CreateText(markupExt,2333,
{x:30,y:30}, {x:130,y:130},'My Test String Big', {"font-size":20})
text2.execute();
As to thickness, the other post tells now to set stroke width.
Autodesk Forge Viewer Markup Style Object
On my website, I want to strive for reducing the page size as much as possible. As such, on Apple devices - I want to display my site using the native San Francisco font. On all other devices, I want to display (the extremely similar) Roboto font.
What's great about Roboto is that it's locally installed with Android ... and as such, I don't want to install the font if it already exist.
What I want to do is, is what's describen in the pseudo code below
if ("San Francisco" or "Roboto" not installed locally) {
// download Robot (and preload it for super fast performance)
<link rel="preload" as="font" href="/assets/fonts/roboto.woff2" type="font/woff2" crossorigin/>
}
I totally realize in my CSS, it already has the ability to fallback to another font like so
body { font:normal 1em -apple-system,"Roboto",sans-serif;}
The problem with the CSS code above, it slow and doesn't preload.
Now yes, I guess I could just PRELOAD the Roboto font for ALL page views, but that's seems completely wasteful.
Thoughts on how I can do this?
One way to do this is through JS and the CSS Font Loading API.
You can start by trying to load the local "San Francisco" font from a FontFace instance, if it fails, load the Roboto fallbacks.
But doing so, we loose some of the advantages of link preload and we may face a Flash Of Unstyled Content.
(async () => {
const sanfrancisco = new FontFace( "San Francisco", "local('San Francisco')" );
try {
await sanfrancisco.load();
console.log( "'San Francisco' font is available on this system" );
document.fonts.add( sanfrancisco );
}
catch( err ) {
console.log( "'San Francisco' font is not available on this system" );
// use the local version
// or fallback to the online one if not available
const roboto = new FontFace( "Roboto", `local(Roboto),
url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2)
` );
await roboto.load();
console.log( "Roboto font loaded" );
document.fonts.add( roboto );
}
document.body.classList.add( "font-loaded" ); // avoid FOUC
})();
body:not(.font-loaded) {
opacity: 0;
}
.my-font {
font-family: 'San Francisco','Roboto';
}
The following paragraph
<p class="my-font">uses either San Francisco or Roboto.</p>
Last week Chrome released the media hub. This is a small button at the right of the browser's top bar, giving access to all the video and audio playing.
https://blog.google/products/chrome/manage-audio-and-video-in-chrome/
Using the <video> element makes your player appears in this media hub, it just works.
But for youtube videos (see above), the media hub seems to be able to find a cover image, a color and a title / sub-title. However, I was not able to find any documentation about how to obtain this aspect with a standard video element. Any idea?
We're all in the same boat, after trying to dig the source in chromium with no luck, I was sending an email to the chromium developer for this question and got the useful link about MediaSession.
So following the docs, You can customize it by setting metadata property in the mediaSession to showing a title, description and artwork (a.k.a. background image) except the background color, That's because the background color is determined by pixels of the image automatically.
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Never Gonna Give You Up',
artist: 'Rick Astley',
album: 'Whenever You Need Somebody',
artwork: [
{ src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' },
{ src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
{ src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
{ src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
{ src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
{ src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
]
});
}
I have created the demo on the JSFiddle. the result shows as following.
I've created a small app to view all local fonts on a browser. (Demo).
I'm using Flash to get font names:
import flash.external.ExternalInterface;
ExternalInterface.call("getFontList", getDeviceFonts());
function getDeviceFonts(): Array {
var embeddedAndDeviceFonts: Array = Font.enumerateFonts(true);
var deviceFontNames: Array = [];
for each(var font: Font in embeddedAndDeviceFonts) {
deviceFontNames.push(font.fontName);
}
deviceFontNames.sort();
return deviceFontNames;
}
and later process the names and create a 4 column layout to view them:
function getFontList(fontList) {
$("#flash").remove();
fontList.forEach(function (fontName) {
var cell = elem("div", {"class":"tile"}, [
elem("div", {"class":"fontName"}, fontName),
elem("div", {"class":"demo", "style":"font-family: \"" + fontName.replace(/"/g, '\\"') + "\", Consolas, Arial;"}),
]);
output.append(cell);
});
updateCells($("#input").val());
}
This is working fine, but there's slight problem. Some fonts doesn't render on the browser, and the fallback font is applied.
For example, this font: !PaulMaul. I can view this on MS Word and Photoshop:
and this is how it looks (Consolas applied) on the browser:
I haven't encountered something like this before, so I don't know what the problem is. I thought any local font is usable on the browser, especially if MS Word and PS can render them fine. I guess, that isn't true.
What exactly is the problem here, and is there a way to solve this?
App is available on Github, if anyone wants to tinker.