It is not a hack to use bottom left, center and right. That is the accepted way.
Yes you can have different styles located within a footer or in this case right-top.
@right-top
{
content: flow(locator) ;
margin-left: 2em;
text-align: right ;
}
.Locator
{
text-align: center;
flow:static(locator);
}
.Locator > a
{
/* adjust padding to smaller numbers for alphabets containing more characters*/
/* top, right, bottom, left */
padding: 1em 1em 0.5em 1em;
margin: 0 ;
font-weight: normal ;
display:block ;
line-height: 0 ;
font-size: 10pt ;
}
.Current_Letter
{
color: white;
background-color: blue ;
}
<div class="Locator"><a href="#Link_To_1">'</a><a href="#Link_To_2" class="Current_Letter">a</a><a href="#Link_To_3">b</a><a href="#Link_To_4">c</a><a href="#Link_To_5">d</a><a href="#Link_To_6">e</a><a href="#Link_To_7">f</a><a href="#Link_To_8">g</a><a href="#Link_To_9">h</a><a href="#Link_To_10">i</a><a href="#Link_To_11">l</a><a href="#Link_To_12">m</a><a href="#Link_To_13">n</a><a href="#Link_To_14">o</a><a href="#Link_To_15">p</a><a href="#Link_To_16">s</a><a href="#Link_To_17">t</a><a href="#Link_To_18">w</a></div>
Just as the Current_Letter is formatted differently you can format /Page/ differently than /of/ just put it all in a DIV so you place the whole DIV in flow.
Hope this helps you achieve your goal.
Jim Albright
Wycliffe Bible Translators
- locator4.png 9.2 kB