Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2012-07-30 16:09:27

Dragondz
Moderator
From: Algérie
Registered: 2005-06-12
Posts: 1,538
Website GitHub Twitter

Remora_arabic : textpattern admin theme for rtl langage

Hi here is a Remora_arabic admin theme for the upcoming textpattern 4.5 version.

The theme is done by Yasmine a junior software ingeneer and tweeked by me.

Like it s name suggests it s a theme based on remora theme that is modified to work with arabic lang (but can work with others rtl lang) the main change is by adding lang: rtl and change of font from verdana to Tahoma (more readable in arabic) and some minor adjustments.

grab it here: Remora_arabic

Tests it and report back if there is something to fix.

You need to grab textpattern 4.5 (svn, nightly build or beta) to tests it.

you can instalkl it manually by decompressing it into textpattern admin theme directory or by using smd_admin_themes

Enjoy.

Cheers.

Offline

#2 2012-07-30 16:43:21

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Remora_arabic : textpattern admin theme for rtl langage

Cool. Is there any of this we can maybe work into the default themes themselves, so they work ‘out-of-the-box’ with RTL languages?

I have to admit, I’ve never done any work with RTL languages before so this all new ground for me.

Offline

#3 2012-07-30 17:41:06

Gocom
Developer Emeritus
From: Helsinki, Finland
Registered: 2006-07-14
Posts: 4,533
Website

Re: Remora_arabic : textpattern admin theme for rtl langage

Core supports language direction changing out of the box, adding it to CSS file shouldn’t be necessary. The direction is set by the active language, and can be changed by adding lang_dir string to the translation. The string takes a value of rtl or ltr. On the admin-side direction is supplied to the client by a dir attribute defined in the <html> tag.

philwareham wrote:

so they work ‘out-of-the-box’ with RTL languages?

From theme standpoint, a thing that might help (lot?), while keeping overall styling the same, is to provide font overrides. Along the lines of:

html[dir="rtl"] body {
	direction: rtl;
}
html[dir="ltr"] body {
	direction: ltr;
}
html[lang="ar-dz"] * {
	font-family: Tahoma;
}
html[lang="ja-jp"] * {
	font-family: "MS Gothic", Osaka;
	font-weight: normal;
}
html[lang="ko-kr"] * {
	font-family: GulimChe, Gulim;
	font-weight: normal;
}
html[lang="zh-cn"] * {
	font-family: SimHei;
	font-weight: normal;
}
html[lang="zh-tw"] * {
	font-family: PMingLiU;
	font-weight: normal;
}

Yep, overriding fonts. Meaning all fonts, even some cool looking bold web fonts used for headings. Same does apply to the public-facing theme.

Last edited by Gocom (2012-07-30 18:11:12)

Offline

#4 2012-07-30 21:32:32

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Remora_arabic : textpattern admin theme for rtl langage

OK Jukka, I’ve added this to the front-side theme on GitHub

Can you, or somebody, please download the zip and give it some testing, then give me feedback on this change – if all works out I’ll also add to admin themes.

Download from here

Last edited by philwareham (2012-07-30 21:32:42)

Offline

#5 2012-07-30 23:10:20

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,207
Website

Re: Remora_arabic : textpattern admin theme for rtl langage

Fwiw, you don’t need the html[dir="rtl"] body {} That is the default behaviour in all browsers. Once the dir attribute is set correctly on the root element, it cascades through the whole Dom tree (some RTL languages set it incorrectly, unfortunately).

What you may need is overriding a text-align: left to text-align-right when specified, and same for float, absolute positioning based on top left coordinates. My kingdom for text-align: start and similar – css3 text, sigh)
(Have a look at what I do in the sandspaces4 stylesheet).

The font per language overrides might be needed, although most browsers do a pretty good job at fall back nowadays.

Heck you could even do something like this:

body { font-family: 'Western font', 'Japanese font', 'Chinese Font', 'other language font', sans-serif; }

Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#6 2012-07-31 00:39:40

Gocom
Developer Emeritus
From: Helsinki, Finland
Registered: 2006-07-14
Posts: 4,533
Website

Re: Remora_arabic : textpattern admin theme for rtl langage

Phil, please note that what I posted, that snippet, is an example. Hence the unrequited direction rule (which I mentioned with the <html> dir attribute). I don’t write or read any rtl language, so I’m the wrong person to actually be checking validity of something or how some language looks like. I’m professional uneducated idiot, unfortunately. My any knowledge of anything is limited to comics which is why I know few font names and such.

phiw13 wrote:

The font per language overrides might be needed, although most browsers do a pretty good job at fall back nowadays.

It works things as symbols, that’s for sure. A character not present will use the correct-er fallback font for the most part. But the thing is, everything will be using the first option if it’s considered valid (for the specific character). Browsers do not jump fonts if present, and the defaults are not always the most readable. You may end up seeing mix of multiple typefaces where the primary option is used for everything western. That’s at least what Firefox should do. Firefox also does its own font styling (i.e. bold, italics) if not provided by the font. Which is great feature, but usually doesn’t make things more readable.

Last edited by Gocom (2012-07-31 00:41:40)

Offline

#7 2012-07-31 09:18:28

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,207
Website

Re: Remora_arabic : textpattern admin theme for rtl langage

Gocom wrote:

Firefox also does its own font styling (i.e. bold, italics) if not provided by the font. Which is great feature, but usually doesn’t make things more readable.

Yeah most browsers do that with sometimes disastrous results, and that is why you should choose your fonts wisely… But anyway.
There are good reason to have separate ruleblocks for each language: namely font-size (CJK fonts are much larger in appearance than ‘western’ fonts, or Arabic fonts).

@ Dragondz

You should update the language file for Arabic, the one currently available is severely outdated and has errors. Je suis sure que cela fera plaisir a beaucoup d’utilisateurs.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#8 2012-07-31 10:13:28

Dragondz
Moderator
From: Algérie
Registered: 2005-06-12
Posts: 1,538
Website GitHub Twitter

Re: Remora_arabic : textpattern admin theme for rtl langage

I will try to update the language as soon as possible.

Offline

#9 2012-07-31 11:48:02

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Remora_arabic : textpattern admin theme for rtl langage

So, can I have a definitive answer on this from someone more knowledgeable than I.

I’ve removed the RTL and LTR rules now from Gocom’s example. What about the special font rules, are they OK to use or are they unnecessary too?

Offline

#10 2012-07-31 12:14:41

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,207
Website

Re: Remora_arabic : textpattern admin theme for rtl langage

philwareham wrote:

I’ve removed the RTL and LTR rules now from Gocom’s example. What about the special font rules, are they OK to use or are they unnecessary too?

They don’t hurt, although I wouldn’t use the html[lang="ja-jp"] as is.
(and looking close, remove the universal selector everywhere. Just set the font-family on the root element, it will cascade through. But you know that :-p)

html[lang="ja-jp"] {
	font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
	font-size: .75em /* 12px should be ok for the font-sizes set in the default TXP themes */
	line-height: 1.6;
}

Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#11 2012-07-31 13:04:13

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Remora_arabic : textpattern admin theme for rtl langage

OK, I’ve made these changes as suggested. Is that OK to put into SVN and the admin themes now?

Offline

#12 2012-07-31 15:13:39

Gocom
Developer Emeritus
From: Helsinki, Finland
Registered: 2006-07-14
Posts: 4,533
Website

Re: Remora_arabic : textpattern admin theme for rtl langage

phiw13 wrote:

and looking close, remove the universal selector everywhere. Just set the font-family on the root element, it will cascade through

Yes it does cascade. But that doesn’t override fonts for every element. You will have to specify override rules for everything that uses a specific font-family, otherwise the browser chooses the first font from the stack that is considered appropriate. In the frontend theme I see three different fonts in use total.

  • Courier: pre, code, kbd, samp, var
  • Arial: select, optgroup, buttons, inputs
  • And the override.

Since it cascades it always uses the first font that is appropriate from the stack. I.e. Arial for anything and everything Latin. E.g. missing translation, terminology, latin options in setting fields.

Last edited by Gocom (2012-07-31 15:29:25)

Offline

Board footer

Powered by FluxBB