I'm trying to use a cursive font in puppeteer-sharp for a signature. Puppeteer seems to ignore the font family when assigned. Ex:
.signature { font-family: 'Brush Script MT', cursive; }
Here are my PdfOptions:
var stream = await page.PdfStreamAsync(new PdfOptions
{
Format = PaperFormat.A4,
MarginOptions = new MarginOptions
{
Top = "0px",
Right = "0px",
Bottom = "0px",
Left = "0px"
},
PrintBackground = true,
});
I've confirmed that it's not the code itself because if I run the html in a browser, the cursive font works as expected. Does anyone have any idea on how or if it's possible to get cursive to work? I imagine I'm missing something.
So I figured this out and there are two approaches to my issue. I am running a Docker container in Debian and it doesn't have this particular font installed.
Solution 1:
Download and install Brush Script MT from a trusted site.
Copy the ttf file to /usr/local/share/fonts inside your DockerFile.
Ex:
COPY ["font.ttf", "./usr/local/share/fonts/font.ttf"]
RUN fc-cache
For more information see this URL: https://wiki.debian.org/Fonts#Adding_fonts
Solution 2:
This is the lazier route and the route I took. Find a Google Font like the
cursive one and use that instead.
Go to https://fonts.google.com/ and find the font that matches to what you
need.
Reference the font.
Ex:
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet'>
.signature {
font-family: 'Cookie';
}
Related
Good morning, maybe someone knows how to import a font in the default.css file, is it to change the font type that is sent in the emails generated by Markdown? I'm trying it in these two ways but it does not change. Thank you.
Your #font-face url looks like it is not going to work, you cant run php in css file
Change it to :
#font-face {
font-family: galano;
src: url('../fonts/GalanoGrotesqueMedium.otf');
}
This will depend on your folder structure but I am guessing fonts dir is inside the public folder
--Edit--
There is no default way to render mail in 5.4 you can follow this guide https://medium.com/#oscarmwana/preview-your-notification-emails-in-laravel-5-4-f30458d6ce4b
// routes/web.php
$this->get(‘preview-notification’, function () {
$message = (new \App\Notifications\TestNotification())->toMail('test#email.com');
$markdown = new \Illuminate\Mail\Markdown(view(), config(‘mail.markdown’));
return $markdown->render(‘vendor.notifications.email’, $message->toArray());
});
I want to show, on a site that accepts only bbcode, a snapshot of a section of an external site. This section is constantly changing so I want to know if there's a way to automatically take a snapshot and save it to any server as same image so it's always updating on the bbcode-only site. Any help?
Really sorry if it's a duplicate, I tried my best searching.
You can use phantomJS for doing it.
var webPage = require('webpage');
var page = webPage.create();
page.viewportSize = { width: 1920, height: 1080 };
page.open("http://www.google.com", function start(status) {
page.render('google_home.jpeg', {format: 'jpeg', quality: '100'});
phantom.exit();
});
PhantomJS
Developing a Firefox Add-on. Anyone can please help to figure out how to make a Panel transparent.
Here is the code to show a panel:
var panel = require("sdk/panel").Panel({
width: 570,
height: 250,
contentURL: require("sdk/self").data.url("test.html")
});
panel.show();
I found a solution, but it isn't pretty since sdk/panel.js doesn't seem to expose the raw Panel object in order to tweak/extend or compose a another Panel from the existing one.
Here goes:
(1) Get the source for sdk/panel.js here: panel.js (raw) or from within sdk folder found in your addon xpi.
(2) Add it to your addon package as a new file.
(3) Change the requires parameters of this cloned file (lines 16-24) so that they point to the correct location from your addon.
example:
change
const { validateOptions: valid } = require('./deprecated/api-utils');
to
const { validateOptions: valid } = require('sdk/deprecated/api-utils');
(4) Find line 137, and modify the variable css to your liking. Like so:
...
let css = [
".panel-inner-arrowcontent, .panel-arrowcontent {padding: 0;}", //original css rule
".panel-inner-arrowcontent, .panel-arrowcontent {opacity: 0.50; border-radius: 0.35in;}" //additional css rules: semi-transparent panel with rounded borders.
].join(" ");
...
(5) Use the modified version of panel.js instead of the one that came with the sdk.
That should be it. Like I said, it isn't particularly elegant.
var currentDialog = CKEDITOR.dialog.getCurrent();
currentDialog._.editor.insertHtml("<customTag myAttr='var'></customTag>");
Throws an error, TypeError: Cannot read property 'isBlock' of undefined
If I try .insertHtml("<span>hello</span>") it works just fine.
How can I change ckeditor to allow me to specify my own custom html tags via .insertHtml()? I'd love to just change it to be something like <span class='custom'... or something like that, but I'm having to deal with legacy CMS articles. Using latest ckeditor. Thanks.
You need to modify CKEDITOR.dtd object so editor will know this tag and correctly parse HTML and process DOM:
CKEDITOR.dtd.customtag = { em:1 }; // List of tag names it can contain.
CKEDITOR.dtd.$block.customtag = 1; // Choose $block or $inline.
CKEDITOR.dtd.body.customtag = 1; // Body may contain customtag.
You need to allow for this tag and its styles/attrs/classes in Advanced Content Filter:
editor.filter.allow( 'customtag[myattr]', 'myfeature' );
Unfortunately, due to some caching, in certain situations you cannot modify DTD object after CKEditor is loaded - you need to modify it when it is created. So to do that:
Clone the CKEditor repository or CKEditor presets repository.
Modify core/dtd.js code.
And build your minified package following instructions in README.md - the only requirements are Java (sorry - Google Closure Compiler :P) and Bash.
PS. That error should not be thrown when unknown element is inserted, so I reported http://dev.ckeditor.com/ticket/10339 and to solve this inconvenience http://dev.ckeditor.com/ticket/10340.
I worked around this issue with a combination of createFromHtml() and insertElement()
CKEDITOR.replace('summary', { ... });
var editor = CKEDITOR.instances.summary;
editor.on('key', function(ev) {
if (ev.data.keyCode == 9) { // TAB
var tabHtml = '<span style="white-space:pre"> </span>';
var tabElement = CKEDITOR.dom.element.createFromHtml(tabHtml, editor.document);
editor.insertElement(tabElement);
}
}
I'm trying to change the default behavior of Drupal when adding an image through image field on a content type.
When you choose an image to assign to a node, it's not directly uploaded. You also need to click "upload" to display the preview of your image, and this is not really user friendly.
How can I change this (programmatically) to make Drupal start uploading directly the image after choosing the file.
Thank you for help
You can do it this way:
(function ($) {
Drupal.behaviors.autoUpload = {
attach: function(context, settings) {
$('.form-item input.form-submit[value=Upload]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Upload]', $parent).mousedown();
}
}, 100);
});
$('.form-item input.form-submit[value=Transférer]', context).hide();
$('.form-item input.form-file', context).change(function() {
$parent = $(this).closest('.form-item');
setTimeout(function() {
if(!$('.error', $parent).length) {
$('input.form-submit[value=Transférer]', $parent).mousedown();
}
}, 100);
});
}
};
})(jQuery);
This solution works with either english and french browsers. Unlike AutoUpload module, which only works on browsers configured in english. Note the [value=Upload] / [value=Upload] attribute
I found a similar post:
https://drupal.stackexchange.com/questions/31121/how-can-i-automatically-upload-images-on-file-selection-rather-than-pressing-the
It's exactly what I need..
You should be able to use http://drupal.org/project/imce for your needs.
I am not sure about the Image field but when I encountered this issue I decided letting users add images in body since it is a much easier option for durpal - When inserting images in text They will show immediately .
IMCE + filefield seems like a viable option for your direct needs,They do mention AJAX support.