How to make a footer with left and right aligned content?

[jaads]

I want to have some text at the most left side of the footer and the page numbering at the most right, but both at the same height.
how can I accomplish this?

[dolanmiu]

Try using tab stops:

https://docx.js.org/#/usage/tab-stops

[jaads]

thanks. i just tried it but apparently it's not working.
here is my code (I'm on version 5.5.0). I also tried the paragraph below outside of a footer object, but there also not tab is displayed. In both cases the result in the docx file is just e.g. "hellopage: 2"

new Footer({
            children: [
                new Paragraph({
                    children: [
                        new TextRun({
                            text: "hello".toUpperCase(),
                            font: "Calibri",
                        }),
                        new TextRun({
                            children: ["page: ", PageNumber.CURRENT],
                            font: "Calibri",
                        }),
                    ],
                    tabStops: [
                        {
                            type: TabStopType.RIGHT,
                            position: TabStopPosition.MAX,
                        },
                    ],
                }),
            ],
        })

[aviau]

Its not working in your example because you don't have any tab.

You need something like this:

                        new ImageRun({
                            data: headerLogo,
                            transformation: {
                                width: 50,
                                height: 50,
                            }
                        }),
                        new TextRun('\t'),
                        new ImageRun({
                            data: headerText,
                            transformation: {
                                width: 105,
                                height: 50,
                            },
                        }),

[aviau]

On my end however this only works in Word, not google docs.

I wish there was something that was well supported in both viewers.

[BobPritchett]

It looks like Word uses alignment tabs, which it doesn't appear the code generates. For example,

<w:PTab Alignment="CENTER" RelativeTo="MARGIN" Leader="NONE"></w:PTab>
<w:PTab Alignment="RIGHT" RelativeTo="MARGIN" Leader="DOT"></w:PTab>

In Word you can insert these into a Header/Footer with "Insert Alignment Tab". It would be nice to have support here, so that you can center things in the header or footer without knowing the margins to calculate a center tab stop.

[BobPritchett]

I'm sorry, but I'm not seeing how... there doesn't seem to be a way to set the relativeTo attribute, and there is a distinction between tabs and PTabs that matters. The docx examples linked need a position.

With PTab and relativeTo you can set a tab to the center of the margin area and it ignores other tab stop and goes directly there. (See https://learn.microsoft.com/en-us/dotnet/api/documentformat.openxml.wordprocessing.positionaltab?view=openxml-2.8.1)

[dolanmiu]

Thanks
I’ll investigate more tomorrow

I found some additional documentation on it too:

https://c-rex.net/projects/samples/ooxml/e1/Part4/OOXML_P4_DOCX_ptab_topic_ID0EKZDQ.html

[dolanmiu]

I have done the feature. It's currently sitting in a PR!

#1852

Works pretty well. I learnt more about Tabs and Positional tabs, added more missing Run elements also, along with the PR.

[Kaishley]

Hi Dolan, when will this new feature be released to npm?

[dolanmiu]

In version 8, after #1960 is completed.