Search code examples
htmlcsscss-selectorscss-paged-mediaantenna-house

Different CSS property values depending on @page selector

I need to display a "tab" on the right side of all :first and :right pages. The tabs must be in the same position on all pages.

This is my mock HTML:

<?xml version="1.0" encoding="UTF-8"?>
<html>
    <head/>
    <tab class="tab1">RG</tab>
    <body>
        <section>
            <p>All my content</p>.
        </section>
    </body>
</html>

Unfortunately, :first and :right pages have different margins, so the CSS below causes the tabs to be at different positions depending on the page:

@page :first {
  size: A4;
  margin-top: 72mm;
  @right-top {
    content: element(rightTab);
  }    
}
@page :right{
  size: A4;  
  margin-top: 32mm;  
  @right-top {
    content: element(rightTab);
  }
}
tab{
    position:running(rightTab);
}
.tab1{
    margin-top:50mm;
}

Is it possible to set a different value for margin-top depending on the page selector? For example, 50mm on :first pages and 90mm on :right pages?

Solution

  • No takers? Here is my take. No, it is not possible to change the value of a property depending on the page selector. Or at least, I have not found anything about it in the spec.

    It is not possible to do it at the class level, but it is of course possible to change the properties of the page depending of the selector.

    Accordingly, I changed the the page margins so that the tab is now displayed in the same location on both pages. Property margin-top on the relevant area (@right-top of @page :first) is now set to -40mm, so that the effective margin in the area is the same (72 - 40 = 32mm) both for @page :first and @page :right.

    @page :first {
  size: A4;
  margin-top: 72mm;
  @right-top {
  margin-top:-40mm;
    content: element(rightTab);
  }    
}
@page :right{
  size: A4;  
  margin-top: 32mm;  
  @right-top {
    content: element(rightTab);
  }
}
tab{
    position:running(rightTab);
}
.tab1{
    margin-top:50mm;
}

    Ok, if I had thought about it a few minutes longer I could have figured it out without posting.