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