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

[Miles Jeong]

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

[Miles Jeong]

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;
  }
}