Text aligned center and continued

[diegomura]

Hi!
In react-pdf we need to render inline texts (for what we use the continued option) that can be also centered in the page. However, when both conditions are present, the render output is not correct. Is there any way to achieve this? Maybe I'm missing something.

We cannot join all strings before render them because there might be a link in the middle of the text string.

[liborm85]

Code to reproduce:

var doc = new PDFDocument();
var stream = doc.pipe(blobStream());

doc.text('Lorem ipsum', {continued: true, align: 'center'});
doc.text('Lorem ipsum', {continued: true, align: 'center'});

doc.end();
stream.on('finish', function() {
  iframe.src = stream.toBlobURL('application/pdf');
});

[paul-sanchez]

Same...

[DeanPoulin]

I just noticed this myself. I was trying to add an asterisk to the beginning of text with a larger font size than the text itself. When I set the text align center the asterisk ends up in the middle of the sentence.

Sample Code:

doc.fontSize(16)
   .text('* ', {
      align: 'center',
      continued: true
   })
   .fontSize(10)
   .text('This is text centered but the asterisk is in the center instead of beginning');

The result looks like this:

This is text centered but the asterisk*is in the center instead of beginning

Align left and justify work properly.

Align right causes the asterisk to be at the end of the text

Sample Code:

doc.fontSize(16)
   .text('* ', {
      align: 'right',
      continued: true
   })
   .fontSize(10)
   .text('This text is aligned right but the asterisk is at the end instead of beginning');

The result looks like this:

This text is aligned right but the asterisk is at the end instead of beginning*

[EpitechGuo]

quick fix #1206

[NikolaiMe]

Hey all,

I created a package to solve this issue. Maybe it helps some of you!

textbox-for-pdfkit

[jbdemonte]

issue is still there :(

[ssgabrieldev]

This is my workarownd:

const lines = [
        ['Certifica que ', name],
        ['natural de ', naturality, ', nascido a ', bornDate, ', nacionalidade ', nationality, ','],
        ['portador do Documento de Identificação Nº ', identification, ' válido até ', idValidUntil, ','],
        ['frequentou, de ', start, ' a ', end, ' com a duração total de ', duration, ' horas,'],
        ['o Curso de ', course, '.'],
    ];
    const linesMiddleDivider = [
        4.5,
        2,
        2,
        2,
        2
    ];
    let startY = 265;

    lines.forEach((line, lineIndex) => {
        const lineMiddleDivider = linesMiddleDivider[lineIndex];
        const width = doc.widthOfString(line.join('')) + 2;

        line.forEach((item, itemIndex) => {
            const isVariable = itemIndex > 0 && itemIndex % 2 !== 0;
            let color = '#FFF';

            if (lineIndex === 0 && isVariable) {
                color = '#AD9DF2';
            }

            doc
                .fontSize(12)
                .fillColor(color);

            if (itemIndex === 0) {
                doc.text(item, pageMiddle - (width / lineMiddleDivider), startY, {
                    continued: true,
                    width,
                    align: 'left',
                });

                return;
            }

            if (itemIndex > 0) {
                doc.text(item, {
                    continued: itemIndex !== line.length - 1,
                    align: 'left',
                });
            }
        });

        startY += 20;
    });

output: