I'm trying a few different ways, but I can't get a pdf generated with Flying Saucer (from an html file) to show the unicode character for Indian Rupees - "₹"
This is what I have currently:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
font-family: Arial Unicode MS, Lucida Sans Unicode, Arial, verdana, arial, helvetica, sans-serif;
}
#font-face {
font-family: 'Arial Unicode MS';
src: url(arialunicodems.ttf);
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: UTF-8;
-fs-pdf-font-encoding: Identity-H;
font-weight: normal;
}
</style>
</head>
<body>
<p>We want to see a Indian Rupees symbol between the asterisks on one or more of these lines, in the PDF (if any of the symbols make it through to the PDF then we're good):</p>
<p>Using the glyph itself in the markup: * ₹ *</p>
<p>Using ₹ in the markup: * ₹ *</p>
<p>Using ₹ in the markup: * ₹ *</p>
</body>
</html>
which represents lots of different experiments, none of which have worked. The font file it refers to is sitting next to the html file version of the above.
The font itself seems to be being loaded, in that the text in the pdf file looks like Arial. It's just missing the Rupees symbol. I don't know what else to do - i'm pulling in a unicode font, and the html file itself looks fine, when viewed in the browser. When I print it out of chrome it looks fine too, so the problem is definitely with flying saucer I think.
I'm using Flying Saucer as follows:
/usr/bin/java -Djava.awt.headless=true -cp .:$FS_PATH/acts_as_flying_saucer/lib/java/bin:$FS_PATH/acts_as_flying_saucer/lib/java/jar/minium.jar:$FS_PATH/acts_as_flying_saucer/lib/java/jar/itext-paulo-155.jar:$FS_PATH/acts_as_flying_saucer/lib/java/jar/core-renderer.jar:$FS_PATH/acts_as_flying_saucer/lib/java/jar/java-getopt-1.0.13.jar Xhtml2Pdf /home/max/font_test.html /home/max/font_test.pdf
Can anyone see if I'm doing anything wrong?
I'm answering my own question here in case anyone else makes the same mistake. The answer turned out to be really simple - it's not in the font! Turns out that the "₹" symbol was only invented in 2010, and so is not present in a lot of Unicode font files, including the one I used.
It worked in the browser because the browser (Chrome) was automatically looking for it in other character sets (without me explicitly asking it to), and found it in Deja Vu Sans as it happens (the fallback for Linux Chromium).
I changed my code to use the older (but still acceptable) "₨" symbol, but a more proper fix would be to include a font that actually has the modern Rupees symbol.
Related
demo path:
https://github.com/mathjax/MathJax-demos-web/blob/master/input-tex2chtml.html
I add mathjax config:
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$']]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml-full.js"></script>
run like this:
The $ sign should not be there, but it still shows，even though the Tex grammar is right.
How do I make the $ go away? Where am I wrong? and what's the solution?
Your configuration is correct. There is a slight issue with the way you are trying to use the input field and tex2chtmlPromise via convert.
You can see that your code is working if you put your lines in the body rather than in the textarea:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width">
<title>MathJax v3 with interactive TeX input and HTML output</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {
inlineMath: [["$", "$"]]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js"></script>
</head>
<body>
Testing math:
<p>$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$</p>
</body>
</html>
For more information about your usage issue, see this GitHub Issue Delimiter not working with MathJax.tex2chtmlPromise method
"the MathJax.tex2chtmlPromise() function takes a LaTeX string as its parameter, which does not require a delimiter. [...] So if you are passing delimiters to this, they will be typeset as part of the math. There is no need for delimiters because you are identifying the math, not MathJax, and are passing it directly to the function. There is no need for delimiters, because there is no need to separate the math from the surrounding text, as you have already done that yourself."
When you use the $ delimiter in your document, your specified delimiters will be handled appropriately. The delimiters are necessary in the document body as a way to distinguish it from the surrounding text.
However, in the textarea, it is expected that the only thing the user inputs is valid Math. Given this expectation, delimiters are unexpected. When the raw input is passed to the MathJax.tex2chtmlPromise any text included will be typeset as math. Hence, why your $ signs appear as literals in your output field.
I am looking to use the source code of an email which has the desired template that i need in the Microsoft Graph API.
The standard format for this looks like so:
"message": {
"subject": "Meet for lunch?",
"body": {
"contentType": "HTML",
"content": "The new cafeteria is open."
},
The sourcecodes template that i am looking to use already has contentType etc within the code.I have tried removing contentType and content and just having the source code within the body but this still does not work. Below is start of the source code that i am looking to use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="http://www.opusenergy.com/wp-content/uploads/2016/03/Favicon-150x150.png" />
<title>Opus</title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
Any help will be greatly appreciated, Thank you.
The above payload is not what Graph API looks for. You need to specify the payload for the create message API call and the structure is given in the Graph API document. Still if you want to customize, you can do it, by making sure to modify/customize in-lines with Microsoft Graph API recommendation. Say i will put the HTML content inside the content of the Graph API call, specify the contenttype as HTML. This is the way i would start testing it make sure whether it's working or still i need to modify so that the message can show correctly in Outlook or not.
You tried the above recommendation and confirmed that it works.
If i want to send out email/template then i would first make sure it works in Word/Outlook; so that you can validate the HTML/CSS tags are working in, as i know that not all tags are not supported. Please keep this best practice and plan it accordingly. It will help you to build the template as you wish and you're guaranteed that the Outlook will show-up them as well.
I try to generate PDF using Flying Saucer for the following HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAGSwABMAAAAAtfwAAQAAAAA...zubbzBiN9B2+6bK8AAAABV9JwXgAA) format('woff');
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
body {
font-family: Roboto;
font-size: 26px;
font-weight: 300;
letter-spacing: -.03em;
}
</style>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog</p>
</body>
</html>
where the base64 font is taken from https://gist.github.com/abelaska/9c9eda70d31315f27a564be2ee490cf4
ITextRenderer renderer = new ITextRenderer();
renderer.setDocumentFromString(data);
renderer.layout();
renderer.createPDF(os);
When I check the fonts being used in the Properties from Adobe Reader, Times New Roman is listed instead of the font above.
If I use path to the font instead in the css, the PDF correctly shows the font.
src:url(/usr/local/Roboto.woff)
Can someone let me know what I am missing, or is this Flying Saucer limitation?
Flying saucer uses iText (but not the latest version) under the hood.
A lot of font and HTML related issues were solved in iText7, that was actually a large part of why we moved to iText7 in the first place.
Try pdfHTML. It's an iText7 add-on that allows you to convert HTML5 (+CSS3) to PDF. It's AGPL licensed and open source. (Or rather, we are currently in the process of open sourcing it).
https://itextpdf.com/itext7/pdfHTML
This is some example code:
// load license
LicenseKey.loadLicenseFile("path_to_license_key.xml");
// conversion
HtmlConverter.convertToPdf(
"<b>This text should be written in bold.</b>",
new PdfWriter(new File("C://users/user5733033/output.pdf"))
);
This standalone example has a DXFilter to render a gradient, it renders in quirks mode. IE10 has 'show legacy filters' set to off, I see it in the 'internet' zone. I still see the gradient?
from: http://msdn.microsoft.com/en-us/library/ie/hh801215(v=vs.85).aspx
"DirectX-based Filters and Transitions (DX filters) are obsolete in Internet Explorer 10 for webpages in the Internet Zone. "
Why does this work?
<!-- Comment before Doctype to force quirks mode in IE6/7 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><meta http-equiv="X-UA-COMPATIBLE" content="IE=5">
</head>
<style type="text/css" >
.SomeDiv
{
WIDTH: 50px;
HEIGHT: 50px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00ff00', EndColorStr='#ff0000');
}
</style>
<div class='SomeDiv'>
Hi
</div>
</html>
Obsolete does not mean removed. In this case, there are two reasons:
The comment before the doctype triggers IE5 quirksmode
The site is running in the Intranet Zone or Trusted Sites Zone
If it is inconsistently appearing in the Internet Zone, there are two reasons:
End-users can change these settings (for these document modes only) by using Internet Options to change the security settings for the zone in question. Administrators can also use Group Policy.
When I display my app on a device, the fonts, icons and buttons are unusably small. This is especially true on a tablet.
How can I easily scale up all of of my UI components?
Make sure the following meta tag is included in your app html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
If you still feel that the buttons and text are to small (which the should be a personal preference) you could always try changing the css. Add a new rule like this:
body {
font-size: 140% !important; //I believe 114% is default
}
Hope it helps.