Examples of bidirectional websites

murphaph

Hello all,
our latest project seems like it will require support for Arabic to be built in from the start. I am trying to find websites that have been built from the ground up to support both left to right and right to left languages. I have ZERO experience with this so want to tread carefully.

I can find examples like the BBC but they don't appear to have used the same markup, rather they seem to have built a new frontent for their arabic version, which is exactly what we would like to avoid.

If anyone has any suggestions I'd be grateful!

Freddio

http://www.uaeyearbook.com/

... it has chinese too. The key is the collation in the database on a field by field basis

murphaph

Freddio wrote: »

http://www.uaeyearbook.com/

... it has chinese too. The key is the collation in the database on a field by field basis

Cheers for the tip.

It looks however like they've just reversed the text in the individual fields, rather than creating a truly "arabic" version of the site.

Take the logo for example: In pure arabic sites (ie, sites built in arabia for arabic speakers first and foremost) that'll almost always be on the right, the first thing an arab speaker would look at as they read right to left.

The BBC/arabic site is a good example of a site built "properly" for arabic speakers. It is a mirror image of the western version, logo, navi etc. on the right, search box on the top left-totally mirroring the western version's layout.

Unfortunately (for my purposes) the BBC has seemingly rebuilt the front end to achieve this. It looks totally different in firebug anyway. Markup is different, not just css.

I'd really like to find an example where the entire site has been flipped but the markup left (apart from dir="rtl" etc.) alone and elements pushed and pulled with css.

I can imagine it would be fairly easy using a fixed grid layout (like 960gs etc.) but we are being asked to develop a fully responsive site that scales as the browser window is made smaller/larger and of course thus scales to fit all mobiles etc. (using media queries to set certain areas to not display on smaller screens). We had settled on the semanticgs system for the responsive stuff but it doesn't seem to have things like push/pull that you'll find in static grid systems which would make it very easy to "flip" content columns.

Giblet

It's hard, as semantically, setting things rtl won't work properly for stuff like lists. So you have to abuse float:right in some instances! Which is a headache in of itself. I would tackle the in an outs of getting the content working. The responsive layout should fall into place after that. One tip, you'll at least need a "rtl" class in your html / body tag. You will most likely need some server side help to do this properly.

I have a website in development at the moment that tackles exactly this!

murphaph

Hard is an understatement!

I would fell relatively happy about being able to do it fairly semantically and relatively painlessly if we had the push/pull stuff that's in the standard grid systems like 960gs-just mark up the page as normal (with dir="" where appropriate) and then push and pull the content areas to the right location.

The system we're using however (because we need a responsive fluid layout) doesn't have this capability built in, quite possibly because the calculations start getting silly-it's already doing some cool calculations in the style (less) sheet to get the layout to scale properly as it is. Abusing floats is also not so straightforward when the grid system uses it to position blocks!

I get the feeling it's possibly simply too much to ask with the current technology and our relatively short deadline. Responive in our case means fluid scaling as well as resizing content areas etc. for smaller devices.

Is your design responsive as well Giblet? If so, in what way? Fully fluid or "responsive to a degree" (snaps to grid type responsiveness based on screen media queries etc?)

Giblet

I will have some thresholds set in media queries when drastic changes need to happen (megamenu becomes hideable iphone style nested menu at certain thresholds) , but usually, it uses a lot of percentages and min & max widths where appropriate, as well as framing certain content using overflow hidden (ie: a wide screen image can be centered and framed using overflow hidden to hide non-important areas). I wouldn't rely on less.css calculations!!! It's a nightmare! I went down that route before.

The client will have a nightmare maintaining this, and you would need a full time designer to handle change requests!

murphaph

Giblet wrote: »

I will have some thresholds set in media queries when drastic changes need to happen (megamenu becomes hideable iphone style nested menu at certain thresholds) , but usually, it uses a lot of percentages and min & max widths where appropriate, as well as framing certain content using overflow hidden (ie: a wide screen image can be centered and framed using overflow hidden to hide non-important areas). I wouldn't rely on less.css calculations!!! It's a nightmare! I went down that route before.

The client will have a nightmare maintaining this, and you would need a full time designer to handle change requests!

Yah I'm not too worried about that. If it's profitable a development team will be hired to look after it and so on-possibly/probably relaunching it if it makes good money. We don't develop for individual clients, rather internally initially and then sell the thing if it works/is profitable (incubator).

As for less.css, I'm using the semanticgs system, not performing the calculations myself. I really like the way it handles nested content: I haven't found any other frameworks that do this for fluid layouts and it's also semantic (hence the name!) so no grid_4 etc. classes as with many/most frameworks. You name the thing "sideBarNavi" or whatever and then in the less file say sideBarNavi{.column(4);} for example. I find this much more readable than the typical framework css classes.