Giter VIP home page Giter VIP logo

Comments (16)

astefanutti avatar astefanutti commented on May 29, 2024 2

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.

szpak avatar szpak commented on May 29, 2024

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.

astefanutti avatar astefanutti commented on May 29, 2024

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.

szpak avatar szpak commented on May 29, 2024

I've been using Docker image of 1.0.0.

from decktape.

szpak avatar szpak commented on May 29, 2024

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.

szpak avatar szpak commented on May 29, 2024

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

from decktape.

astefanutti avatar astefanutti commented on May 29, 2024

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.

szpak avatar szpak commented on May 29, 2024

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.

astefanutti avatar astefanutti commented on May 29, 2024

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

astefanutti avatar astefanutti commented on May 29, 2024

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

from decktape.

astefanutti avatar astefanutti commented on May 29, 2024

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.

wrzasa avatar wrzasa commented on May 29, 2024

Is there a quick workaround?

from decktape.

astefanutti avatar astefanutti commented on May 29, 2024

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

wrzasa avatar wrzasa commented on May 29, 2024

Thank you very much! Very helpful!

from decktape.

wrzasa avatar wrzasa commented on May 29, 2024

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

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

from decktape.

astefanutti avatar astefanutti commented on May 29, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.