To achieve a specific header for the chapter

[SunilCP]

Hello Team,

I am trying to create CSS for this chapter header

image.png

I am using the following code

Code: Select all

@page chapter:first:left {
    size: A4;
    padding:0%;
    margin-top:3cm;
    margin-bottom: 2cm;
    margin-left: 1.06cm;
    margin-right: 0.81cm;
   /* border: 0.1cm dotted red;*/
  @top-left {
    content: "Chapter\A0\A0\A0\A0\A0"  string(chaptertitle)"\A0\A0\A0";
    
    background-image: url(../images/FirstPageHeaderBlock.png);
    background-repeat: no-repeat;
    background-position: 0 0.5cm;
    background-size: 100% 100%;
    margin: 0cm;
    text-align:right;
    font-weight: bold;
    font-size: 24pt;
    border: 0cm;      
  }
}
  
*[class ~= "topic/topic"][is-chapter]:not([is-part]) > *[class ~= "topic/title"] {
  string-set: chaptertitle counter(chapter);
}

The output I got was

image.png

I was able to get the required contents. But, how to have different formatting for "Chapter" and "counter of chapter" like 1, 2, 3... Because the requirement is to have font color of "Chapter" is black and the font color of "1" is white. Here is where I am stuck.

If anyone can provide the details, it will be really helpful.

[chrispitude]

Hi Sunil,

You could try the oxy_label() feature:

How to Style a Part of the Text from the Header

although it looks like there is a limitation with string() that will affect how you must apply the CSS.

[SunilCP]

Thanks, Chrispitude, for the insights.

But, the string limitation is impacting.

Both the content on the header are not static, so how to style both string content differently?

[julien_lacour]

Hello,

From the topic Chris gave you, in the same note explaining the string() limitation, there's an example on how to style the dynamic text:

You cannot use string() inside an oxy_label(). As a workaround, to apply styling on the dynamic text retrieved by a string() function you can define some overall styles for the entire page margin box and then use the oxy_label to style differently the static text.

In your case you will obtain something like:

Code: Select all

@top-left {
  color: white;
  content: oxy_label(text, "Chapter", styles, "color:black;") "\A0\A0\A0\A0\A0" string(chaptertitle) "\A0\A0\A0";
  
  background-image: url(../images/FirstPageHeaderBlock.png);
  background-repeat: no-repeat;
  background-position: 0 0.5cm;
  background-size: 100% 100%;
  text-align:right;
  font-weight: bold;
  font-size: 24pt;
  border: 0cm;      
}

Where white applies on the string(chaptertitle) and the oxy_label is black.
I suppose the "FirstPageHeaderBlock.png" image contains the red to violet line with the violet square.

Regards,
Julien

[SunilCP]

Thanks julien_lacour . I was able to reach to this. But, in another case, where there is 2 string sets (Chapter Title and Chapter Number ) which needs to be in Header and in different style. How to manage this? Because String is not allowed in oxy_path.

image.png

[SunilCP]

Any one can provide any suggestion to achieve this?

[julien_lacour]

Hello,

If your string-sets should have different styles (color, font, etc.) you can't, the only solution is to have them in different page-margin boxes (top-left and top-center for example).

Regards,
Julien

[SunilCP]

Thanks Julien for the clarity