formatting for chapter number and chapter title

[freewingwind23]

Hi,

I want my chapter number and title to display like this:

image.png

and I used the following css codes to achieve it, as a predefined template is used:

Code: Select all

/* Chapter number formatting */
*[class ~= "topic/topic"][is-chapter]:not([is-part]) > *[class ~= "topic/title"]:before {
  content: counter(chapter) ". ";
  counter-increment: chapter;
  display: inline-block;
  text-align: right;
  background-color: blue;
  color: white;
  font-size: 80pt;
  padding: 10px;
  margin-right: 10px;
}

/* Chapter title formatting */
*[class ~= "topic/topic"][is-chapter]:not([is-part]) > *[class ~= "topic/title"] {
  display: block;
  text-align: left;
  color: blue;
  font-size: 36pt;
  margin-top: 20px;
  clear: both; 
}

However, in the output pdf, the chapter is still on the same line after the chapter number. Please help me to solve this problem. Many thanks!

image.png

[julien_lacour]

Hello,

If you want to display the number on a separate line, you can change its display from inline-block to block directly.
Oxygen PDF Chemistry doesn't support the clear property yet, and using text-align: right will only move the text but not the blue rectangle (which will still be displayed on the whole page width).
Instead you could try to position the block with something like this:

Code: Select all

  position: relative;
  left: 5in;
  width: 1em;

Regards,
Julien

[freewingwind23]

Thanks a lot. It worked!

[Johnsondavid]

Hello,

If you want to display the number on a separate line, you can change its display from inline-block to block directly.
Oxygen PDF Chemistry doesn't support the clear property yet, and using text-align: right will only move the text but not the blue rectangle (which will still be displayed on the whole page width).
Instead you could try to position the block with something like this:

Code: Select all

  position: relative;
  left: 5in;
  width: 1em;

Regards,
Julien

Thanks for sharing. Geometry Dash ScratchI was having the same problem thanks to your post I was able to fix it.