Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

font rendering on linux messes up letter spacing #14853

Closed
Dirgecaller opened this issue Feb 27, 2017 · 2 comments
Closed

font rendering on linux messes up letter spacing #14853

Dirgecaller opened this issue Feb 27, 2017 · 2 comments
Labels

Comments

@Dirgecaller
Copy link

@Dirgecaller Dirgecaller commented Feb 27, 2017

First off, phantomjs is amazing. It has saved me so much time and has truly produced some great pdfs for my work. To all those that helped produce phantomjs...a huge thank you!

I include examples in the additional info below...mainly, note the letter spacing issues. at 16px, it's less noticeable...as you start to shrink the font though, it becomes more apparent.

Now, I did solve the problem by using an SVG version of OpenSans by converting the woff file from google thru onlinefontconverter.com (but then the text becomes unselectable in the pdf...not a huge deal to me but could be annoying to someone) I only submit this issue in the hopes that someday it gets fixed so that I can use normal font files.

  1. Which version of PhantomJS are you using? Tip: run phantomjs --version.
    2.1.1

  2. What steps will reproduce the problem?
    use a web font like Open Sans from google
    produce html output that uses the font at 16px and then another paragraph at a smaller font size.

  3. Which operating system are you using?
    centos 6.7

  4. Did you use binary PhantomJS or did you compile it from source?
    binary

  5. Please provide any additional information below.
    Here is a working sample to show the problem

http://chiaroscurosantafe.com/pdf/bugged-font.php
produces
http://chiaroscurosantafe.com/pdf/bugged-font.pdf

I used the following rasterize.js file

"use strict";
var page = require('webpage').create(),
    system = require('system'),
    address, output, size, pageWidth, pageHeight;

if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
    console.log('  image (png/jpg output) examples: "1920px" entire page, window width 1920px');
    console.log('                                   "800px*600px" window, clipped to 800x600');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
        size = system.args[3].split('*');
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
                                             : { format: system.args[3], orientation: 'portrait', margin: '0px' };
    } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
        size = system.args[3].split('*');
        if (size.length === 2) {
            pageWidth = parseInt(size[0], 10);
            pageHeight = parseInt(size[1], 10);
            page.viewportSize = { width: pageWidth, height: pageHeight };
            page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
        } else {
            console.log("size:", system.args[3]);
            pageWidth = parseInt(system.args[3], 10);
            pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
            console.log ("pageHeight:",pageHeight);
            page.viewportSize = { width: pageWidth, height: pageHeight };
        }
    }
    if (system.args.length > 4) {
        page.zoomFactor = system.args[4];
    }
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit(1);
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

and I used the following command line
phantomjs rasterize.js 'http://chiaroscurosantafe.com/pdf/bugged-font.php' bugged-font.pdf Letter 1.0

@gabrielbutacu

This comment has been minimized.

Copy link

@gabrielbutacu gabrielbutacu commented Jan 26, 2018

I'm struggle with the same issue for so long...How did you load the svg exaclty?? Because for me even with the svg version of the fonts I have the same issue :((

@stale stale bot added the stale label Dec 25, 2019
@stale

This comment has been minimized.

Copy link

@stale stale bot commented Dec 28, 2019

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!

@stale stale bot closed this Dec 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.