localizing html documents

For efforts in internationalising Puppy and solving problems in this area
Post Reply
Message
Author
User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

localizing html documents

#1 Post by technosaurus »

This is a tutorial on how to localize html documents with javascript. Before I go into details, here is an example html document before and after localization. Advanced techniques and notes will be in italics.

BEFORE:

Code: Select all

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head><title>My title</title>
</head>
<body>
This is the default text of string1.
This is the default text of string2.
</body</html>
AFTER:

Code: Select all

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head><title>My title</title>
<style>.txt{float:left;margin-left:10px}</style>
</head>
<body onload='setLang()'>
<div id="string1" class="txt">This is the default text of string1.</div> 
<div id="string2" class="txt">This is the default text of string2.</div>
</body></html>
<script>
	function setLang(){
		for (var i=0;i<items.length;i++){
			term=document.getElementById(items[i].id)
			if (term) term.innerHTML=items[i].value
		}
	}
	var lang=navigator.userLanguage || navigator.language;
	var script=document.createElement("script");
	script.src=document.URL+"-"+lang.substring(0,2)+".js"
	var head = document.getElementsByTagName('head')[0]
	head.insertBefore(script,head.firstChild)
</script>
AND:

Code: Select all

items=[
{"id":"string1","value":"Localized text of string1."},
{"id":"string2", "value":"Localized text of string2."}
];
One file for each supported language in the format index.html-<2-letter language code>.js

We will assume that you have an existing english web page that you are wanting to localize and that you already have it opened in your favorite text editor (not a WYSIWYG editor).

The first thing you will need to do is add the script to any appropriate section of the page
(It is designed to work from any section - first tag in head to after the entire body, so just paste it to wherever it fits best for you)

Code: Select all

<script>
	function setLang(){
		for (var i=0;i<items.length;i++){
			term=document.getElementById(items[i].id)
			if (term) term.innerHTML=items[i].value
		}
	}
	var lang=navigator.userLanguage || navigator.language;
	var script=document.createElement("script");
	script.src=document.URL+"-"+lang.substring(0,2)+".js"
	var head = document.getElementsByTagName('head')[0]
	head.insertBefore(script,head.firstChild)
</script>
(the internal code could just as easily be pasted into an existing <script> tag)

Then find the <body> tag and add onload='setLang()' to it:

Code: Select all

<body onload='setLang()'>
Next we need to find the text (or any html code) that we want to localize. We pick out the line: This is the default text of string1.
We will need to enclose it in a <div> tag with an id for that string. Since it is the first one we will use:

Code: Select all

<div id="string1">This is the default text of string1.</div>
Repeat this step for each string that you wish to localize.
Note 1: for advanced usage, you can use existing tags or add a class="..." to format them according to a predefined <style> tag
Note 2: for most browsers it acceptable to use tags other than <div>, however there is at least 1 Insanely Error-prone browser in wide usage that barfs when you try to change the innerHTML of non-<div> tags


Next we need to create a file for our translation template. It will eventually look like:

Code: Select all

items=[
{"id":"string1","value":"Localized text of string1."},
{"id":"string2", "value":"Localized text of string2."}
];
So we will create a file called <name of html file>-en.js
Note: if you want to use a different naming scheme, this is the line of the script that determined the file name:
script.src=document.URL+"-"+lang.substring(0,2)+".js"


We can start with this template:

Code: Select all

items=[
{"id":"","value":""},
{"id":"","value":""}
];
Now all we need to do is fill it in.

Hopefully you chose to give each id a similar name to make it easier to find them in your text editor (in our case we can search for: ' id="string' ) For each one we will add its id and value to our template. For the id it is a simple cut and paste, but when copying the value (the string itself), we may need to backslash escape some things (internal double quotes at a minimum) For example:

Code: Select all

{"id":"string0","value":"This is \"localized\" text"},
Notice the outside quotes for the string are _NOT_ back-slashed though.
If you are not familiar with html, it may be helpful to know a couple basics:

Code: Select all

each <tag> in your string should have a closing </tag> such as:
<br>  new line *commonly used without a closing tag
<hr>  horizontal line
<h>   header
<pre>preformatted text
<code> similar to pre but for code
<div> generic tag that can be used for anything
<a ...> used for links
(if you come across some tag you aren't sure of you can google html w3c and the tag)

Note: for advanced users it is possible "localize" things other than strings, for instance <img>, <title> <a> tags or any type of html for that matter. In fact this method can be adapted for other types of dynamic changes based on parameters besides language (browser, name, time of day...) setLang could just as easily be called updateItems

Once you have all of the strings copied over to your template, just make a copy of it for each language and translate the strings, use a service or give them to a translator (Amazon's mechanical turk is a cost effective way if it is for a commercial project or if your open source project has more cash than volunteers, maybe you are localizing so you _can_ get volunteers from those speaking other languages)
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#2 Post by technosaurus »

the previous post covers ltr languages, for rtl languagues we will need to do some css manipulations as well (todo)

for example:

Code: Select all

/* ltr */
#content {
  float: left;
  margin-right: 2px;
  padding: 1px 2px 3px 4px;
  left: 5px;
}
.info {
  text-align: right;
}

/* rtl */
#content {
  float: right;
  margin-left: 2px;
  padding: 1px 4px 3px 2px;
  right: 5px;
}
.info {
  text-align: left;
}
... I think these can be innerHTML of a <style> tag, but haven't tested yet
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

localizing html documents

#3 Post by L18L »

That is really great!
technosaurus wrote:... for rtl languagues we will need to do some css manipulations as well (todo)
...done

Though I cannot read write or understand arabic I have simulated right-to-left in german.

It is html5, validated, file size 5194B, original /usr/share/doc/home-en.htm was 6381B

upload coming soon.... [edited: and done]

The template:
home-raw-en.js wrote:items=[

{"id":"s0","value":"DISTRO_NAME Linux"},

{"id":"s1","value":"DISTRO_NAME jumping-off page"},

{"id":"s2","value":"DISTRO_NAME is a member of a large family of Puppy-Linux-based distros or "puppies". Click on any of these Internet links to find out more, interact with our vibrant community, and just plain have fun!"},

{"id":"s3","value":"Howto get<br />onto the<br />Internet"},

{"id":"s4","value":"<a href="http://www.zen45800.zen.co.uk/puppy3/index.htm">Puppy is an evolutionary operating system, based on GNU Linux. Need a simple intro? Do not click here for Lobster's Puppy slideshow, there is none"},

{"id":"s5","value":"Want detailed multi-language User Manuals, that show all aspects of setting up and using Puppy?"},
{"id":"s6","value":"Read the latest Puppy News on the community-supported Wiki News page. Find out how keen our community is!"},

{"id":"s7","value":"Read the leading-edge Developer News, maintained by Barry Kauler and updated almost-daily. Specialised categories: <a href="http://bkhome.org/blog/?viewCat=Puppy">Puppy</a>, <a href="http://bkhome.org/blog/?viewCat=Woof">Woof</a>, <a href="http://bkhome.org/blog/?viewCat=Quirky">Quirky</a>, <a href="http://bkhome.org/blog/?viewCat=Wary">Wary</a>"},

{"id":"s8","value":"Visit our Discussion Forums and be part of the vibrant Puppy community. Find answers, post questions, chat about all sorts of things"},

{"id":"s9","value":"Barry's leading-edge Developer Site has just about everything to do with setup, configuration, compiling and all the nuts-and-bolts. This is also a great getting-started site, as has many introductory web pages. Quick links: <a href="http://puppylinux.com/">Puppy</a>, <a href="http://bkhome.org/quirky/">Quirky</a>, <a href="http://bkhome.org/bacon/">BaCon</a>, <a href="http://bkhome.org/woof/">Woof</a>, <a href="http://bkhome.org/bones/">Bones</a>"},

{"id":"s14","value":"An online jumping-off place for everything Puppy-related. This site is maintained by Puppy enthusiasts ...be warned, it's catching!"},
{"id":"s15","value":"Download Puppy. Or, if on dialup consider buying a CD."},
{"id":"s16","value":"So many exciting Internet links, but don't forget that right here in DISTRO_NAME there's lots of documentation. This is also available via the 'Help' entry in the menu."}

];
Note1,
do not be afraid of some long and very long lines
These are easy to handle in geany (-->Document...wrap)

Note2,
in a browser with quick-locale-switcher you can fast and easily switch between different installed languages. (tested in firefox)

Now the javascript:
t12s.js wrote:// t12s.js.src
// use /usr/lib/locale/t12.js for running
// it is smaller, a one liner without comments
//
// use javascript for localisation of web pages
function setLang(){
for (var i=0;i<items.length;i++){
term=document.getElementById(items.id)
if (term) term.innerHTML=items.value
}
}
function basename(s){
s=s.substring(s.lastIndexOf('/')+1);
var i=s.indexOf('.');
return s.substring(0,i!=-1?i:s.length)
}
var lang=navigator.userLanguage || navigator.language;
if (lang.indexOf('_') != -1) lang=lang.substring(0,lang.indexOf('_'))
if (lang.indexOf('-') != -1) lang=lang.substring(0,lang.indexOf('-'))
//alert("lang="+lang)

var script=document.createElement("script");
script.src=basename(document.URL)+"-"+lang+".js"

script.type="text/javascript"
script.charset="UTF-8"
//alert(script.src)
var head = document.getElementsByTagName('head')[0]
head.insertBefore(script,head.firstChild)
//alert(head.innerHTML)

Note,
as there is nothing specific to the application in this script it ought to be moved elsewhere ex: /usr/lib/locale

...and the markup:
home.html wrote:<!DOCTYPE html>
<html lang="en" dir="ltr"> <-- or rtl -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" charset="UTF-8" src="t12s.js"></script>
<title id="s0">Precise Puppy Linux</title>
<style type="text/css">
body {color:black;background-color:white;}
#wrap {max-width:42em;margin:auto;}
#descr {float:left;}
html[dir=rtl] #descr {float:right;}

.teaser {width:78%;font-size:112%;margin:.5em 0;}
.teaser {float:left;}
html[dir=rtl] .teaser {float:right;}

.teaser {display:inline;font-size:112%;}
.teaser {float:left;}
html[dir=rtl] .teaser {float:right;}

h1{margin:1em;padding:0;}
h1{margin-left:0;}
h1 img {width:96px;height:96px;}
h1 img {float:left;margin-right:1em;}
html[dir=rtl] h1 img {float:right;margin-left:1em;}

div>img {border: 0px solid;width:48px;height:48px;}
div>img {float:left;margin-right:1em;}
html[dir=rtl] div>img {float:right;margin-left:1em;}

#howto #s3 {float:right;}
html[dir=rtl] #howto #s3 {float:left;}

dl {clear:both;}
dd {margin-top:-78px;padding:1em 0;font-size:112%;overflow:auto;}
dd {margin-left:2em;padding-left:48px;}
html[dir=rtl] dd {margin-right:2em;padding-right:48px;}

html[dir=rtl] dd {margin-right:2em;padding-right:48px;}

dt img {border: 0px solid;width:48px;height:48px;padding:.5em 0;}

.footer {border:2px solid black;padding:1em;width:100%;margin:2em 0 0 0;}
.footer {margin-right:2em;}

html[dir=rtl] .footer {margin-left:2em;}

.footer img {border: 0px solid ;width:48px;height:48px;}
.footer img {float:left;margin-right:2em;}
html[dir=rtl] .footer img {float:right;margin-left:2em;}
</style>

</head>
<body onload='setLang();'>
<div id="wrap">

<h1><img alt="Logo" src="/usr/share/doc/puppylogo96.png"/>
<span id="s1">Precise Puppy jumping-off page</span>
</h1>

<div id="descr">
<p id="s2" class="teaser">Precise Puppy is a member of a large family of Puppy-Linux-based distros or "puppies". Click on any of these Internet links to find out more, interact with our vibrant community, and just plain have fun!</p>
<p id="howto"><a href="HOWTO_Internet.htm">
<img alt="Help" src="/usr/local/lib/X11/pixmaps/help48.png" ></a>
<span id="s3">Howto get<br />onto the<br />Internet</span>
</p>
</div>

<dl>
<dt><a href="http://www.tmxxine.com/web/puppy3/"><img alt="Lobster" src="/usr/local/lib/X11/pixmaps/go48.png"></a></dt>
<dd id="s4"><a href="http://www.zen45800.zen.co.uk/puppy3/index.htm">Puppy is an evolutionary operating system, based on GNU Linux. Need a simple intro? Do not click here for Lobster's Puppy slideshow, there is none</a></dd>

<dt><a href="http://www.puppylinux.org/manual"><img alt="Multimedia" src="/usr/local/lib/X11/pixmaps/multimedia48.png"></a></dt>
<dd id="s5">Want detailed multi-language User Manuals, that show all aspects of setting up and using Puppy?</dd>

<dt><a href="http://www.puppylinux.org/news/"><img alt="Pupnews" src="/usr/local/lib/X11/pixmaps/pupnews48.png"></a></dt>
<dd id="s6">Read the latest Puppy News on the community-supported Wiki News page. Find out how keen our community is!</dd>

<dt><a href="http://bkhome.org/blog/"><img alt="pup" src="/usr/share/doc/pup48.jpg"></a></dt>
<dd id="s7">Read the leading-edge Developer News, maintained by Barry Kauler and updated almost-daily. Specialised categories: <a href="http://bkhome.org/blog/?viewCat=Puppy">Puppy</a>, <a href="http://bkhome.org/blog/?viewCat=Woof">Woof</a>, <a href="http://bkhome.org/blog/?viewCat=Quirky">Quirky</a>, <a href="http://bkhome.org/blog/?viewCat=Wary">Wary</a></dd>

<dt><a href="http://www.puppylinux.com/forums.htm"><img alt="Contact" src="/usr/local/lib/X11/pixmaps/chat48.png"></a></dt>
<dd id="s8">Visit our Discussion Forums and be part of the vibrant Puppy community. Find answers, post questions, chat about all sorts of things</dd>

<dt><a href="http://bkhome.org/"><img alt="pup" src="/usr/share/doc/puppylogo48.png"></a></dt>
<dd id="s9">Barry's leading-edge Developer Site has just about everything to do with setup, configuration, compiling and all the nuts-and-bolts. This is also a great getting-started site, as has many introductory web pages. Quick links: <a href="http://puppylinux.com/">Puppy</a>, <a href="http://bkhome.org/quirky/">Quirky</a>, <a href="http://bkhome.org/bacon/">BaCon</a>, <a href="http://bkhome.org/woof/">Woof</a>, <a href="http://bkhome.org/bones/">Bones</a>
</dd>

<dt><a href="http://www.puppylinux.org/"><img alt="community" src="/usr/share/doc/community48.jpg"></a></dt>
<dd id="s14">An online jumping-off place for everything Puppy-related. This site is maintained by Puppy enthusiasts ...be warned, it's catching!</dd>

<dt><a href="http://puppylinux.com/download/index.html"><img alt="Bones" src="/usr/local/lib/X11/pixmaps/puppy-bone48.gif"></a></dt>
<dd id="s15">Download Puppy. Or, if on dialup consider buying a CD.</dd>

</dl>

<div class="footer">
<a href="index.html"><img alt="Help" src="/usr/local/lib/X11/pixmaps/help48.png"></a>
<span id="s16">So many exciting Internet links, but don't forget that right here in Precise Puppy there's lots of documentation. This is also available via the 'Help' entry in the menu.</span>
</div>

</div> <!-- wrap -->
</body>
</html>


This from home-raw.htm has been prepared for precise puppy by:

Code: Select all

 . /etc/DISTRO_SPECS
sed "s/DISTRO_NAME/$DISTRO_NAME/" home-raw-en.htm >  home-en.htm
...and....

Code: Select all

sed -i "s/DISTRO_NAME/$DISTRO_NAME/" home-raw-en-de.js
Attachments
home.js.png
The home of all woof2 built puppies
(58.64 KiB) Downloaded 2938 times

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#4 Post by technosaurus »

Excellent, (I think - I don't speak arabic either) except for including the script as an include.
The source code for manipulating the objects is so small, its not worth it to include it as a separate file - especially for our online documentation. (each document request takes longer than loading ~10kb of data (varies) and cannot be minified and compressed with the main document) It makes good sense to keep the localizations in a separate file since users will only use at most 1 and it makes maintenance easier... besides including the code directly guarantees that an update to the api (which I am far from declaring as "stable") doesn't break stuff.

Note: I am actually compiling a small "Unlicensed" (basically public domain) library of javascript that is designed to be "compiled" by uglifyjs, closure, etc... (no passing functions as arguments, minimize nested includes) and for maximum compression by using common naming and ordering for maximum string match lengths. Most existing javascript libraries like jquery fail hard at this task (including 1 function pulls in almost the entire library even when compiled to eliminate unused code - its like glibc vs uclibc). I am still working on my css sprite stuff (its cut page load times by a factor of 10 to 1 on pages with a lot of small images)
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

localizing html documents

#5 Post by L18L »

technosaurus wrote:...The source code for manipulating the objects is so small, its not worth it to include it as a separate file - especially for our online documentation....
Well, I have played with markup and code and put all together.

Now the direction (rtl or ltr is defined in the script)
iso8859-1 again as UTF-8 is only in translations
begin of home-raw.htm wrote:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1"/>
<title id="s0">DISTRO_NAME Linux</title>
<script type="text/javascript">
<!--
function setLang(){
...
Note,
html is without lang=en
though it is always English even if translated !

You might play with the included function for your language (your browser's language :) )
function setDirection(lang){
// right-to-left or left-to-right
switch (lang){
case 'ar': return 'rtl'
case 'fa': return 'rtl'
case 'he': return 'rtl'
case 'yi': return 'rtl'
case 'de': return 'rtl' /* test only */
default: return 'ltr' // more info at http://www.i18nguy.com/temp/rtl.html
}
}
Attachments
home-raw-i18n.tar.gz
home-raw.htm
home-raw-en.js (template for translations)
home-raw-de.js (german translation)
(3.63 KiB) Downloaded 1099 times

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#6 Post by technosaurus »

its even simpler than that, we can just add a variable to the include file for rtl languages:
function setLang(){if (textdir){alert(textdir);//replace with rtl code}...

so the lang file would look like:

Code: Select all

items=[
{"id":"string1","value":"Localized text of string1."},
{"id":"string2", "value":"Localized text of string2."}
];
textdir="rtl";
in truth the include file could even have the code to modify the css itself instead of using a variable at all
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

change style with javascript

#7 Post by L18L »

textdir="rtl" is working nicely.
technosaurus wrote:...the include file could even have the code to modify the css itself ...
Here is what I have working so far for now:
home-raw-de.js wrote: ....
];
textdir="ltr";
textdir="rtl";

if (textdir == 'rtl'){
//alert("textdir="+textdir);
document.getElementsByTagName('html')[0].setAttribute('dir', textdir);
// swap right-left for : border, float, clear, margin, padding
// how ?
// a bit beyond my scope!
// So just what I can for now:
document.getElementById('logo').style.float = 'right'
document.getElementById('logo').style.margin = '0 0 0 1em'

document.getElementById('s1').style.float = 'right'
document.getElementById('s1').style.margin = '-90px 144px 0 0'
// ....
document.getElementById('descr').style.float = 'right'
document.getElementById('howto').style.float = 'right'
//
dd = document.getElementsByTagName('dd')
for (var i=0;i<dd.length;i++){
dd.style.margin = '-78px 2em 0 0' //
dd.style.padding = '1em 48px 1em 0' //
}
//
}

swap right-left for : border, float, clear, margin, padding
would be really nice to have. :wink:

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#8 Post by technosaurus »

maybe we should have used class instead of id for the strings in case a string occurs multiple times... in the mean time here is my attempt at getElementsById
(for whatever reason that is not a standard function but getElementsByClassName and getElementsByTagName are)

Code: Select all

function getElementsById(id){var a=[],t=document.getElementsByTagName("*")
for(var i=0;i<t.length;i++)if(t[i].id==id)a[a.length]=t[i]
return a}
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

localizing html documents

#9 Post by L18L »

technosaurus wrote:maybe we should have used class instead of id for the strings in case a string occurs multiple times...]
Good idea !
And it is this class only that has to be checked for swap of right/left.
... for whatever reason that is not a standard function...
There is one reason:
An id is an id for (exactly one) item :)
But it can serve as error checker if there are more than 1.

No problem for me to change the markup, I want it to become as simple as possible.
Just 1 rule:
-class="text" for text (direction:rtl handled by javascript)
This does not mean it has to be text, it can be img too

or
-class="float" which means direction of float is automatically changed in javascript

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#10 Post by technosaurus »

the only problem with class is that it can have multiple values, like:
class="hidden red box text"
Which was the reason I settled on id -- wasn't sure if document.getElementsByClassName("text") would find the above example, but it does
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

localizing html documents

#11 Post by L18L »

Here is new version with changed markup

Dont't know if anybody runs it.
So the purpose of this exercise:

enable translations with changed direction to right-to-left

This is simulated in home-raw-de.js by:
textdir='rtl'

AFAIK you need a browser with german langpack to run it
But I think you can copy it to your language
Attachments
woof_home.tar.gz
again:
home-raw.htm
home-raw-em.js template for translation
home-raw-de.js german translation
(4.15 KiB) Downloaded 814 times

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

Re: localizing html documents

#12 Post by L18L »

L18L wrote:...Dont't know if anybody runs it...
wow! 3 downloads!

Highlights of this next "version" (just another subdir):
- smaller style
- js is now changing left/right of margin and padding

very much "class='float'"
could inheritance make it better?

TODO: "class instead of id" for translation
Attachments
woof2-home.tar.gz
(4.1 KiB) Downloaded 830 times

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#13 Post by technosaurus »

Sorry, still doing work on the backend
in case we need to check for a font that supports the locale:

Code: Select all

function hasFont(f){var s=document.createElement("span")
s.style.fontSize="72px"
s.innerHTML="MWMWM"
s.style.visibility="hidden"
s.style.fontFamily=[(f=="monospace")?'':'monospace','sans-serif','serif']
document.body.appendChild(s)
var w=s.offsetWidth
s.style.fontFamily=[f,'monospace','sans-serif','serif']
document.body.lastChild=s
return s.offsetWidth!=w}
and an array of some fonts - not sure which for what language

Code: Select all

fontlist=["cursive","monospace","serif","sans-serif","fantasy","default",
"Arial","Arial Black","Arial Narrow","Arial Rounded MT Bold",
"Bookman Old Style","Bradley Hand ITC","Century","Century Gothic",
"Comic Sans MS","Courier","Courier New","Georgia","Gentium","Impact",
"King","Lucida Console","Lalit","Modena","Monotype Corsiva","Papyrus",
"Tahoma","TeX","Times","Times New Roman","Trebuchet MS","Verdana","Verona"]
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

localizing html documents

#14 Post by L18L »

What's new?

- class instead of id for the translatable strings (may occur multiple times)

- right/left border swapping if textdir is rtl (example: see footer)

- rtl can be made in English too (for testing or just for fun)

- code tidied
Attachments
home-raw_i18n_js.png
made in slacko5.4
(54.77 KiB) Downloaded 2727 times
home-raw.tar.gz
again:
home-raw.htm
home-raw-em.js template for translation
home-raw-de.js german translation

but all contents have been changed
(4.21 KiB) Downloaded 784 times

User avatar
BDX
Posts: 53
Joined: Wed 18 Jan 2012, 08:40
Location: Yemen,Aden

#15 Post by BDX »

I have downloaded the last pack L18L have posted. Made the changes according to his ready htm file. (I like the ready things. Translate and done, but not modify on the body of the page)
Puppy linux fact:Life is experiments......Download and try,Don't search and cry.

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

#16 Post by L18L »

BDX wrote:I have downloaded the last pack L18L have posted. Made the changes according to his ready htm file. (I like the ready things. Translate and done, but not modify on the body of the page)
Thank you for your work.
If have understood you right then you have edited the html file?

This new method we are working on is:
- copy home-raw-en.js to home-raw.ar.js
- and translate the values in home-raw.ar.js to arabic

Then the arabic translation is shown automatically in a browser with arabic language.

Post Reply