Log in / Register

Forum › How do I...?

Multiple Styles for Heading?

johnathonwright
Below, please find my attempt to create a document with a multi-line heading, where the top line is bold and the second line is not bold. I was able to do it using position:absolute, but obviously that's not going to work for multiple pages.

Is this possible?

Love the software.

thanks,
jw


<html>
<head>
<title>Some Important Title</title>

<style type="text/css">
title {
string-set: title content();
}

.chapter-heading {
string-set: chapter-heading content();
string-set: chapter-heading-with-return content() "
";
}

.fancy {
color: red;
background-color: yellow;
}
@page {
@top-left {
content: string(title) "
" string(chapter-heading-with-return) "fu";
white-space: pre-line;

}
@top-left .fancy {
color: green;
}

@top-right {
content: "something
is out there";
white-space: pre-line;
}
}

.attempt {
position: absolute;
top: -.7in;
left: 3in;
}
.attempt .line1 {
font-weight: bolder;
}
</style>
</head>

<body>

<div class="chapter">
<div class="chapter-heading"><div class="fancy">Chapter Heading</div></div>
Lorem Ipsum And Such

<div class="subchapter">
<div class="subchapter-heading">Sub Chapter Heading</div>
Yep, Lorem Ipsum is pretty cool. But enough about me.
</div>
</div>

<div class="attempt">
<div class="line1">
Line1
</div>

<div class="line2">
Line2
</div>
</div>
</body>
</html>
johnathonwright
I attempted to include the file as an attachment with a variety of extensions, but the site kept telling me that was a potential attack vector....
mikeday
You can use named flows to move an entire block into a header or footer.
johnathonwright
I'm fairly sure I already have something like that working. The question is how to use CSS to style elements in the header so that I can have the top line ... say ... in red and the second line in blue.
mikeday
You can't do this with string-set and generated content, you need to style an element in the document, then move it to the header using "flow: static(header)" and "@page { @top { content: flow(header) } }" or similar.