Forum How do I...?

how to get the string(chapter) to work

yisman
hi
im trying to have a header with chapter name , somewhat like the "fancy header" example
the chapter name is just a letter, like a dictionary/phone book (A, B,....)
problem is that all pages get a "A", and following set strings are seemingly ignored
here is my style (im putting the whole thing, just in case theres something there thats bothering prince)

<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><style type="text/css">
@media print{
@page {size: 160mm 240mm;}
@page :left {
margin-left: 2.5cm;
margin-right: .9cm;
margin-bottom: .9cm;
margin-top: 1.5cm;
@top-left {content:'my book; font-size:10px;margin-top:1cm}
@top-right {content:string(chapter) " | " counter(page); font-size:10px;margin-top:1cm}
}
@page :right {
margin-left: .9cm;
margin-right: 2.5cm;
margin-bottom: .9cm;
margin-top: 1.5cm;
@top-right {content:'my book; font-size:10px;margin-top:1cm}
@top-left {content: counter(page) " | " string(chapter); font-size:10px;margin-top:1cm}
}
.divHeader {position: fixed;text-align: center}
}
html{font-family:Tahoma}
p{margin:0px}
.section{background-color:black;color:white;margin:20px 0px 0px 0px;font-weight:bold;font-size:18px;text-align:center;padding:10px;border-radius: 10px;page-break-before: right}
.subsection{margin:15px 0px 5px 0px;font-weight:bold;font-size:18px;border-style: solid; border-width: 2px;padding:0px 10px;text-align:center;border-radius: 10px;text-shadow: 2px 2px 2px #CCCCCC}
.header{font-weight:bold;font-size:13px}
.snippet{font-size:11px;margin:4px 0px 0px 0px}
.trackTable{width:100%;font-size:9px;border-collapse:collapse;;margin:1px 0px 0px 0px}
.songSnippet{font-family:Arial;direction:rtl;font-size:10px;padding:0px;margin:0px}
.pageHeader:after {counter-increment: page; content: counter(page);font-size:10px}
h1{display: none;string-set: chapter content()}
</style></head><body style='direction:rtl'>


and interspersed in my body i have lines like
<h1>A</h1>
<h1>B</h1>
<h1>C</h1>

etc

but for some reason only the first one is recognized and my whole entire book has A|1.... A|100.... A|350 ...
never switches to "B" etc

please advise
mikeday
Hmm this issue appears to be caused by the headings having display none.

A slightly weird workaround is to apply this CSS rule:
h1 + * { string-set: chapter string(chapter) }

This will apply the string-set to the element that follows the heading (which is presumably visible) and appears to solve the problem.
yisman
hi
thanks for pointing out the issue
so what i did was, i switched the display:none to font-size:0px
got the same effect, and the headers are working great
thanks!