You can write your own CSS for each language

ruby · May 30, 2019 · 1388f67 · 1388f67
1 parent 33371a8
commit 1388f67
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/source/javascripts/try_ruby.js.rb b/source/javascripts/try_ruby.js.rb
@@ -138,6 +138,9 @@ def get_language
     # Update language select list
     Element.find('#tryruby-lang-select').value = language
 
+    # Update lang attribute
+    Element.find('html').attr('lang', language)
+
     language
   end
 
@@ -281,6 +284,7 @@ def do_show_lang
   # Handle change language event
   def do_change_lang
     language = Element.find('#tryruby-lang-select').value
+    Element.find('html').attr('lang', language)
     set_cookie('tryruby_nl_language', language)
     get_content_from_server(language)
   end

diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml
@@ -1,5 +1,5 @@
 !!!
-%html
+%html{:lang => "en"}
   %head
     %meta{:name => "viewport", :content => "width=device-width, initial-scale=1.0, maximum-scale=1.0 user-scalable=no"}
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}

diff --git a/source/stylesheets/application.css.scss b/source/stylesheets/application.css.scss
@@ -79,7 +79,7 @@ pre {
   -webkit-border-radius: 0 !important;
   -moz-border-radius: 0 !important;
   border-radius: 0 !important;
-  
+
   font-family: Menlo, Consolas, "Courier New", monospace;
 
 /*  .highlight {
@@ -187,3 +187,5 @@ iframe {
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
 }
+
+@import "languages/ja.css.scss";
diff --git a/source/stylesheets/languages/ja.css.scss b/source/stylesheets/languages/ja.css.scss
@@ -0,0 +1,26 @@
+:lang(ja) {
+  h2 {
+    font-size: 2.6rem;
+    line-height: 1.4;
+  }
+
+  h3 {
+    font-size: 2.0rem;
+    line-height: 1.4;
+  }
+
+  h4 {
+    font-size: 1.5rem;
+    line-height: 1.4;
+  }
+
+  #tryruby-content {
+    line-height: 1.86;
+
+    blockquote p {
+      line-height: 1.86;
+    }
+  }
+}
+
+