-
Notifications
You must be signed in to change notification settings - Fork 21.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
RTL Rendering for Guides #51613
base: main
Are you sure you want to change the base?
RTL Rendering for Guides #51613
Changes from all commits
8e542e8
b0d0af5
f7a7cf8
aa45e9e
58dbf69
c022085
9182dad
196635c
91ddfcc
548271a
ae881dc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -17,7 +17,8 @@ body.guide { | |||||
|
||||||
-webkit-tap-highlight-color:rgba(38, 27, 35, 0); | ||||||
|
||||||
// ---------------------------------------------------------------------------- | ||||||
|
||||||
// ---------------------------------------------------------------------------- | ||||||
// Typographic Baseline | ||||||
// ---------------------------------------------------------------------------- | ||||||
|
||||||
|
@@ -57,7 +58,6 @@ body.guide { | |||||
|
||||||
margin: 0 0 0.75em 0; // Space after paragraph | ||||||
text-align: left; | ||||||
|
||||||
} // p | ||||||
|
||||||
// Links | ||||||
|
@@ -259,12 +259,6 @@ body.guide { | |||||
} | ||||||
} // dd | ||||||
} // dl | ||||||
|
||||||
// :where(&[dir="ltr"]) dd { margin-left: 1.5em; } | ||||||
// :where(&[dir="rtl"]) dd { margin-right: 1.5em; } | ||||||
|
||||||
// :where(&[dir="ltr"]) :is(dd) { margin-left: 0; padding-left: 0; } | ||||||
// :where(&[dir="rtl"]) :is(dd) { margin-right: 0; padding-right: 0; } | ||||||
|
||||||
li { | ||||||
margin-bottom: 0.5em; | ||||||
|
@@ -274,7 +268,7 @@ body.guide { | |||||
|
||||||
pre, code { | ||||||
font-size: 1rem; | ||||||
font-family: "IBM Plex Mono", "Anonymous Pro", "Inconsolata", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace; | ||||||
font-family: "IBM Plex Mono", "Anonymous Pro", "Inconsolata", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace !important; | ||||||
line-height: 1.5; | ||||||
margin: 1em 0; | ||||||
overflow: auto; | ||||||
|
@@ -323,14 +317,17 @@ body.guide { | |||||
|
||||||
.wrapper { | ||||||
padding: 1em; | ||||||
|
||||||
:where(body[dir="ltr"]) & { text-align: left; } | ||||||
:where(body[dir="rtl"]) & { text-align: right; } | ||||||
text-align: left; | ||||||
|
||||||
@include media('>desktop') { // 1024 | ||||||
max-width: calc(55rem + 420px); | ||||||
margin: 0 auto; | ||||||
padding-right: 470px; | ||||||
|
||||||
:where(html[dir="rtl"]) & { | ||||||
padding-right: 1.5em; | ||||||
padding-left: 470px; | ||||||
} | ||||||
} | ||||||
} // .wrapper | ||||||
|
||||||
|
@@ -585,8 +582,8 @@ body.guide { | |||||
z-index: 15; | ||||||
padding-bottom: 0.125em; | ||||||
|
||||||
:where(body[dir="ltr"]) & { background-position: right top; padding-right: 1em; } | ||||||
:where(body[dir="rtl"]) & { background-position: left top; padding-left: 1em; } | ||||||
:where(html[dir="ltr"]) & { background-position: right top; padding-right: 1em; } | ||||||
:where(html[dir="rtl"]) & { background-position: left top; padding-left: 1em; } | ||||||
} | ||||||
|
||||||
|
||||||
|
@@ -605,8 +602,8 @@ body.guide { | |||||
max-width: 1000px; | ||||||
z-index: 10; | ||||||
|
||||||
:where(body[dir="ltr"]) & { left: auto; right: 50px; } | ||||||
:where(body[dir="rtl"]) & { left: 50px; right: auto; } | ||||||
:where(html[dir="ltr"]) & { left: auto; right: 50px; } | ||||||
:where(html[dir="rtl"]) & { left: 50px; right: auto; } | ||||||
|
||||||
&.visible { | ||||||
display: block !important; | ||||||
|
@@ -707,6 +704,11 @@ body.guide { | |||||
right: 50px; | ||||||
max-height: calc(100vh - 200px); | ||||||
width: 400px; | ||||||
|
||||||
:where(html[dir="rtl"]) & { | ||||||
right: auto; | ||||||
left: 50px; | ||||||
} | ||||||
} | ||||||
|
||||||
&.guide-index { | ||||||
|
@@ -715,11 +717,20 @@ body.guide { | |||||
|
||||||
@include media('>desktop-ultra-wide') { | ||||||
right: calc(30vw - 400px); | ||||||
|
||||||
:where(html[dir="rtl"]) & { | ||||||
right: auto; | ||||||
left: calc(30vw - 400px); | ||||||
} | ||||||
} | ||||||
|
||||||
@include media('>desktop-hd') { // 1920 | ||||||
|
||||||
right: calc(40vw - 400px); | ||||||
|
||||||
:where(html[dir="rtl"]) & { | ||||||
right: auto; | ||||||
left: calc(40vw - 400px); | ||||||
} | ||||||
} | ||||||
|
||||||
h3.chapter img { | ||||||
|
@@ -795,4 +806,40 @@ body.guide { | |||||
} | ||||||
} | ||||||
|
||||||
} // body.guide | ||||||
} // body.guide | ||||||
|
||||||
html[dir="rtl"] { | ||||||
body.guide { | ||||||
direction: rtl; | ||||||
|
||||||
p, table th, .wrapper, | ||||||
#guides .guides-section-container .guides-section { | ||||||
text-align: right; | ||||||
} | ||||||
} // body.guide | ||||||
|
||||||
&:lang("ar"), &:lang("fa") { | ||||||
body.guide { | ||||||
h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li, | ||||||
header#page_header nav#feature_nav .header-logo a { | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This seems oddly specific 😄 , wouldn't it work to apply to all |
||||||
font-family: "Noto Sans Arabic", sans-serif !important; | ||||||
font-optical-sizing: auto; | ||||||
font-weight: 400; | ||||||
font-style: normal; | ||||||
font-variation-settings: "wdth" 100; | ||||||
} | ||||||
} // body.guide | ||||||
}&:lang("ar"), &:lang("fa") | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
&:lang("he"), &:lang("iw") { | ||||||
body.guide { | ||||||
h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li, | ||||||
header#page_header nav#feature_nav .header-logo a { | ||||||
font-family: "Heebo", sans-serif !important; | ||||||
font-optical-sizing: auto; | ||||||
font-weight: 400; | ||||||
font-style: normal; | ||||||
} | ||||||
} // body.guide | ||||||
} // &:lang("he"), &:lang("iw") | ||||||
Comment on lines
+821
to
+844
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I am however not able to see the fonts applied when I swap languages, it's using some browser/OS default. It looks like if I unquote the args to |
||||||
} // html[dir="rtl"] |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<html dir="<%= @direction %>" lang="en"> | ||
|
||
<head> | ||
<meta charset="utf-8"> | ||
|
@@ -25,10 +25,15 @@ | |
<meta property="og:image" content="https://avatars.githubusercontent.com/u/4223" /> | ||
<meta property="og:type" content="website" /> | ||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com"> | ||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap" rel="stylesheet"> | ||
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+Arabic:wght@100..900&display=swap" rel="stylesheet"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Will these cause the fonts to be downloaded upfront, or just they're actually referenced/needed? (i.e. for those specific languages, assuming we make the change to only refer to them there) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. They load on page load. Not sure how we could only include that font for There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @jathayde well, simple <% if @direction == "rtl" %>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+Arabic:wght@100..900&display=swap" rel="stylesheet">
<% endif %> Also, you can use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @idangoldman unfortunately because we may swap We'd have to do it via JS and manually append the link tags when the translation changes. I don't know much/enough about those system fonts for this though, @jathayde do you / have you tried? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @carlosantoniodasilva yeah fair point... After looking into the codebase, I saw that all the currently used fonts in the guides are declaired as @jathayde, what about adding the new fonts support into that file as Stay with me, it's a bit long -> /* RTL Fonts Support for Arabic */
@font-face { font-family:"Noto Sans Arabic"; font-style:normal; font-weight:100; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-Thin.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:italic; font-weight:100; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-ThinItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:normal; font-weight:200; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-ExtraLight.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:italic; font-weight:200; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:normal; font-weight:300; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-Light.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:italic; font-weight:300; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-LightItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:normal; font-weight:400; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-Regular.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:italic; font-weight:400; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-Italic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:normal; font-weight:500; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-Medium.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:italic; font-weight:500; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-MediumItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:normal; font-weight:600; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-SemiBold.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:italic; font-weight:600; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:normal; font-weight:700; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-Bold.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:italic; font-weight:700; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-BoldItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:normal; font-weight:800; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-ExtraBold.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:italic; font-weight:800; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:normal; font-weight:900; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-Black.woff2?v=4.0") format("woff2"); }
@font-face { font-family:"Noto Sans Arabic"; font-style:italic; font-weight:900; font-display:swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; src:url("https://rubyonrails.org/assets/fonts/NotoSansArabic-BlackItalic.woff2?v=4.0") format("woff2"); }
/* RTL Fonts Support for Hebrew */
@font-face { font-family:Heebo; font-style:normal; font-weight:100; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-Thin.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:italic; font-weight:100; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-ThinItalic.woff2?v=4.0") format("woff2"); }`
@font-face { font-family:Heebo; font-style:normal; font-weight:200; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-ExtraLight.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:italic; font-weight:200; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-ExtraLightItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:normal; font-weight:300; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-Light.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:italic; font-weight:300; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-LightItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:normal; font-weight:400; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-Regular.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:italic; font-weight:400; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-Italic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:normal; font-weight:500; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-Medium.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:italic; font-weight:500; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-MediumItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:normal; font-weight:600; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-SemiBold.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:italic; font-weight:600; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-SemiBoldItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:normal; font-weight:700; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-Bold.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:italic; font-weight:700; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-BoldItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:normal; font-weight:800; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-ExtraBold.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:italic; font-weight:800; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-ExtraBoldItalic.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:normal; font-weight:900; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-Black.woff2?v=4.0") format("woff2"); }
@font-face { font-family:Heebo; font-style:italic; font-weight:900; font-display:swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src:url("https://rubyonrails.org/assets/fonts/Heebo-BlackItalic.woff2?v=4.0") format("woff2"); } One thing, I haven't found how the fonts are generated/downloaded/stored on rubyonrails.org. Another thing, References:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Playing with this right now and the only issue I've got is that Google bypasses this step for you when you serve from their CDN. We could download and host the fonts, but without doing that, I don't see a clear way to limit to unicode ranges. @carlosantoniodasilva do we want to try and serve these from our domain? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Also, I think we could leverage a variable font to reduce the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @jathayde I don't think we want to include all of those font-faces on rubyonrails.org . We did that for the main guides fonts, but this seems very specific use case to store there, we should leverage google instead. What I'd prefer is just not load up those fonts upfront, but instead when they swap to a font that does require them. We could perhaps use JS to programmatically load the fonts from Google (by adding the tags to the head) when they select one of the fonts that require it? I don't think this is a blocker, but if that sounds like it could be okay I could look into it. |
||
|
||
<meta name="theme-color" content="#C81418"> | ||
</head> | ||
|
||
<body dir="<%= @direction %>" class="guide"> | ||
<body class="guide"> | ||
<nav id="topNav" aria-label="Secondary"> | ||
<div class="wrapper"> | ||
<strong class="more-info-label">More at <a href="https://rubyonrails.org/">rubyonrails.org:</a> </strong> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like typo, let's revert.