I have a dictionary with a footer



A a B b C c D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z

I indicate where we are in the alphabet with [ ]

A a [ B b C c ] D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z

but client would like more emphasis on the current location with

A a [ B b C c ] D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z

or perhaps

A a [ B b C c ] D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z

I have control of the before, current, and after text. How do I change formatting within the contents:?

Jim Albright
Wycliffe Bible Translators

Can you show the CSS? Within one "content" property it is not possible to apply different text styling.

@bottom-center {
content: string(Letters_Before, first) " [ " string(Letter_Focus, first) " ] " string(Letters_After, first);
font-size: 9pt ;
}


Letters_Before would contain A a
Letter_Focus would contain B b C c
Letters_After would contain D d E e F f G g H h ..... Z z

I'm looking at removing spaces then uses @bottom-left, @bottom-center, @bottom-right
My initial test looks like it could work if there is room to print rest of alphabet.

This would have added benefit of having the letter in focus always dead center.

Jim Albright
Wycliffe Bible Translators

Right, placing the text in different margin boxes will make it possible to style them differently.

Well, don't tell my son it can't be done.
Eric put the info into a named flow and was able to format and position the info in the named flow.
See attached file for what I was looking for.

CSS:
@page {
@bottom-center {
content: flow(Locator)
...

.Locator
{
display:block;
text-align: center;
flow:static(Locator);
}

.Locator .Letter
{
padding:.25em .3em .25em .3em;

}

.Letter[class~='Current']
{
font-weight:bold;
color:White;
background-color:Blue;
}

XHTML:
<div class="Entries"
><div class="Entries_Grouped_By_Letter">D d</div><span class="Locator"><span
class="Letter">a</span><span class="Letter">b</span><span class="Letter"
>c</span><span class="Letter Current">d</span><span class="Letter"
>e</span><span class="Letter">f</span><span class="Letter">g</span><span
class="Letter">h</span><span class="Letter">i</span><span class="Letter"
>j</span><span class="Letter">k</span><span class="Letter">l</span><span
class="Letter">m</span><span class="Letter">n</span><span class="Letter"
>o</span><span class="Letter">p</span><span class="Letter">r</span><span
class="Letter">s</span><span class="Letter">t</span><span class="Letter"
>u</span><span class="Letter">v</span><span class="Letter">w</span><span
class="Letter">x</span><span class="Letter">y</span><span class="Letter"
>z</span></span></div>

Jim Albright
Wycliffe Bible Translators

1. sample locator.png‎ 2.4 kB ‎
   Sample showing it really can be done.

Nice work!

Now I would like to put the locator on the outside instead of bottom center.
Each letter has the alphabet with the letter in focus with aqua box around it.
By using absolute positioning I can show all of the letters that are in focus for this page.
.Locator
{
display:block ;
text-align: center ;
position:absolute;
right: -60pt ;
top: 20pt ;
font-family: "Charis SIL AmArea", Times New Roman"";
}

This works well for the odd number pages but not the even ones.
Any idea how to achieve something similar for the even pages?

float: outside in two column mode only moves the list to the column edge, not the page margin.
Here is the even page. We want the locator on the outside margin. (opposite margin of where it is)
And below that is locator for odd numbered page that is close to what we want.

Jim Albright
Wycliffe Bible Translators

1. locator.png‎ 86.2 kB
2. locator2.png‎ 88.4 kB

.Locator
{
display:block ;
text-align: center ;
float:outside;
font-family: "Charis SIL AmArea", Times New Roman"";
}

Maybe you can see the pieces that I am trying to combine together to achieve the desired results with this view.

Jim Albright
Wycliffe Bible Translators

1. locator3.png‎ 84.7 kB

So basically the problem is that absolute positioning cannot be adjusted depending on whether the element occurs on a left or right facing page, and with "float: inside | outside" you don't know how far to move it if it occurs inside a multi-column layout. Is there some way you can get the content out of the multi-column layout, then float it?

I think I am pushing things past the limits.

There is another solution that is easy. I just manually identify all of the Letters that are displayed on a page and fix the markup accordingly.

I was trying to see if it could be done automatically.

Thanks.

Jim Albright
Wycliffe Bible Translators

Perhaps JavaScript will make tasks like this easier in the future.