I have a document I create with html
const doc1 = new docusign.Document();
doc1.documentBase64 = Buffer.from(htmlPage(args.htmlArgs)).toString('base64');
doc1.name = args.documentName;
doc1.fileExtension = 'html';
The htmlPage method just returns a html string.
I want to specify font type and size for the document.
I have been looking through docusign documentation.
How would I set the font type and size?
You should be able to set the font size and type inside the HTML page itself. The buffer that you just create, includes the payload for your HTML page - any configuration you want on that page, including font, should be set in that page.
You can refere to this example where the CSS is included in the header of the HTML doc.
https://github.com/docusign/code-examples-node/blob/master/lib/eSignature/eg002SigningViaEmail.js#L257
<h1 style="font-family: 'Trebuchet MS', Helvetica, sans-serif;
color: darkblue;margin-bottom: 0;">World Wide Corp</h1>
<h2 style="font-family: 'Trebuchet MS', Helvetica, sans-serif;
Related
PHPMailer version 6.18
I reviewed numerous examples of how to add an inline/embedded image with phpmailer. Following the examples the image gets added as an attachment versus inline. Have tried both text and html.
$mail->IsHTML(true);
$mail->CharSet = "UTF-8";
$attachment = "packages/ds/reservations/venmo-code.jpg";
$mail->Body = "
<style type='text/css'> img { max-width: 100%; width: 480px; } </style>
<h2>Including an embeded image</h2>
<img src='cid:venmo' ";
#$mail->addEmbeddedImage("$attachment", "venmo");
#$mail->addEmbeddedImage("$attachment", "venmo","base64","image/jpeg"); // fails
$mail->addEmbeddedImage("$attachment", "venmo","image/jpeg", "base64"); // reversed
Neither the commented #$mail or second option work, getting the same result. The following, reversing image/jpeg with base64 errors out so I reversed it as above just to see.What am I missing?
Very silly mistake. I missed closing the html on the img src line:
Should be:
<img src='cid:venmo' />";
Exporting gantt with dhtmlx works fine, but I wondered if there is a way to hide or remove the sentence in watermark (footer):
This document is created with dhtmlx library: http://dhtmlx.com
This sentence is generated when export to pdf or png at the bottom of the doc (even below footer)
The footer (watermark) will be there if you use the export for free.
It's only removed if you buy a paid version of dhtmlxGantt, here are the conditions:
https://dhtmlx.com/docs/products/dhtmlxGantt/export.shtml#:~:text=Free%20Online%20Export%20Service
If you already have the paid version of the component, you can contact dhtmlx sales regarding it.
They remove the watermark by whitelisting the domain where your app is hosted (from where the export is called), so it doesn't happen automatically when you buy the license, you have to request it.
It's also possible to deploy the export locally, the local version doesn't add watermarks. You get the local install with more expensive licenses, or you can buy it separately
I found a way to hide for free the watermark by using the footer using position: absolute. This example will use background red but you can use another color.
Based on the dhtmlx ExporttoPDF we can easily modify the css by using a <style> element, so I did something like this:
HTML FOR EXPORT TO PDF:
<input type="button" onclick='gantt.exportToPDF({
footer:`<style>
#footer-container{ position:relative; }
h4{ width:100%; background: red; position: absolute; top:-10px; }
</style>
<div id="footer-container">
<h4>Bottom Line</h4>
</div>`
})'>
CSS included in HTML above FOR EXPORT TO PDF:
#footer-container{
position:relative;
}
h4{
position: absolute;
top:-10px;
width:100%;
background: red;
}
HTML FOR EXPORT TO PNG:
<input type="button" onclick='gantt.exportToPNG({
footer:`<style>
#footer-container{ position:relative; }
h4{ width:100%; background: red; position: absolute; top:-10px; }
</style>
<div id="footer-container">
<h4>Bottom Line</h4>
</div>`
})'>
CSS included in HTML above FOR EXPORT TO PNG:
#footer-container{
position:relative;
}
h4{
position: absolute;
top:-10px;
width:100%;
background: red;
}
Output:
I am trying to add an authentication form where users enter their credentials and if their credentials are correct, I want to redirect them to a route. So, I have created a middleware login.js, which renders the pug template and post a request on form submission. The post method is working but I am not getting the values of the pug form in req.body. What do I do?
Here's the admingLogin.pug file
doctype html
html(lang='en')
head
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(http-equiv='X-UA-Compatible', content='ie=edge')
link(rel='icon', href='../client/assets/favicon/login.ico', type='image/x-icon')
link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css')
title Admin
body
.ui.middle.aligned.center.aligned.grid
.column
form.ui.large.form(action='/auth' method='post')
.ui.stacked.secondary.segment
.field
.ui.left.icon.input
p Log-in as an admin to create custom links
.field
.ui.left.icon.input
i.user.icon
input(type='text', name='username', placeholder='Username')
.field
.ui.left.icon.input
i.lock.icon
input(type='password', name='password', placeholder='Password')
button(type="submit").ui.fluid.large.teal.submit.button Login
.ui.error.message
style.
body>.grid {
height: 100% !important;
}
.image {
margin-top: -100px !important;
}
.column {
max-width: 450px !important;
margin-left: 55px !important;
margin-right: 55px !important;
}
body {
background: #30E8BF;
background: -webkit-linear-gradient(to right, #FF8235, #30E8BF);
background: linear-gradient(to right, #FF8235, #30E8BF);
}
Here's the link to the complete project and the link to the route is here. The middleware is passed here.
The POST from your HTML is sent as application/x-www-form-urlencoded. You need to configure body-parser to handle such a type.
Currently, based on the code you added, it is only capable of handling application/json.
Try adding the following line below app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
I have an element which requires a custom font (this one, specifically) and a Polymer code base. I import it in a separate style block as follows:
<style>
#font-face {
font-family: "Hattori";
src: url("../fonts/Hattori-Hanzo.otf");
font-weight: normal;
font-style: normal;
}
</style>
Then in Polymer's dom-module block I apply this font to a d3 item as follows:
var legend = main.append("g")
.attr("font-family", "Hattori")
However, in Chrome devtools I get:
Failed to decode downloaded font: http://localhost:8080/src/fonts/Hattori-Hanzo.otf
OTS parsing error: invalid version tag
I checked, and the right font file is in the exact location specified by that url. I have another font in that exact folder being imported just fine by another component, in the same method, so I'm not sure what's going wrong here.
Is it possible to write a program that masks the set of fonts installed on the computer, so the font list would appear "plain vanilla" and would not be of much value in creating a ~unique fingerprint? https://panopticlick.eff.org/
There is probably some support for that in some browsers, but with any browser you could intercept the winapi calls for enumerating the font list.
Basically you write a dll that will be loaded into the browser process, and then it will intercept the calls the browser will make to the OS when it will enumerate fonts. Just lookup which functions in windows are used for enumerating fonts, and fake them in your dll. (that could be some work though, because you will have to rewrite the font enumerating logic).
Also, some of the browsers may very well just read the registry to enumerate fonts, and not use the specialized fontfunctions, in that case you will have to intercept the registry-winapi functions, and make sure they report the font list that you want.
For loading your dll into the target process you could use Windows hooks, or use a .exe file editor to add your dll to import table of the browser's exe file. There is also a special place in the registry where if you add a dll there, it will be loaded to every process in the system. (then you'll have to check for browser process, and only intercept api calls then, so that not every program on your system will get the bogus font list).
Also, it is possible that a browser will run some plugin, or activex control, or java, or something like that in another process (chrome runs every tab in different processes for example), so I would check every process' parent, and if you see that it has been started by the browser, intercept the font list in that process also. That way, the target webpage won't be able to get the real font list through flash, plugins, java, or anything.
A good start to intercepting winapi calls can be found here: http://www.codeproject.com/KB/system/InterceptWinAPICalls.aspx
So this is a reliable way to do this, and although it can't be done in an hour, it's not overly complicated either.
Of course, this will not only make your font list bogus, it will also make the browser not see and be able to display the fonts that are not in the list.
And this all is valid for Windows of course, but there are surely similair ways to do this on other OSes.
Also, worth to note, I don't think a webpage can read the font list if you have disabled javascript and plugins(flash).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Font detector</title>
<style type="text/css" media="screen">
#font_detector_box{ visibility: hidden; }
#font_detector_box span.font{ padding: 0px; margin: 0px; border: none; font-size: 10px; letter-spacing: 1px; }
</style>
</head>
<body>
<h1>Font Detection Page</h1>
<p>This page is a sample for font detection tecniques</p>
<h2>List of fonts installed on your machine</h2>
<span id="font_list_display">
</span>
<!-- Invisible div -->
<div id="font_detector_box">
<span class="font family_Arial" style="font-family: Arial, Verdana !important">mmm</span>
<span class="font family_Comics_Sans_MS" style="font-family: Comic Sans MS, Arial !important">mmm</span>
<span class="font family_Georgia" style="font-family: Georgia, Arial !important">mmm</span>
<span class="font family_Helvetica" style="font-family: Helvetica, Verdana !important">mmm</span>
<span class="font family_Verdana" style="font-family: Verdana, Arial !important">mmm</span>
<span class="font family_Times_New_Roman" style="font-family: Times New Roman, Arial !important">mmm</span>
</div>
</body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
var fontMeasures = new Array( );
//Web safe
fontMeasures["Arial"] = new Array( "30px", "13px" );
fontMeasures["Comics_Sans_MS"] = new Array( "27px" , "14px" );
fontMeasures["Georgia"] = new Array( "33px" , "13px" );
fontMeasures["Helvetica"] = new Array( "30px" , "13px" );
fontMeasures["Verdana"] = new Array( "36px" , "12px" );
fontMeasures["Times_New_Roman"] = new Array( "27px" , "12px" );
var msg = "";
$( ".font" , "#font_detector_box" ).each( function( ){
var fontFamily = $( this ).attr( "class" ).toString( ).replace( "font " , "" ).replace( "family_" , "" );
var width = $( this ).css( "width" );
var height = $( this ).css( "height" );
//alert( width + height );
if( fontMeasures[fontFamily][0] === width && fontMeasures[fontFamily][1] === height ){
var family = fontFamily.replace( /_/g , " " );
msg += '<span class="font-family: '+ family + ';">' + family + '</span> <br/>';
}
});
$( "#font_list_display" ).html( msg );
</script>
</html>