diff --git a/Gemfile.lock b/Gemfile.lock index cb87e94597..e7ff5cc6b6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - zurb-foundation (4.0.9) + zurb-foundation (4.1.0) sass (>= 3.2.0) GEM diff --git a/docs/_sidebar-components.html.erb b/docs/_sidebar-components.html.erb index 554cd4e0f3..fa79e4dcdc 100644 --- a/docs/_sidebar-components.html.erb +++ b/docs/_sidebar-components.html.erb @@ -9,6 +9,7 @@
  • Rails
  • Media Queries
  • Visibility Classes
    • +
  • Right-to-Left Support
    • diff --git a/docs/_sidebar.html.erb b/docs/_sidebar.html.erb index 95ff75e3c7..6259c7c818 100644 --- a/docs/_sidebar.html.erb +++ b/docs/_sidebar.html.erb @@ -9,6 +9,7 @@
  • Rails
  • Media Queries
  • Visibility Classes
    • +
  • Right-to-Left Support
    • diff --git a/docs/css/docs.scss b/docs/css/docs.scss index f2cf803b15..ded38d09a9 100644 --- a/docs/css/docs.scss +++ b/docs/css/docs.scss @@ -7,6 +7,8 @@ /* Coderay styles */ .html, .css, .scss, .js { position: relative; } +ul, ol, dl { list-style-position: inside; } + .CodeRay:before { position: absolute; top: 6px; diff --git a/docs/rtl.html.erb b/docs/rtl.html.erb new file mode 100644 index 0000000000..c4b27460af --- /dev/null +++ b/docs/rtl.html.erb @@ -0,0 +1,53 @@ +<% @side_nav = "using" %> +
    +
    + + <% @page_title = "Right-to-Left Support" %> +
    +
    +

    <%= @page_title %>

    +

    Right-to-left text direction support in Foundation allows you to easily switch text direction for all components.

    +

    +
    + +
    +
    +

    Setup

    +

    Foundation 4 was built to support right-to-left text direction out of the box, but you'll need to make a couple of adjustments to your markup and SCSS to get everything up and running.

    + +

    Markup Changes for Right-to-Left Layouts

    +

    You'll need to make a few changes to your markup to get the javascript components working nice and smooth. In the html tag, you'll need to add a dir attribute with a value of rtl. Here's what your html tag should look like:

    +<%= code_example ' + + +', :html %> +
    Change the Language Too
    +

    You'll need to change your lang attribute value to match your language. Here's a handy list of common right-to-left languages and their html codes:

    +
      +
    • Arabic: ar
      • +
    • Chinese: zh
      • +
    • Farsi: fa
      • +
    • Hebrew: he, iw
      • +
    • Japanese: ja
      • +
    • Urdu: ur
      • +
    • Yiddish: yi, ji
      • +
    +
    +

    A Single SCSS Adjustment

    +

    We made it really easy to switch the entire Foundation grid to right-to-left by changing the $text-direction SCSS variable. Here's what the variable should look like:

    +<%= code_example ' +$text-direction: rtl; +', :css %> +

    By changing this single variable, the entire grid and all the Foundation components will be switched to right-to-left orientation.

    +
    +
    Using CSS
    +

    If you downloaded a static version of Foundation using the customizer to get a right-to-left support, your download should be ready to use without any of the steps mentioned above.

    + Download Right-to-Left Foundation 4 » +
    +
    +
    +
    +
    + <%= render "_sidebar.html.erb" %> +
    +
    diff --git a/js/foundation/foundation.orbit.js b/js/foundation/foundation.orbit.js index 62c6041551..08c9206528 100644 --- a/js/foundation/foundation.orbit.js +++ b/js/foundation/foundation.orbit.js @@ -306,7 +306,7 @@ $slides = $slides_container.children(), $active_slide = $slides_container.find('.' + self.settings.active_slide_class), active_index = $active_slide.index(), - margin_position = Foundation.rtl ? 'marginRight' : 'marginRight'; + margin_position = Foundation.rtl ? 'marginRight' : 'marginLeft'; if ($container.hasClass(self.settings.orbit_transition_class)) { return false; diff --git a/lib/foundation/version.rb b/lib/foundation/version.rb index d4ba93138a..fb99950544 100644 --- a/lib/foundation/version.rb +++ b/lib/foundation/version.rb @@ -1,3 +1,3 @@ module Foundation - VERSION = "4.0.9" + VERSION = "4.1.0" end diff --git a/templates/project/index.html b/templates/project/index.html index 9e250f9276..065df3ccf3 100644 --- a/templates/project/index.html +++ b/templates/project/index.html @@ -1,7 +1,7 @@ <% template = @template if defined?(@template) %> - - + + dir="rtl"<% end %>>