Oxygen XML Forum

Posted: **Thu Feb 02, 2023 9:32 am**

Hello,
I have been trying to align chapter title and no. with top border for left and right chapter pages
as following pictures.

I think that it should be handled as page headers to align text for each page side and I tried a bunch of ways with "@page :left and right" CSS rule but no luck.
Thanks in advance for any response.

- Left page

- Right page

Posted: **Wed Feb 08, 2023 11:14 am**

I solved my problem.

I created each svg images for left and right pages, and set it as background.
Then, I put chapter title at @top-left and right and chapter no. at top-left-corner and right-corner.

1. code for svg image

Code: Select all

<svg width="14.8cm" height="4.74cm" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="#fff"/>
    <line x1="0cm" y1="2.7cm" x2="14.8cm" y2="2.7cm" style="stroke:#231f20; stroke-width:0.1cm"/>
    <rect x="0cm" y="2.7cm" width="1.3cm" height="1.0cm" style="fill:#231f20;"/>
</svg>

2. @page rule

Code: Select all

@page chaptertoc:left{
  background-image: url('images/ctoc_left.svg');
  background-repeat:no-repeat;
	
  @top-left {
	content: string(chaptertitle);
	vertical-align: bottom;
	font-size: 22pt;
	font-weight: bold;
	padding-bottom: 1.24cm;
	padding-left: 0.1cm;
  }
  @top-right {
	content: none;
  }
  @top-left-corner {
    content: string(chapterno);
	vertical-align: bottom;
	font-size: 22pt;
	font-weight: bold;	  
	color: #fff;
	text-align: center;
	padding-bottom: 1.24cm;
  }
}

Oxygen XML Forum

How to align chapter title and no with border for left and right pages?

How to align chapter title and no with border for left and right pages?

Re: How to align chapter title and no with border for left and right pages?