wymeditor/wymeditor — Issue #329: Translatable pretty theme
Author: gyuris
Created: 2012-02-11 10:04:40+00:00
State: open

Hi Wes,
I dream something and write a proof of concept code. When we support only tag names, of course they were all in English. But I think, semantic names should be translatable.
So, here is my concept:

1. Modify CSS:

body:lang(en) p::before { content: "paragraph" }
body:lang(en) p[class]::before { content: "paragraph type \"" attr(class) "\"" }
etc...

2. Add lang attribute to all theme HTML tag.

3. Proof of concept JS code /not final :):

jQuery(function() {
jQuery('.wymeditor').wymeditor({
iframeBasePath: "../wymeditor/iframe/pretty/",
lang: 'hu',
postInit: function(wym) {
// set language; I think this should be in core for all themes:
// WYMeditor.editor.prototype.replaceStrings
wym._doc.documentElement.setAttribute("lang", "hu");
wym._doc.documentElement.setAttribute("xml:lang", "hu");
// CSS rules
var rules=[], i, item, s, db;
// I think, this should be add to core languages, for example:
// WYMeditor.TAGS.hu and add to language files. This is here just
// for working example (Hungarian).
db = [
[ ' type ' , ' - típusa: ' ],
[ 'document division', 'szakasz' ],
[ 'ordered list', 'számozás' ],
[ 'unordered list', 'felsorolás' ],
[ 'definition list', 'definíciólista' ],
[ 'list item', 'listaelem' ],
[ 'definition term', 'definíciós kifejezés' ],
[ 'definition description', 'definícióleírás' ],
[ 'paragraph', 'bekezdés' ],
[ 'heading 1' , 'címsor 1' ],
[ 'heading 2' , 'címsor 2' ],
[ 'heading 3' , 'címsor 3' ],
[ 'heading 4' , 'címsor 4' ],
[ 'heading 5' , 'címsor 5' ],
[ 'heading 6' , 'címsor 6' ],
[ 'block quotation', 'idézetblokk' ],
[ 'preformatted text', 'előformázott szöveg' ],
[ 'address or contact information', 'cím vagy elérhetőség' ],
[ 'text span', 'szövegrész' ],
[ 'strong emphasis', 'erős hangsúlyozás' ],
[ 'emphasis', 'hangsúlyozozás' ],
[ 'hyperlink', 'hiperhivatkozás' ],
[ 'abbreviation', 'rövidítés' ],
[ '"acronym', '"betűszó' ], // do not match 'acronym' in selector!
[ 'keyboard input', 'felhasználói bevitel' ],
[ 'work title', 'cím' ],
[ 'sample text', 'mintaszöveg' ],
[ 'variable', 'változó' ],
[ 'deleted text', 'törölt szöveg' ],
[ 'inserted text', 'beszúrt szöveg' ],
[ 'definition', 'definíció' ],
[ 'code fragment', 'kódrészlet' ],
[ 'superscript', 'felső index' ],
[ 'subscript', 'alsó index' ]
];
// I think, this should not part of core: If core fire setting
// lang attribute for iframe HTML, we can catch with DOMAttrModified
// event. So this shoud be part of /pretty/wymiframe.html
for (i = 0; i < wym._doc.styleSheets[0].cssRules.length; i++) {
// get all rules with -> body:lang(en) from DOM
var item = wym._doc.styleSheets[0].cssRules[i];
if (item.type == item.STYLE_RULE) {
if (item.selectorText.match(/body:lang\(en\)/i)) {
rules.push(item.cssText);
};
};
};
// convert to string
s = new String(rules);
// replace lang() pseudo selector, in real will be: DOMAttrModified->event.newValue
s = s.replace("body:lang(en)", "body:lang(hu)", "gi");
// replace db strings
for (i = 0; i < db.length; i++) s = s.replace(db[i][0], db[i][1], 'gi');
// convert back to array
rules = s.split(',');
for (i = 0; i < rules.length; i++) {
// make new CSS rules with lang:(hu)
wym._doc.styleSheets[0].insertRule(
rules[i],
wym._doc.styleSheets[0].cssRules.length);
}
}
});
});

If you accept this concept I have time to finish this weekend.