How to display all page header and footers to right side

[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?

[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

[youny]

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?

[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

[youny]

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!