Comments (16)
With the minimal test case test.html
hereafter:
<html>
<head>
<title>title</title>
</head>
<style>
body {
font-family: monospace
}
</style>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Running phantomjs-osx-cocoa-x86-64 examples/rasterize.js test.html test.pdf
with the pre 1.0.0 Mac OS X binary produces
test.pdf.
Running phantomjs-osx-cocoa-x86-64 examples/rasterize.js test.html test-1.0.0.pdf
with the 1.0.0 Mac OS X binary produces
test-1.0.0.pdf.
So it's a regression introduced between astefanutti/phantomjs@cc06f44 and astefanutti/phantomjs@9462bc2. There has been the upgrade to Qt 5.6 in between. Hopefully that'll help narrowing down the analysis.
from decktape.
GitHub doesn't like my PDF files. Here's the links:
https://solidsoft.files.wordpress.com/2016/09/fixed-old.pdf
https://solidsoft.files.wordpress.com/2016/09/fixed-1-0-0.pdf
from decktape.
What exact OS do you use?
I've exported default remark.js presentation using the Docker image (Debian 8) and it seems monospaced text renders correctly - test.pdf - though that's a Web font being used.
I've noticed that for local font family, results may vary depending on the distribution. It looks like the font used in fixed-1-0-0.pdf
that gets picked up is not monospaced.
from decktape.
I've been using Docker image of 1.0.0.
from decktape.
Btw, there is something strange with font inside source code in test.pdf. E.g. on a page 15 the top of the question marks are not fully visible.
from decktape.
Maybe in my case there is a problem with used font. I will prepare a small presentation reproducing the problem.
from decktape.
Btw, there is something strange with font inside source code in test.pdf. E.g. on a page 15 the top of the question marks are not fully visible.
Slide 15 of test.pdf
renders exactly as the original for me (Preview reader on Mac OS X). That would indicate a difference at the level of the PDF reader.
Maybe in my case there is a problem with used font. I will prepare a small presentation reproducing the problem.
Great, I'll wait for that and investigate. I've already noticed that local monospaced font may render differently from a distribution to another. So lets find out what's going on...
from decktape.
I dig a little bit and it turned out that the mentioned effect occurs in the situation where there is no font explicitly defined to handle text formatted as code (i.e. just "font-family: monospace" for given CSS class is not enough). When the font is defined explicitly the rendering works fine.
In general it is a good idea to have a concrete monospaced font defined (see your issues with the official remark presentation on MacOS), however, I wonder why QT doesn't fallback to default monospaced font installed in the system? Maybe there is non in the Debian image (such as Deja Vu)?
Sample code to reproduce the issue (tested with the Docker image). Uncomment the style definition to "fix" the issue:
<!DOCTYPE html>
<html>
<head>
<title>7 reasons why bother learning Spock</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!--
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i&subset=latin-ext" rel="stylesheet">
<style type="text/css">
code { font-family: 'Roboto Mono', monospace; }
</style>
-->
</head>
<body>
<textarea id="source">
# Power Assertions - basic case
- reused Java `assert` keyword
```groovy
assert (2 + 3) * 4 != (2 * 4) + (3 * 4)
```
- self explaining reason of failure
```groovy
Assertion failed:
assert (2 + 3) * 4 != (2 * 4) + (3 * 4)
| | | | | |
5 20 false 8 20 12
```
</textarea>
<script src="js/remark-0.12.min.js" type="text/javascript">
</script>
<script type="text/javascript">
var slideshow = remark.create({
highlightStyle: 'idea',
highlightLines: 'true',
highlightSpans: 'true',
ratio: '16:9',
slideNumberFormat: ''
});
</script>
</body>
</html>
from decktape.
"Deja Vu Sans Mono" seems to be already installed on the Docker image. By installing fontconfig
and running:
# fc-match monospace
DejaVuSansMono.ttf: "DejaVu Sans Mono" "Book"
It seems that "DejaVu Sans Mono" correctly resolves for monospace
.
A quick search into PhantomJS issue tracker leads to ariya/phantomjs#11764 and ariya/phantomjs#11468. I haven't yet dig into these though that may be a start.
from decktape.
FWIW, I can reproduce it with the default reveal.js presentation on Mac OS X.
from decktape.
Following-up on #79, I've just tried with an updated Docker image, having the ttf-mscorefonts-installer
package installed in addition, and exporting an HTML page with some text styled with font-family: 'Georgia'
produces a correct result. In that case, the Georgia.ttf
font resolves:
$ fc-match 'Georgia'
Georgia.ttf: "Georgia" "Normal"
However, with font-family: serif
it fails, using a sans-serif style font to render the text in the PDF. In that case:
$ fc-match serif
DejaVuSerif.ttf: "DejaVu Serif" "Book"
So I suspect it happens whenever a generic font family is used (monospace, serif, sans-serif, ...), where it fails to pick the correct font, as resolved by Fontconfig, irrespective of the already present fonts in the image:
$ fc-list
/usr/share/fonts/truetype/dejavu/DejaVuSerif-Bold.ttf: DejaVu Serif:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf: DejaVu Sans Mono:style=Book
/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf: DejaVu Sans:style=Book
/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf: DejaVu Sans:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Bold.ttf: DejaVu Sans Mono:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSerif.ttf: DejaVu Serif:style=Book
from decktape.
Is there a quick workaround?
from decktape.
@wrzasa if you can easily change your CSS style, one alternative is to specify the font name directly instead of the font family.
from decktape.
Thank you very much! Very helpful!
from decktape.
For anyone looking for quick workaround, this worked for me:
.reveal code {
font-family: "DejaVu Sans Mono";
}
from decktape.
Should be fixed in version 2.0.1
that uses headless Chrome. Let me know if you still face this issue.
from decktape.
Related Issues (20)
- Audit warnings when installing decktape
- Add some e2e tests HOT 1
- Would you be open to financial contributions? HOT 2
- Reveal remove transition HOT 1
- Table layouts are not preserved, text boxes get combined in odd ways HOT 6
- Dependencies are not hoisted HOT 3
- Docker image error HOT 8
- Crashes with "Unable to write GSUB: script latn has no default language system" HOT 3
- Add a 2D navigation support to generic plugin
- puppeteer_dev_chrome_profile-x HOT 2
- Emojis are missing from bold text and headings in PDF HOT 1
- Images not shown in PDF output (but are correct in PNG and browser) HOT 1
- How I was able to do a multi-architecture container image build (to support ARM ... M1 macbooks) HOT 2
- Remark custom styles not applied on PDF HOT 2
- Unable to transform reveal slides usign reveal.js-menu with docker HOT 2
- Updating to decktape 3.11 caused panic HOT 3
- Converting a jupyterlab_rise presentation
- homebrew package
- Text overlaps with border on Mermaid.js diagrams in a Reveal.js presentation HOT 1
- DeckTape Container Font Bug HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from decktape.