Positioning a long line by a short spanned section

G'day everyone

Please tell me the following is possible using CSS positioning (it'll
make my day). I want to position a long line of text on the screen so
that a certain portion of it is in the middle of the screen. This
would be for a concordancer and we want to use HTML for the output.

I was initially thinking of doing this:

This is the <span style="position:center">house</span> that Jack
built.

But then "This is the that Jack built." is against the left margin
and only "house" is in the centre of the screen.

What I want is that "house" is in the centre of the screen, but the
rest of the text must hug it so that it displays the entire sentence
as a normal sentence (and the user must be able to select and copy it
as a normal sentence). If the sentence is too long on the left or the
right, it can go off-screen... that's okay.

Ultimately, this method will be used to display a long list of
sentences with the same words in the middle in a different colour, so
that users can easily see the words in context to determine how they
are used.

Please note that my CSS skills are very basic.

Any replies are appreciated.

Thanks
Samuel (aka voetleuce aka leuce)

On 2008-01-11, Samuel Murray <leuce (AT) absamail (DOT) co.za> wrote:

G'day everyone

Please tell me the following is possible using CSS positioning (it'll
make my day). I want to position a long line of text on the screen so
that a certain portion of it is in the middle of the screen. This
would be for a concordancer and we want to use HTML for the output.

I was initially thinking of doing this:

This is the <span style="position:center">house</span> that Jack
built.

But then "This is the that Jack built." is against the left margin
and only "house" is in the centre of the screen.

What I want is that "house" is in the centre of the screen, but the
rest of the text must hug it so that it displays the entire sentence
as a normal sentence (and the user must be able to select and copy it
as a normal sentence). If the sentence is too long on the left or the
right, it can go off-screen... that's okay.

Ultimately, this method will be used to display a long list of
sentences with the same words in the middle in a different colour, so
that users can easily see the words in context to determine how they
are used.

Please note that my CSS skills are very basic.

Here are two possible ways to do this, the first of which actually
appears to work reasonably acceptably in Firefox, Opera and Konqueror. I
doubt it will work in IE. Perhaps you will have more luck with the
second version in IE (although I doubt it). You might need to resort to
JS for IE. These solutions also require doing funny things with your
markup as you will see.

Anyway, here's one way to do it:

<style type="text/css">
.container
{
display: table;
margin: 0 auto;
padding: 0;
border-spacing: 0;
}
.special
{
position: relative;
display: block;
}
.special .left, .special .right
{
position: absolute;
top: 0;
white-space: nowrap;
width: 6000px; /* anything big */

/*
* It shouldn't be necessary to set width as well as
* white-space, but it makes a slight difference in Firefox
* to the position of the text in .left-- presumably the
* rightmost edge from the point of view of right text-align
* and from the point of view of shrink-to-fit width
* calculation work out slightly different in that browser
* for some reason.
*/
}
.special .left
{
right: 0;
text-align: right;
}
.special .right
{
left: 0;
text-align: left;
}
.hide { visibility: hidden }
</style>

...

<div class="container">
<span class="special">house
<span class="left">
This is the <span class="hide">house</span>
</span>
<span class="right">
<span class="hide">house</span> that Jack built.
</span>
</span>
</div>

Now for the second way, everything is the same except the first two
selectors:

.container { text-align: center }
.special
{
position: relative;

/*
* display: inline ought to work just as well here, according
* to CSS 2.1 specifications, but support for inline containing
* blocks in browsers is very poor. Support for display:
* inline-block is also poor, but better than it is for inline
* containing blocks.
*/
display: inline-block;
}