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.

Sign up for GitHub

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

Jump to bottom

Alignment? #1016

Closed
akshaybhoendie opened this issue Jan 12, 2017 · 37 comments
Closed

Alignment? #1016

akshaybhoendie opened this issue Jan 12, 2017 · 37 comments

Comments

@akshaybhoendie
Copy link

This is a very good framework and i also use this, the only thing i would like to see is an option to align text.
@simonbengtsson
Copy link
Contributor

simonbengtsson commented Jan 12, 2017 •
edited

That would be nice indeed! In the meantime you could use the function attached below (from the jspdf-autotable plugin). It can be used like this doc.autoText("Hello", 10, 10, 'left'|'center'|'right', 'top'|'middle'|'bottom').

jsPDF.API.autoText = function (text, x, y, halign, valign) {
    if (typeof x !== 'number' || typeof y !== 'number') {
        console.error('The x and y parameters are required. Missing for the text: ', text);
    }
    let k = this.internal.scaleFactor;
    let fontSize = this.internal.getFontSize() / k;

    let splitRegex = /\r\n|\r|\n/g;
    let splitText = null;
    let lineCount = 1;
    if (valign === 'middle' || valign === 'bottom' || halign === 'center' || halign === 'right') {
        splitText = typeof text === 'string' ? text.split(splitRegex) : text;

        lineCount = splitText.length || 1;
    }

    // Align the top
    y += fontSize * (2 - FONT_ROW_RATIO);

    if (valign === 'middle')
        y -= (lineCount / 2) * fontSize * FONT_ROW_RATIO;
    else if (valign === 'bottom')
        y -= lineCount * fontSize * FONT_ROW_RATIO;

    if (halign === 'center' || halign === 'right') {
        let alignSize = fontSize;
        if (halign === 'center')
            alignSize *= 0.5;

        if (lineCount >= 1) {
            for (let iLine = 0; iLine < splitText.length; iLine++) {
                this.text(splitText[iLine], x - this.getStringUnitWidth(splitText[iLine]) * alignSize, y);
                y += fontSize;
            }
            return this;
        }
        x -= this.getStringUnitWidth(text) * alignSize;
    }

    this.text(text, x, y);

    return this;
};

@Flamenco
Copy link
Contributor

You can also use the c2d plugin. HTML Context 2d has alignment and origin parameters for text.

@akshaybhoendie
Copy link
Author

akshaybhoendie commented Jan 13, 2017 via email

@Flamenco
Copy link
Contributor

Do you need a table, or are you just using the function to align text on a single line?

@simonbengtsson
Copy link
Contributor

simonbengtsson commented Jan 13, 2017 •
edited

You can use the function directly without a table.

And you don't need to add the function to the plugin folder. You just have to include the code before you are using the function.

@Flamenco
Copy link
Contributor

I understand. If you are not working with tables there are other ways to align text.

@Flamenco
Copy link
Contributor

IIRC all the canvas text align and baseline functions are supported using the context2d API.

http://www.w3schools.com/TagS/canvas_textalign.asp
http://www.w3schools.com/tags/canvas_textbaseline.asp

@akshaybhoendie
Copy link
Author

akshaybhoendie commented Jan 13, 2017 via email

@akshaybhoendie
Copy link
Author

akshaybhoendie commented Jan 13, 2017 via email

@Flamenco
Copy link
Contributor

Flamenco commented Jan 13, 2017 •
edited

Definitely go with the autotable approach for that usecase.

@akshaybhoendie
Copy link
Author

akshaybhoendie commented Jan 13, 2017 via email

@Flamenco
Copy link
Contributor

Screenshot did not show up...

It looks like you might be able to tap into the hook, and then use the method provided by Simon to manually draw the cell right aligned when your target column is rendered.

    drawCell: function (cell, data) {},

see https://github.com/simonbengtsson/jsPDF-AutoTable#hooks

@akshaybhoendie
Copy link
Author

akshaybhoendie commented Jan 13, 2017 via email

@Flamenco
Copy link
Contributor

I'm still not seeing anything. Did you try the hook approach?

screen shot 2017-01-13 at 8 33 49 am

@akshaybhoendie
Copy link
Author

akshaybhoendie commented Jan 13, 2017 via email

@Flamenco
Copy link
Contributor

I don't have an example, but the data parameter contains the cursor position, jsPDF instance. You should be able to use the cell to get your data, and then just draw the text.

@simonbengtsson
Copy link
Contributor

If you are using autotable things becomes easy as there is a halign style. It can be used like this:

doc.autoTable(columns, rows, {
    styles: {
        halign: 'right'
    }
});

This was referenced May 23, 2017
Closed
Closed
Closed
@Uzlopak Uzlopak mentioned this issue Jun 3, 2017
Closed
@ghost
Copy link

ghost commented Sep 6, 2017

Hi,
Is there any plugin to align a text in justify?

@akshaybhoendie
Copy link
Author

akshaybhoendie commented Sep 6, 2017 via email

@gpietro
Copy link

gpietro commented Sep 12, 2017

Any idea on how to get the right Tw (word spacing) by doing:
(pageWidth - textWidth) / (numberOfWords - 1)
Thanks

https://stackoverflow.com/questions/46181066/jspdf-justify-text

@Uzlopak
Copy link
Collaborator

Uzlopak commented Sep 16, 2017

@gpietro

Like this?

var doc = new jsPDF();
doc.text('Lorem ipsum dolor sit amet, consetetur abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.', 10,10, {maxWidth: 150, align: "justify"});
doc.save("justify.pdf");

image

#1419

@Uzlopak
Copy link
Collaborator

Uzlopak commented Sep 16, 2017 •
edited

Forgot scaling... now we see a justify as expected. last line is left aligned

doc.text('Lorem ipsum dolor sit amet, consetetur abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.', 10,10, {maxWidth: 150, align: "justify"});

doc.line(160,0,160,300)

image

@gpietro
Copy link

gpietro commented Sep 29, 2017

I did solve the problem without changing the API.
Here is my pull request: #1469

@Uzlopak
Copy link
Collaborator

Uzlopak commented Sep 29, 2017

But by this, you have to specify marginright?

@gpietro
Copy link

gpietro commented Sep 29, 2017 •
edited

By default is 0, and the result is the pageWidth - x (pos). Another way could be to pass the desired width. If you have a better approach is welcome. I tried to find the best fix by changing as little as possible.

@Uzlopak
Copy link
Collaborator

Uzlopak commented Sep 29, 2017

Well I am still waiting for @MrRio to merge my pull requests or comment on them. I refactored the text function properly and it is passing all tests. It has more functionality now and works as expected. It should be possible to modify it so that i can handle e.g. bb-code or something like this to have in the text bold/cursive or links in the text.

The merge-stop is kind of sad, because I wrote the changes, because I am in need of a proper PDF-Generator for a project I want to write in few months.

@francisgbh
Copy link

francisgbh commented Oct 1, 2017 •
edited

Hi! I urgently need to have justified text in my pdf. My english level is low and I do not really understand how to justify a paragraph. A simple example:

var doc = new jsPDF({ unit: 'cm', format: 'letter' }); var text1 = 'Lorem ipsum dolor sit amet, consetetur abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'; var text2 = doc.splitTextToSize(text1, 10); doc.text(text2, 2,2); doc.save("doc.pdf");

I apply doc.splitTextToSize to see the text in several lines. I apply in my code {maxWidth: 150, align: "justify"} but does not justify the text. I will be grateful if you can help me!!!

@Uzlopak
Copy link
Collaborator

Uzlopak commented Oct 1, 2017 •
edited

I apply in my code {maxWidth: 150, align: "justify"} but does not justify the text.

Obviously, because you would have to make modifications to the code.

Replace atleast jspdf.js with this jspdf.js
https://github.com/arasabbasi/jsPDF/blob/refactor_text/jspdf.js

and then use jspdf.js, standard_fonts_metrics.js and all the other plugins you need or build your own jspdf.debug.js or jspdf.min.js

@gpietro
Copy link

gpietro commented Oct 1, 2017

@francisgbh unfortunately at the moment isn't possibile to justify text with jsPDF (that's why there still an open issue).
Me and @arasabbasi have proposed two PR to @MrRio to add this feature.
Meanwhile, you can choose to use one of the proposed solutions or implement your own.

@SilvioRamirez
Copy link

I'm sorry for my bad english. Greetings, I don't know how to use your modifications into my code for use justify text with jsPDF, I use your https://github.com/arasabbasi/jsPDF/blob/refactor_text/jspdf.js
then the original jspdf.js
later the standard_fonts_metrics.js

in my js file:

doc.text('Lorem ipsum dolor sit amet, consetetur abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.', 10,10, {maxWidth: 150, align: "justify"});

doc.line(160,0,160,300)

doc.save('testpdf.pdf');

but I still can't get the result above of the justify text..

Please, give some help here, I really need this to my project! Thank you very much!

@Uzlopak
Copy link
Collaborator

Uzlopak commented Jan 3, 2018 •
edited

Open jspdf.debug.js, find the code of the original jspdf.js and replace it with the new jspdf.js. use the manually updated jspdf.debug.js

If you need minified jspdf.min.js then minify the manually updated jspdf.debug.js

@gpietro
Copy link

gpietro commented Jan 4, 2018

@SilvioRamirez if you want to give a try at my implementation on this fork. We use it in production. The only thing you need to change is:

  • set a margin right if you want:
    new jsPDF({ marginRight: margins.right});
  • use property align: 'justify'

@Uzlopak
Copy link
Collaborator

Uzlopak commented Feb 15, 2018

Will be solved with #1433

@Uzlopak Uzlopak closed this as completed Feb 15, 2018
@simonbengtsson simonbengtsson mentioned this issue Aug 17, 2018
Closed
@voldemortkein
Copy link

Forgot scaling... now we see a justify as expected. last line is left aligned

doc.text('Lorem ipsum dolor sit amet, consetetur abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.', 10,10, {maxWidth: 150, align: "justify"});

doc.line(160,0,160,300)

image
@arasabbasi

What did you mean about "Forgot scaling... now we see a justify as expected. last line is left aligned"??

I'm trying to align a text, but the first line of text not respond to the justify but the next ones applies the justifying.

Just as you posted before, also I've read that you made a refactored jsPDF.js, that solves that, and you posted a GITHUB URL:
[(https://github.com/arasabbasi/jsPDF/blob/refactor_text/jspdf.js)]

But the link is Broken :( :(

If you can help me, would be very nice, have a good day!

@Uzlopak
Copy link
Collaborator

Uzlopak commented Jan 4, 2019

How about using latest release of jspdf?

@attilaking
Copy link

How about using latest release of jspdf?

I am using the latest one, justify works fine, but now linebreak in text won't work...
Before the update, \n worked in text. Now I can put in linebreak when the text is justified. ANy suggestions?

@aliasLenin
Copy link

tengo el mismo problema

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@Flamenco @simonbengtsson @Uzlopak @gpietro @voldemortkein @SilvioRamirez @akshaybhoendie @francisgbh @attilaking @aliasLenin