hypothetical about layouts

[Eli the Bearded]

Recently I was thinking about the complications involved in
changing a site's content from one language to another. Largely
it's trivial (in the mathematical sense of the word): just
replace the content with the translated text.

But then I thought about how many designs implicitly assume a
reading direction of left-to-right as English, German, all the
Latin languages, Russian, etc, use. When changing to a language
that reads a different way, say Hebrew or Arabic, where text
reads from right-to-left, then all of the page layout is
effectively reversed.

Is there some single command or small set of commands to reverse
(in the sense of geometric reflection) everything that came
before in a style sheet?

Like I said in the subject, this is a hypothetical. I don't have
a page for which I actually need this.

Elijah
------
expects changing from top to bottom reading would need a redesign

[dorayme]

In article <eli$13030...@qz.little-neck.ny.us>,

Eli the Bearded <*@eli.users.panix.com> wrote:

> Recently I was thinking about the complications involved in
> changing a site's content from one language to another. Largely
> it's trivial (in the mathematical sense of the word): just
> replace the content with the translated text.
>
> But then I thought about how many designs implicitly assume a
> reading direction of left-to-right as English, German, all the
> Latin languages, Russian, etc, use. When changing to a language
> that reads a different way, say Hebrew or Arabic, where text
> reads from right-to-left, then all of the page layout is
> effectively reversed.
>
> Is there some single command or small set of commands to reverse
> (in the sense of geometric reflection) everything that came
> before in a style sheet?
>

There are ways to cater for right to left languages in HTML and CSS

http://www.w3.org/TR/html401/struct/dirlang.html#idx-text

http://www.w3.org/TR/CSS2/visuren.html#direction

An author who merely tried these text reversals might not be pleased
with the overall results though as floated boxes would not necessarily
automatically change or the way they are cleared (unless "both" was
used) reflected.

> Like I said in the subject, this is a hypothetical. I don't have
> a page for which I actually need this.
>

If you did, you would probably have to simply take a look and make
various different design decisions depending on the case.

--
dorayme

[Eli the Bearded]

In comp.infosystems.www.authoring.stylesheets,

dorayme <dor...@optusnet.com.au> wrote:
> Eli the Bearded <*@eli.users.panix.com> wrote:
>> Is there some single command or small set of commands to reverse
>> (in the sense of geometric reflection) everything that came
>> before in a style sheet?
> There are ways to cater for right to left languages in HTML and CSS
>
> http://www.w3.org/TR/html401/struct/dirlang.html#idx-text
>
> http://www.w3.org/TR/CSS2/visuren.html#direction
>
> An author who merely tried these text reversals might not be pleased
> with the overall results though as floated boxes would not necessarily
> automatically change or the way they are cleared (unless "both" was
> used) reflected.

Both of those pages only address ltr / rtl at the level of the
text flow within a small container. I was interested in something
on a higher level. Look at the root page on w3:

http://www.w3.org/

There are three columns. The left column has the logo, and has a
menu of subpages. The middle column has some tabs for site
divisions and then recent announcements. The right column has
other things you might be interested in, like jobs and validators.

Is there a way to take that design and mirror the columns with just
a few lines of CSS? Make the logo and subpages be on the right,
jobs and validator boxes be on the left? (I know Postscript does
this sort of thing well, a few lines can totally redfine the
coordinate system, but Postscript is much different than CSS.)

Elijah
------
and top-to-bottom orientation still would be tricky

[dorayme]

In article <eli$13030...@qz.little-neck.ny.us>,

Eli the Bearded <*@eli.users.panix.com> wrote:

> In comp.infosystems.www.authoring.stylesheets,
> dorayme <dor...@optusnet.com.au> wrote:
> > Eli the Bearded <*@eli.users.panix.com> wrote:
> >> Is there some single command or small set of commands to reverse
> >> (in the sense of geometric reflection) everything that came
> >> before in a style sheet?
> > There are ways to cater for right to left languages in HTML and CSS
> >
> > http://www.w3.org/TR/html401/struct/dirlang.html#idx-text
> >
> > http://www.w3.org/TR/CSS2/visuren.html#direction
> >
> > An author who merely tried these text reversals might not be pleased
> > with the overall results though as floated boxes would not necessarily
> > automatically change or the way they are cleared (unless "both" was
> > used) reflected.
>
> Both of those pages only address ltr / rtl at the level of the
> text flow within a small container. I was interested in something
> on a higher level. Look at the root page on w3:
>

Not necessarily a *small* container, but it is about text flow, you
are right.

> http://www.w3.org/
>
> There are three columns. The left column has the logo, and has a
> menu of subpages. The middle column has some tabs for site
> divisions and then recent announcements. The right column has
> other things you might be interested in, like jobs and validators.
>
> Is there a way to take that design and mirror the columns with just
> a few lines of CSS? Make the logo and subpages be on the right,
> jobs and validator boxes be on the left?

Not that I know of. In some cases where there are three columns and
one is floated left, another floated right and a third left to fend
for itself in the middle, a simple change in CSS can obviously switch
the ends about but in more complicated cases you just have to get down
and dirty. There is nothing I know of that can make like a 'reflect'
of a picture as in Photoshop.

--
dorayme

[Jukka K. Korpela]

2013-03-02 22:01, Eli the Bearded wrote:

> Is there a way to take that design and mirror the columns with just
> a few lines of CSS?

<shields status=on>
Yes, just use <table>. Setting dir=rtl makes columns displayed right to
left.
</shields>

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Osmo Saarikumpu]

On 2.3.2013 22:01, Eli the Bearded wrote:
> Is there a way to take that design and mirror the columns with just
> a few lines of CSS? Make the logo and subpages be on the right,
> jobs and validator boxes be on the left?

At least one (not tested) CSS way comes to mind:

1) use display table* to layout the columns and
2) add to the container:

direction:rtl;

Oops! Just one line... sorry :)

--
Best wishes, Osmo

[Jukka K. Korpela]

2013-03-03 13:48, Osmo Saarikumpu wrote:

> On 2.3.2013 22:01, Eli the Bearded wrote:
>> Is there a way to take that design and mirror the columns with just
>> a few lines of CSS? Make the logo and subpages be on the right,
>> jobs and validator boxes be on the left?
>
> At least one (not tested) CSS way comes to mind:
>
> 1) use display table* to layout the columns and
> 2) add to the container:
>
> direction:rtl;

That's the CSS counterpart of my (slightly provocative) suggestion of
using <table> (which actually works in a more cross-browser way, since
it does not require support to display: table and friends, but might
make you flamed and anathematized).

Tested with this:

<!doctype html>
<title>rtl demo</title>
<style>
body { direction: rtl; }
.main { display: table; }
.main > div { display: table-cell; }
div { border: solid 1px; }
</style>
<div class=main>
<div>First<br> column</div>
<div>Second<br>column</div>
<div>Third<br>column</div>
</div>

This also makes the content start from the right edge of body, which is
all right for right-to-left languages.

On the other hand, since writing direction is not just an optional
presentational suggestion but an inherent feature of some writing
systems, I think it should be declared in HTML, with <html dir=rtl>,
rather than in CSS.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Eli the Bearded]

In comp.infosystems.www.authoring.stylesheets,

Jukka K. Korpela <jkor...@cs.tut.fi> wrote:
> 2013-03-03 13:48, Osmo Saarikumpu wrote:

[in reply to a hypothetical of mine]

>> 1) use display table* to layout the columns and
>> 2) add to the container:
>> direction:rtl;

> Tested with this:

> body { direction: rtl; }
> .main { display: table; }
> .main > div { display: table-cell; }

Thanks. That's a very interesting response to my question.

Elijah
------
knows only a smattering of CSS's possibilities