Alignment?

[akshaybhoendie]

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]

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]

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

[akshaybhoendie]

Hi, Many thanks friend, what i basicaly need to do, are the following : - make a new JS file in the plugin folder and attach the code to it - use the doc.autoTableText("Hello", 10, 10, 'left'|'center'|'right', 'top'|'middle'|'bottom') in the code where i want the text in the autotable to be aligned. Are these the correct steps to do? Can you please correct me if i am wrong? or send the correct instructions? i am new to javascript.

…

On Thu, Jan 12, 2017 at 6:44 PM, Flamenco ***@***.***> wrote: You can also use the c2d plugin. HTML Context 2d has alignment and origin parameters for text. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1016 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXZNw51R0SI4dV3wZKt9pQydjttR-GKIks5rRp66gaJpZM4Lh_sD> .

-- MVG, Akhsaykumar Bhoendie Hannaslustweg #6 Wanica, Suriname +(597)8549488 "*It's hard enough to find an error in your code when you're looking for it; it's even harder when you've assumed your code is error-free.**"*

[Flamenco]

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

[simonbengtsson]

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]

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

[Flamenco]

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]

Ok, here is a screenshot and what i want to do is align the text in the cells right. see screenshot. [image: Inline image 1]

…

On Fri, Jan 13, 2017 at 9:24 AM, Flamenco ***@***.***> wrote: 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 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1016 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXZNwwc6q8qLUUKRfrT5XdUY_MX1n6xHks5rR20MgaJpZM4Lh_sD> .

-- MVG, Akhsaykumar Bhoendie Hannaslustweg #6 Wanica, Suriname +(597)8549488 "*It's hard enough to find an error in your code when you're looking for it; it's even harder when you've assumed your code is error-free.**"*

[akshaybhoendie]

Hi there, this may also be handy, here is the function i wrote for it: function createPDF() { var url = "/coci/report/registry/2015"; DataApiService.callApi(url,null,"GET").then(function(reportData){ if(reportData){ var doc = new jsPDF('p', 'pt'); var row = 45; addPdfHeader(doc, row, ""); /* doc.addPage(); */ doc.setFillColor(33, 150, 243); doc.printingHeaderRow = true; var columns = [ "Description", "2014", "2013", "2012","2011","2010","% t.o.v.'13" ]; var rows = []; for(var j=0; j<reportData.length; j++){ var obj = reportData[j]; if (!obj.description ) {obj.description = '';} if (!obj.year5 ) {obj.year5 = '';} if (!obj.year4 ) {obj.year4 = '';} if (!obj.year3 ) {obj.year3 = '';} if (!obj.year2 ) {obj.year2 = '';} if (!obj.year1 ) {obj.year1 = '';} if (!obj.delta ) {obj.delta = '';} /*TODO : Align data right in grid*/ var singleRow = [obj.description,obj.year5,obj.year4,obj.year3,obj.year2,obj.year1,obj.delta]; rows.push(singleRow); } doc.autoTable(columns, rows, { theme : 'grid', margin : { top : 100 } }); On Fri, Jan 13, 2017 at 9:50 AM, akshay bhoendie <akshaybhoendie@gmail.com> wrote:

…

Ok, here is a screenshot and what i want to do is align the text in the cells right. see screenshot. [image: Inline image 1] On Fri, Jan 13, 2017 at 9:24 AM, Flamenco ***@***.***> wrote: > 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 > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#1016 (comment)>, or mute > the thread > <https://github.com/notifications/unsubscribe-auth/AXZNwwc6q8qLUUKRfrT5XdUY_MX1n6xHks5rR20MgaJpZM4Lh_sD> > . > -- MVG, Akhsaykumar Bhoendie Hannaslustweg #6 Wanica, Suriname +(597)8549488 <+597%20854-9488> "*It's hard enough to find an error in your code when you're looking for it; it's even harder when you've assumed your code is error-free.**"*

-- MVG, Akhsaykumar Bhoendie Hannaslustweg #6 Wanica, Suriname +(597)8549488 "*It's hard enough to find an error in your code when you're looking for it; it's even harder when you've assumed your code is error-free.**"*

[Flamenco]

Definitely go with the autotable approach for that usecase.

[akshaybhoendie]

sir, i think that you dont understand me, i am already using autotable and want to know how the data in the cells can be aligned right. please see screenshot, i really need your help on how to align the data (text) in the cells right. thats why i sent you the screenshot and also the function. I really need your help

…

On Fri, Jan 13, 2017 at 9:56 AM, Flamenco ***@***.***> wrote: Definitely go with the autotable approach with that usecase. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1016 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXZNw02W8Y19DkXDRdUfPmqk-x0xOU7Cks5rR3SRgaJpZM4Lh_sD> .

-- MVG, Akhsaykumar Bhoendie Hannaslustweg #6 Wanica, Suriname +(597)8549488 "*It's hard enough to find an error in your code when you're looking for it; it's even harder when you've assumed your code is error-free.**"*

[Flamenco]

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]

Here the screenshot, see atachment

…

On Fri, Jan 13, 2017 at 10:26 AM, Flamenco ***@***.***> wrote: 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 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1016 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXZNw1TkiR6V8nVQnCk1nyhnpXrD0P1dks5rR3txgaJpZM4Lh_sD> .

-- MVG, Akhsaykumar Bhoendie Hannaslustweg #6 Wanica, Suriname +(597)8549488 "*It's hard enough to find an error in your code when you're looking for it; it's even harder when you've assumed your code is error-free.**"*

[Flamenco]

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

[akshaybhoendie]

oke i will send the pdf. Do you have a example of a hook?

…

On Fri, Jan 13, 2017 at 10:34 AM, Flamenco ***@***.***> wrote: I'm still not seeing anything. Did you try the hook approach? [image: screen shot 2017-01-13 at 8 33 49 am] <https://cloud.githubusercontent.com/assets/819940/21931734/0617f5e2-d96b-11e6-8fe5-c241ff00d31f.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1016 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXZNw-wvlBJ2fjGVvLj5jEFbZI1wEEqpks5rR31jgaJpZM4Lh_sD> .

-- MVG, Akhsaykumar Bhoendie Hannaslustweg #6 Wanica, Suriname +(597)8549488 "*It's hard enough to find an error in your code when you're looking for it; it's even harder when you've assumed your code is error-free.**"*