Native Localizations - Githubissues

OpenA commented 9 years ago

Many forks are done just only for replace english words.

CyTube using jade replаcements for customize #{brandName} / #{pageTitle} but i think it's bad idea use this for locals change, and i think css implementation is better (for locals):

/*
      sync/www/css/lang.css
                              */
/* ==== GLOBAL en-US ==== */
/* navbar */
html .lacss-home:before     { content: "Home" }
html .lacss-account:before  { content: "Account" }
html .lacss-logout:before   { content: "Logout" }
html .lacss-channels:before { content: "Channels" }
html .lacss-profile:before  { content: "Profile" }
html .lacss-edit:before     { content: "Change Password/Email" }
html .lacss-login:before    { content: "Login" }
html .lacss-register:before { content: "Register" }
/* homepage */
html .lacss-public-channels:before  { content: "Public Channels" }
html .lacss-channel:before          { content: "Channel" }
html .lacss-connected:before        { content: "# Connected" }
html .lacss-now-playng:before       { content: "Now Playing" }
html .lacss-enter-channel:before    { content: "Enter Channel" }
html .lacss-new-channel-info:before { content: "New channels can be registered from the " }
html .lacss-my-chennels:before      { content: "My Channels" }
html .lacss-new-channel-info:after  { content: " page." }

/* ==== ru-RU ==== */
/* navbar */
html[lang="ru"] .lacss-home:before     { content: "Главная" }
html[lang="ru"] .lacss-account:before  { content: "Аккуант" }
html[lang="ru"] .lacss-logout:before   { content: "Выйти" }
html[lang="ru"] .lacss-channels:before { content: "Каналы" }
html[lang="ru"] .lacss-profile:before  { content: "Профиль" }
html[lang="ru"] .lacss-edit:before     { content: "Сменить Пароль/Email" }
html[lang="ru"] .lacss-login:before    { content: "Войти" }
html[lang="ru"] .lacss-register:before { content: "Регистрация" }
/* homepage */
html[lang="ru"] .lacss-public-channels:before  { content: "Публичные каналы" }
html[lang="ru"] .lacss-channel:before          { content: "Канал" }
html[lang="ru"] .lacss-connected:before        { content: "# Онлайн" }
html[lang="ru"] .lacss-now-playng:before       { content: "Смотрят" }
html[lang="ru"] .lacss-enter-channel:before    { content: "Войти в комнату" }
html[lang="ru"] .lacss-new-channel-info:before { content: "Новые каналы можно зарегистрировать на странице " }
html[lang="ru"] .lacss-my-chennels:before      { content: "настроек моих каналов" }
html[lang="ru"] .lacss-new-channel-info:after  { content: "." }

diff --git a/templates/head.jade b/templates/head.jade
index 7be37e4..bbd729c 100644
--- a/templates/head.jade
+++ b/templates/head.jade
@@ -5,6 +5,7 @@ mixin head()
   meta(name="author", content="#{siteAuthor}")

   title= siteTitle
+  link(href="/css/lang.css", rel="stylesheet")
   link(href="/css/bootstrap.css", rel="stylesheet")
   //link(href="/css/bootstrap-theme.min.css", rel="stylesheet")
   link(href="/css/sticky-footer-navbar.css", rel="stylesheet")
diff --git a/templates/index.jade b/templates/index.jade
index 3fe38da..712c78f 100644
--- a/templates/index.jade
+++ b/templates/index.jade
@@ -15,12 +15,12 @@ html(lang="en")
       section#mainpage
         .container
           .col-lg-9.col-md-9
-            h3 Public Channels
+            h3.lacss-public-channels
             table.table.table-bordered.table-striped
               thead
-                th Channel
-                th # Connected
-                th Now Playing
+                th.lacss-channel
+                th.lacss-connected
+                th.lacss-now-playng
               tbody
                 each chan in channels
                   tr
@@ -28,9 +28,10 @@ html(lang="en")
                     td= chan.usercount
                     td= chan.mediatitle
           .col-lg-3.col-md-3
-            h3 Enter Channel
+            h3.lacss-enter-channel
             input#channelname.form-control(type="text", placeholder="Channel Name")
-            p.text-muted New channels can be registered from the <a href="/account/channels">My Channels</a> page.
+            p.text-muted.lacss-new-channel-info
+              a.lacss-my-chennels(href="/account/channels")
     include footer
     mixin footer()
     script(type="text/javascript").
diff --git a/templates/nav.jade b/templates/nav.jade
index 5298100..5fb9d57 100644
--- a/templates/nav.jade
+++ b/templates/nav.jade
@@ -1,12 +1,12 @@
-- var links = { "/": "Home" }
+- var links = { "/": "" }

 mixin navlink(page, title, active)
   if active
     li.active
-      a(href=page)= title
+      a.lacss-home(href=page)= title
   else
     li
-      a(href=page)= title
+      a.lacss-home(href=page)= title

 mixin navheader()
   .navbar-header
@@ -23,18 +23,18 @@ mixin navdefaultlinks(page)
     else
       mixin navlink(p, t, false)
   li.dropdown
-    a.dropdown-toggle(href="#", data-toggle="dropdown") Account
+    a.dropdown-toggle.lacss-account(href="#", data-toggle="dropdown")
       b.caret
     ul.dropdown-menu
       if loggedIn
-        li: a(href="/logout?redirect=#{page}") Logout
+        li: a.lacss-logout(href="/logout?redirect=#{page}")
         li.divider
-        li: a(href="/account/channels") Channels
-        li: a(href="/account/profile") Profile
-        li: a(href="/account/edit") Change Password/Email
+        li: a.lacss-channels(href="/account/channels")
+        li: a.lacss-profile(href="/account/profile")
+        li: a.lacss-edit(href="/account/edit")
       else
-        li: a(href="/login") Login
-        li: a(href="/register") Register
+        li: a.lacss-login(href="/login")
+        li: a.lacss-register(href="/register")

 mixin navloginlogout(redirect)
   if loggedIn
@@ -52,7 +52,7 @@ mixin navloginform(redirect)
         input#username.form-control(type="text", name="name", placeholder="Username")
       .form-group
         input#password.form-control(type="password", name="password", placeholder="Password")
-      button#login.btn.btn-default(type="submit") Login
+      button#login.btn.btn-default.lacss-login(type="submit")

 mixin navlogoutform(redirect)
   if loginDomain == null
@@ -64,4 +64,4 @@ mixin navlogoutform(redirect)
   p#logoutform.navbar-text.pull-right
     span#welcome Welcome, #{loginName}
     span &nbsp;&middot;&nbsp;
-    a#logout.navbar-link(href="#{loginDomain}/#{url}") Logout
+    a#logout.navbar-link.lacss-logout(href="#{loginDomain}/#{url}")

Result: tv5g653g5h

Very simple
Switch locals dinamically
Very flexibility with :after :bofore pseudo classes
No need to know jade/js for adding new localizations
useless for placeholders (and maybe options selection)
only works with class (in first variant i think using something like this:

<span data-lang="chennels">
html [data-lang^="chennel"]:before {content: "Chennel"} 
html [data-lang$="s"]:after {content: "s"}

but specific attributes doesnt work for table's elements [h1 tr td th])

If I finish migrate, do you accept this implementation? /My bad english is very bad, sorry есличо

calzoneman commented 9 years ago

I think this is a step in the right direction for internationalization of CyTube. For version 4.0 I've been toying with the idea of adding internationalization for server-generated informational/error messages. The main barrier to this is finding trustworthy multilingual people to translate.

I have a couple of points to make about your proposed change:

Do all reasonably modern browsers (i.e. browsers that work with CyTube currently) support this?
Consider changing the lacss- prefix to something a little more clear in meaning. One idea is to use i18n- since "i18n" is a universally recognized shorthand for internationalization.
What would you think about altering the template to dynamically set the lang attribute based on the Accept-Language header sent by the browser? This is not something I would expect you to do before submitting a pull request, but I'd like to know what you think of it.

/My bad english is very bad, sorry есличо

No problem, you got the point across ;)

nuclearace commented 9 years ago

The lang attribute is supported by all main browsers.

calzoneman commented 9 years ago

I was referring to the CSS :before and :after rules, not the lang attribute

On Nov 18, 2014, at 13:13, Erik Little notifications@github.com wrote:

The lang attribute is supported by all main browsers.

— Reply to this email directly or view it on GitHub.

calzoneman commented 9 years ago

Another idea for the prefix name would be lc (easier to type, stands for locale).

OpenA commented 9 years ago

Another idea for the prefix name would be lc (easier to type, stands for locale).

i18n look's better in the code i think, but anyway it's your deal

:before and :after pseudo elements supports all browsers -

Firefox 3.5+
IE 8+
Safari 1.0+
Chrome 1.0+
Opera Presto
etc etc
it's CSS2.1 standart

What would you think about altering the template to dynamically set the lang attribute based on the Accept-Language header sent by the browser? This is not something I would expect you to do before submitting a pull request, but I'd like to know what you think of it.

it's need send information to the server? i dont know, but maybe better just using navigator.language ? something like this:

function getlSValue(name, def, sess) {
    var stor = sess ? sessionStorage : localStorage;
    if (name in stor) {
        var v = stor.getItem(name);
        v = v == 'false' ? false : 
            v == 'true' ? true : v;
        return v;
    } else {
        stor.setItem(name, def);
        return def;
    }
}
function setLocale(e) {
    var val = e.target.value;
    localStorage.setItem('i18n', val);
    document.documentElement.lang = val;
}
var navLang = navigator.language.split('-')[0]
document.documentElement.lang = getlSValue('i18n', navLang)

If user visit site in the first time, locales getting from the navigator.language (browser lang). If user needs to change locale, he can choose locale from the options:

//(i don't know why, but onchenge event not working without name attribute)
<select id="us-locale" name="i18n" onchenge="setLocale(event)">
    <option value="en">English</option>
    <option value="ru">Русский</option>
</select>

calzoneman commented 9 years ago

Just to follow up on this, I've started looking at localization for CyTube 4.0 (the next major release which will be a complete rewrite-- no ETA at this time), and I've decided to go with the i18n module rather than CSS-based localization.

Does not require clients to download (potentially large) CSS files containing a bunch of translations they will never use
More elegant in situations where text and HTML are mixed together (e.g. the "New channels can be registered from the My Channels page" prompt on the index page)
Less confusing to work with (__("Channel") in the template using the new method vs. th.i18n-channel using CSS)
Translations are stored in JSON files for easy editing

RblSb commented 7 years ago

@calzoneman I can somehow help? maybe it's time to do the replacement text on templates, and localization in the json file?

calzoneman commented 7 years ago

Actually I have not worked on this at all since the last comment. The previously mentioned CyTube 4.0 is a defunct project -- I decided to focus on making incremental improvements to 3.x instead. Localizing CyTube is a nontrivial project and I've been focusing my time on other features of CyTube. If there is sufficient interest in getting it implemented soon, it would be best if someone could familiarize themselves with the codebase and I'd be happy to give some guidance and walk them through implementing this.

calzoneman / sync

Native Localizations #413