Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Fri 18 Apr 2014, 08:51
All times are UTC - 4
 Forum index » Advanced Topics » Puppy Projects » Localization Project
localizing html documents
Moderators: Lobster, MU, raffy
Post new topic   Reply to topic View previous topic :: View next topic
Page 1 of 2 [16 Posts]   Goto page: 1, 2 Next
Author Message
technosaurus


Joined: 18 May 2008
Posts: 4134

PostPosted: Sun 25 Nov 2012, 21:45    Post subject:  localizing html documents  

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:
<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:
<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:
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:
<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:
<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:
<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:
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:
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:
{"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:
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)

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4134

PostPosted: Mon 26 Nov 2012, 02:30    Post subject:  

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

for example:
Code:
/* 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

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2473
Location: Burghaslach, Germany somewhere also known as "Hosla"

PostPosted: Mon 26 Nov 2012, 12:10    Post subject: localizing html documents
Subject description: home for all puppies built from woof2
 

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[i].id)
if (term) term.innerHTML=items[i].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:

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

...and....
Code:
sed -i "s/DISTRO_NAME/$DISTRO_NAME/" home-raw-en-de.js
home.js.png
 Description   The home of all woof2 built puppies
 Filesize   58.64 KB
 Viewed   728 Time(s)

home.js.png

Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4134

PostPosted: Mon 26 Nov 2012, 15:03    Post subject:  

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)

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2473
Location: Burghaslach, Germany somewhere also known as "Hosla"

PostPosted: Tue 27 Nov 2012, 16:26    Post subject: localizing html documents
Subject description: puppy home
 

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 Smile )
Quote:
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
}
}
home-raw-i18n.tar.gz
Description  home-raw.htm
home-raw-en.js (template for translations)
home-raw-de.js (german translation)
gz

 Download 
Filename  home-raw-i18n.tar.gz 
Filesize  3.63 KB 
Downloaded  406 Time(s) 
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4134

PostPosted: Tue 27 Nov 2012, 19:26    Post subject:  

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:
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

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2473
Location: Burghaslach, Germany somewhere also known as "Hosla"

PostPosted: Wed 28 Nov 2012, 17:25    Post subject: change style with javascript  

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[i].style.margin = '-78px 2em 0 0' //
dd[i].style.padding = '1em 48px 1em 0' //
}
//
}

swap right-left for : border, float, clear, margin, padding
would be really nice to have. Wink
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4134

PostPosted: Thu 29 Nov 2012, 04:34    Post subject:  

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:
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}

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2473
Location: Burghaslach, Germany somewhere also known as "Hosla"

PostPosted: Thu 29 Nov 2012, 10:30    Post subject: localizing html documents
Subject description: one class for changinging of direction
 

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.

Quote:
... for whatever reason that is not a standard function...
There is one reason:
An id is an id for (exactly one) item Smile
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
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4134

PostPosted: Thu 29 Nov 2012, 12:51    Post subject:  

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

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2473
Location: Burghaslach, Germany somewhere also known as "Hosla"

PostPosted: Thu 29 Nov 2012, 16:31    Post subject: localizing html documents
Subject description: some progress with my javascript
 

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
woof_home.tar.gz
Description  again:
home-raw.htm
home-raw-em.js template for translation
home-raw-de.js german translation
gz

 Download 
Filename  woof_home.tar.gz 
Filesize  4.15 KB 
Downloaded  387 Time(s) 
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2473
Location: Burghaslach, Germany somewhere also known as "Hosla"

PostPosted: Fri 30 Nov 2012, 13:46    Post subject: Re: localizing html documents
Subject description: some more progress with my javascript
 

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
woof2-home.tar.gz
Description 
gz

 Download 
Filename  woof2-home.tar.gz 
Filesize  4.1 KB 
Downloaded  401 Time(s) 
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4134

PostPosted: Sat 01 Dec 2012, 00:29    Post subject:  

Sorry, still doing work on the backend
in case we need to check for a font that supports the locale:
Code:
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:
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"]

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2473
Location: Burghaslach, Germany somewhere also known as "Hosla"

PostPosted: Mon 03 Dec 2012, 15:09    Post subject: localizing html documents
Subject description: javasycript
 

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
home-raw_i18n_js.png
 Description   made in slacko5.4
 Filesize   54.77 KB
 Viewed   563 Time(s)

home-raw_i18n_js.png

home-raw.tar.gz
Description  again:
home-raw.htm
home-raw-em.js template for translation
home-raw-de.js german translation

but all contents have been changed
gz

 Download 
Filename  home-raw.tar.gz 
Filesize  4.21 KB 
Downloaded  379 Time(s) 
Back to top
View user's profile Send private message 
BDX


Joined: 18 Jan 2012
Posts: 53
Location: Yemen,Aden

PostPosted: Sat 08 Dec 2012, 10:11    Post subject:  

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)
capture17519.png
Description 
png

 Download 
Filename  capture17519.png 
Filesize  247.16 KB 
Downloaded  404 Time(s) 

_________________
Puppy linux fact:Life is experiments......Download and try,Don't search and cry.
Back to top
View user's profile Send private message MSN Messenger 
Display posts from previous:   Sort by:   
Page 1 of 2 [16 Posts]   Goto page: 1, 2 Next
Post new topic   Reply to topic View previous topic :: View next topic
 Forum index » Advanced Topics » Puppy Projects » Localization Project
Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.1447s ][ Queries: 13 (0.0084s) ][ GZIP on ]