Monospaced fonts are not selected with "font-family: monospace" #67

szpak · 2016-09-23T12:27:49Z

It's great that in 1.0.0 text is properly kept in PDF (#3), however I discovered an issue with monospaced fonts rendering (a variable-width font is used) . It is especially problematic with source code. The following presentation fragment in remark.js (0.12) has been rendered with old decktape and 1.0.0 (attached).

# 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
```

In a case there would be a problem with reproduce that issue I can provide complete example.

The text was updated successfully, but these errors were encountered:

szpak · 2016-09-23T12:36:15Z

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

astefanutti · 2016-09-23T12:51:41Z

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.

szpak · 2016-09-23T12:53:05Z

I've been using Docker image of 1.0.0.

szpak · 2016-09-23T12:55:51Z

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.

szpak · 2016-09-23T12:58:07Z

Maybe in my case there is a problem with used font. I will prepare a small presentation reproducing the problem.

astefanutti · 2016-09-23T13:06:49Z

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...

szpak · 2016-09-23T22:37:28Z

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>

astefanutti · 2016-09-26T12:59:04Z

"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.

astefanutti · 2016-09-29T08:58:38Z

FWIW, I can reproduce it with the default reveal.js presentation on Mac OS X.

astefanutti · 2016-09-29T19:56:40Z

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.

astefanutti · 2017-01-27T18:30:44Z

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

wrzasa · 2017-03-20T12:38:43Z

Is there a quick workaround?

astefanutti · 2017-03-20T12:57:12Z

@wrzasa if you can easily change your CSS style, one alternative is to specify the font name directly instead of the font family.

wrzasa · 2017-03-20T13:10:52Z

Thank you very much! Very helpful!

wrzasa · 2017-03-20T13:41:49Z

For anyone looking for quick workaround, this worked for me:

.reveal code {
  font-family: "DejaVu Sans Mono";
}

astefanutti · 2017-08-25T13:25:50Z

Should be fixed in version 2.0.1 that uses headless Chrome. Let me know if you still face this issue.

szpak closed this as completed Sep 23, 2016

szpak reopened this Sep 23, 2016

szpak closed this as completed Sep 23, 2016

szpak reopened this Sep 23, 2016

szpak mentioned this issue Sep 23, 2016

"SSL handshake failed" when loading fonts from Google Fonts via HTTPS #68

Closed

astefanutti changed the title ~~Monospaced fonts rendering issue with 1.0.0~~ Monospaced fonts rendering issue on Linux Sep 26, 2016

astefanutti added bug PhantomJS Linux labels Sep 26, 2016

astefanutti changed the title ~~Monospaced fonts rendering issue on Linux~~ Monospaced fonts are not selected with "font-family: monospace" Sep 29, 2016

astefanutti removed the Linux label Sep 29, 2016

astefanutti added regression bug and removed bug labels Sep 30, 2016

astefanutti self-assigned this Oct 10, 2016

astefanutti mentioned this issue Nov 30, 2016

font-family specification not honored in Docker image #79

Closed

This was referenced Feb 17, 2017

Exporting to *.pdf does not preserve Emojis gitpitch/gitpitch#44

Closed

Exporting to *.pdf does not preserve monospace font of code snippets gitpitch/gitpitch#43

Closed

utdrmac mentioned this issue Apr 25, 2017

Copy/paste of preformatted block from PDF breaks formatting #95

Closed

astefanutti added this to the 2.0.0 milestone Aug 17, 2017

astefanutti mentioned this issue Aug 21, 2017

Reveal.js presentation fails to render (ReferenceError: Can't find variable $) #101

Closed

astefanutti closed this as completed Aug 25, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Monospaced fonts are not selected with "font-family: monospace" #67

Monospaced fonts are not selected with "font-family: monospace" #67

szpak commented Sep 23, 2016 •

edited

szpak commented Sep 23, 2016

astefanutti commented Sep 23, 2016

szpak commented Sep 23, 2016 •

edited

szpak commented Sep 23, 2016

szpak commented Sep 23, 2016

astefanutti commented Sep 23, 2016

szpak commented Sep 23, 2016 •

edited

astefanutti commented Sep 26, 2016

astefanutti commented Sep 29, 2016

astefanutti commented Sep 29, 2016 •

edited

astefanutti commented Jan 27, 2017 •

edited

wrzasa commented Mar 20, 2017

astefanutti commented Mar 20, 2017

wrzasa commented Mar 20, 2017

wrzasa commented Mar 20, 2017

astefanutti commented Aug 25, 2017

Monospaced fonts are not selected with "font-family: monospace" #67

Monospaced fonts are not selected with "font-family: monospace" #67

Comments

szpak commented Sep 23, 2016 • edited

szpak commented Sep 23, 2016

astefanutti commented Sep 23, 2016

szpak commented Sep 23, 2016 • edited

szpak commented Sep 23, 2016

szpak commented Sep 23, 2016

astefanutti commented Sep 23, 2016

szpak commented Sep 23, 2016 • edited

astefanutti commented Sep 26, 2016

astefanutti commented Sep 29, 2016

astefanutti commented Sep 29, 2016 • edited

astefanutti commented Jan 27, 2017 • edited

wrzasa commented Mar 20, 2017

astefanutti commented Mar 20, 2017

wrzasa commented Mar 20, 2017

wrzasa commented Mar 20, 2017

astefanutti commented Aug 25, 2017

szpak commented Sep 23, 2016 •

edited

szpak commented Sep 23, 2016 •

edited

szpak commented Sep 23, 2016 •

edited

astefanutti commented Sep 29, 2016 •

edited

astefanutti commented Jan 27, 2017 •

edited