RE: Floating objects

On Friday, January 14, 2000 11:22 AM, Allan Odgaard [SMTP:Duff@DIKU.DK] wrote:
> Bert Bros wrote:
>
> >>> Also take a look at the 'overflow' property of CSS2. [...]
> >> Speaking of which, is there any recommended placement of the scrollbar
> >> when
> >> this property is set to 'scroll'? [...]
> > The "recommended" way to create a scrolling box is to use whatever the
> > user prefers; and if you don't know that, then use the standard way
> > for the windowing system you're programming for.
>
> I'd really appreciate a property to decide the placement. The reason is that
> a
> user setting would affect all scroll-boxes, and my HTML/CSS 'engine' is put
> into a gadget (or widget as some prefer) and used in other programs like a
> news-agent, which marks-up the displayed text in classes like 'quoted',
> 'signature' etc. -- the user of the news-agent can then supply his own
> stylesheet, and a nice setting for quoted text could be:
>
>    Div.quoted { height: 3em;
>                 overflow: auto;
>                 x-scrollbar: left;
>                 ... }
>
> I.e. to limit the amount of quoted text to 3 lines max, and provide a
> scrollbar
> if more text exists. However, the scrollbar generally goes to the right
> (where
> it looks best) but for this box it should be placed to the left.  Another
> missing property is one that says that the box should display the bottom-most
> contents (so that it's the last lines of the quoted text which is visible by
> default)
I wrote a nice little hack for this over a year ago.  Reverse the 
bidirectionality of your box,
	DIV.quoted {direction:rtl}
then put it back for for all its children.
	DIV.quoted * {direction:ltr}
This works in IE4+, though it has the artifact of rendering the placement of 
the box starting at right, which I don't think is correct.  I pasted a working 
demo below.

Regards -David

<html><head><title>Left Scrollbar Demo</title>
<head><style type="text/css">
BODY {direction:ltr}
DIV.quoted {direction:rtl;overflow:auto;padding:0.5em;width:10em;height:5em}
DIV.quoted * {direction:ltr}
</style></head>
<body>
<div class="quoted" style="width:10em;height:4em;">
<p>By reversing the bidirectionality setting of a box, the scrollbar renders on 
the opposite side.
</p>
</div>
</body></html>

Received on Thursday, 20 January 2000 11:57:15 UTC