Page 1 of 1
How to display all page header and footers to right side
Posted: Thu Jul 25, 2024 11:05 am
by youny
I am customizing my page header and footer with a css file for DITA Map PDF and here are my codes:
Code: Select all
@page :right, table-of-contents:right, chapter:right {
@top-right {
content: string(parttitle-no-prefix) " | " string(chaptertitle-no-prefix);
}
}
@page :right, table-of-contents:right, chapter:right {
@bottom-right {
content: counter(page);
}
}
However, I noticed these page headers and footers only display right on odd pages, but display left on even pages. How to customize the code to display all headers and footers to right side?
Re: How to display all page header and footers to right side
Posted: Thu Jul 25, 2024 12:05 pm
by julien_lacour
Hello,
You only define the headers/footers for the right-hand pages (see
https://developer.mozilla.org/en-US/docs/Web/CSS/:right for more information), if you want to have the same display on odd and even pages, you should define the same rules for left-hand pages by using the :left pseudo-class.
As a side note, there's no need to redefine the selector for headers and footers, you can group them:
Code: Select all
@page :right, table-of-contents:right, chapter:right {
@top-right {
content: string(parttitle-no-prefix) " | " string(chaptertitle-no-prefix);
}
@bottom-right {
content: counter(page);
}
}
This is controlled directly by the
page-margin boxes and you can define all the boxes inside the same @page at-rule (from the moment they need to be applied on the same page of course).
Regards,
Julien
Re: How to display all page header and footers to right side
Posted: Thu Jul 25, 2024 3:39 pm
by youny
julien_lacour wrote: ↑Thu Jul 25, 2024 12:05 pm
Hello,
You only define the headers/footers for the right-hand pages (see
https://developer.mozilla.org/en-US/docs/Web/CSS/:right for more information), if you want to have the same display on odd and even pages, you should define the same rules for left-hand pages by using the :left pseudo-class.
As a side note, there's no need to redefine the selector for headers and footers, you can group them:
Code: Select all
@page :right, table-of-contents:right, chapter:right {
@top-right {
content: string(parttitle-no-prefix) " | " string(chaptertitle-no-prefix);
}
@bottom-right {
content: counter(page);
}
}
This is controlled directly by the
page-margin boxes and you can define all the boxes inside the same @page at-rule (from the moment they need to be applied on the same page of course).
Regards,
Julien
Thank you for your reply and note. Yes I can also define the same rules for the left hand but is there any solution to display all to right side not left side?
Re: How to display all page header and footers to right side
Posted: Fri Jul 26, 2024 1:04 pm
by julien_lacour
Hello,
I think you are making a confusion here:
:left and
:right are the pseudo-classes that in CSS matches
left-handed or right-handed pages while
@top-right and
@bottom-right are
page-margin boxes inside those pages.
Of course you can define left-handed pages and display header and footer content on the right side:
Code: Select all
@page :left, table-of-contents:left, chapter:left{
@top-right {
content: string(parttitle-no-prefix) " | " string(chaptertitle-no-prefix);
}
@bottom-right {
content: counter(page);
}
}
Regards,
Julien
Re: How to display all page header and footers to right side
Posted: Mon Jul 29, 2024 12:41 pm
by youny
julien_lacour wrote: ↑Fri Jul 26, 2024 1:04 pm
Hello,
I think you are making a confusion here:
:left and
:right are the pseudo-classes that in CSS matches
left-handed or right-handed pages while
@top-right and
@bottom-right are
page-margin boxes inside those pages.
Of course you can define left-handed pages and display header and footer content on the right side:
Code: Select all
@page :left, table-of-contents:left, chapter:left{
@top-right {
content: string(parttitle-no-prefix) " | " string(chaptertitle-no-prefix);
}
@bottom-right {
content: counter(page);
}
}
Regards,
Julien
You're right. I solved this problem, thank you for your answers!