Skip to content
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.

Sign up for GitHub

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

Jump to bottom

RTL Rendering for Guides #51613

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
+93 −28
Open

RTL Rendering for Guides #51613

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8e542e8
Setting RTL vs LTR text aligns
jathayde Mar 29, 2024
b0d0af5
Adding google font calls
jathayde Apr 16, 2024
f7a7cf8
Getting fonts to take, fixing misc visual errors
jathayde Apr 16, 2024
aa45e9e
Flipping columns
jathayde Apr 16, 2024
58dbf69
Implementing a dir switcher from Carlos
jathayde Apr 18, 2024
c022085
Removing translated-rtl, shifting to html from body
jathayde Apr 24, 2024
9182dad
Placing language specific font calls in lang attributes only
jathayde Apr 24, 2024
196635c
Cleaning up interstitial component, fixing render issues
jathayde May 13, 2024
91ddfcc
Simplifying font calls for arabic, farsi, and hebrew
jathayde May 13, 2024
548271a
Fixing side column on larger desktops
jathayde May 13, 2024
ae881dc
Consolidating RTL calls
jathayde May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 11 additions & 0 deletions guides/assets/javascripts/guides.js
View file
Open in desktop
Expand Up @@ -103,4 +103,15 @@
e.clearSelection();
});
});

// Observe the HTML tag for Google Translate CSS class, to swap our lang direction LTR/RTL.
var observer = new MutationObserver(function(mutations, _observer) {
each(mutations, function(mutation) {
if (mutation.type === "attributes" && mutation.attributeName == "class") {
mutation.target.dir = mutation.target.classList.contains("translated-rtl") ? "rtl" : "ltr";
}
})
});
observer.observe(document.querySelector("html"), { attributeFilter: ["class"] });

}).call(this);
83 changes: 62 additions & 21 deletions guides/assets/stylesrc/_main.scss
View file
Open in desktop
Expand Up @@ -17,7 +17,15 @@ body.guide {

-webkit-tap-highlight-color:rgba(38, 27, 35, 0);

// ----------------------------------------------------------------------------
html[dir="rtl"] & {
direction: rtl;

p {
text-align: right;
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is similar/related to the font declarations at the bottom, and those also use body.guide, let's try and group them together.

How about something like this at the bottom:

html[dir="rtl"] {
  body.guide {
    // these declarations
  }

  &:lang("ar"), &:lang("fa") {
    body.guide { 
      // ... font declarations 
    }
  }

  &:lang("foo")...
}

So we have less spread changes related to dir=rtl.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've done this where the items are simple. Where things are layout related or media query I've left them in place as it seems more logical and easier to understand. ae881dc

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, yeah I was mainly looking for this block really which seemed super related to the one at the bottom when I reviewed. 👍


// ----------------------------------------------------------------------------
Comment on lines +20 to +21
Copy link
Member

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.

Suggested change
// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------

// Typographic Baseline
// ----------------------------------------------------------------------------

Expand Down Expand Up @@ -56,8 +64,9 @@ body.guide {
hyphenate-limit-last: always;

margin: 0 0 0.75em 0; // Space after paragraph
text-align: left;

:where(html[dir="ltr"]) & { text-align: left; }
:where(html[dir="rtl"]) & { text-align: right; }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More of thinking out loud, to hear your thoughts: would it work / make sense to style left by default, and use the dir=rtl tag to swap right, rather than having the two explicitly called out throughout the styles? In other words, by default (without thinking about "dir") it is listed there / it works... when we swap is that the extra dir is taken into account for changing stuff.

I don't mind it this way, just something that crossed my mind.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have a strong opinion here, but the arguments for both methods:

Keeping as is:

  1. Pro: Clarity of what parameters are being addressed and how they change
  2. Con: If dir is not defined, it falls back to the cascade and works up the tree until it finds a declaration or the browser default.

Moving to only defining the override is effectively the opposite. I stuck with the method that was previously employed in the guides build, and I do like the visual clarity of the elements that change being spelled out next to each other, but it's not a hill I would die defending.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of these that are not related to page layout are now at the bottom.

} // p

// Links
Expand Down Expand Up @@ -107,7 +116,9 @@ body.guide {
color: #fff;
font-size: 0.875em;
padding: 0.5em;
text-align: left;

:where(html[dir="ltr"]) & { text-align: left; }
:where(html[dir="rtl"]) & { text-align: right; }
}

tr {
Expand All @@ -125,7 +136,7 @@ body.guide {
// TODO: media queries to increase font size, current sizes are for desktop, so drop base to mobile appropriate and MQ up twice (min width 60/120 em, minheight 30/60em)
h1 {
color: $rf-brand;
font-family: 'Calibre', sans-serif;
font-family: 'Calibre', "Noto Sans Arabic", "Heebo", sans-serif;
font-size: 3rem; /* 48px */
font-weight: 700; /* Light */
line-height: 1em;
Expand All @@ -135,7 +146,7 @@ body.guide {
} // h1

h2 {
font-family: 'Calibre', sans-serif;
font-family: 'Calibre', "Noto Sans Arabic", "Heebo", sans-serif;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here are the other fonts I mentioned, I think these would be covered by the declarations at the bottom.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cleaned up in 91ddfcc

font-size: 2.25rem; // Calibre is smaller than inter at the same size
font-weight: 700; /* Bold */

Expand Down Expand Up @@ -259,12 +270,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;
Expand All @@ -274,7 +279,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;
Expand Down Expand Up @@ -324,13 +329,18 @@ body.guide {
.wrapper {
padding: 1em;

:where(body[dir="ltr"]) & { text-align: left; }
:where(body[dir="rtl"]) & { text-align: right; }
:where(html[dir="ltr"]) & { text-align: left; }
:where(html[dir="rtl"]) & { text-align: right; }

@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

Expand Down Expand Up @@ -439,7 +449,7 @@ body.guide {
background-repeat: no-repeat;
background-position: top center;
display: inline-block;
font-family: 'Calibre', sans-serif;
font-family: 'Calibre', "Noto Sans Arabic", "Heebo", sans-serif;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another font declaration... not sure if a is covered by those already?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cleaned up in 91ddfcc

font-size: 2.25rem;
font-weight: 700;
margin: 0 auto;
Expand Down Expand Up @@ -585,8 +595,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; }
}


Expand All @@ -605,8 +615,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;
Expand All @@ -622,9 +632,11 @@ body.guide {
.guides-section {
flex: auto;
margin: 0 2em 0.5em 0;
text-align: left;
width: 33%;

:where(html[dir="ltr"]) & { text-align: left; }
:where(html[dir="rtl"]) & { text-align: right; }

dt, dd {
font-weight: 400 !important;
font-size: 0.825rem;
Expand Down Expand Up @@ -707,6 +719,10 @@ body.guide {
right: 50px;
max-height: calc(100vh - 200px);
width: 400px;

:where(html[dir="rtl"]) & {
right: auto; left: 50px;
}
}

&.guide-index {
Expand Down Expand Up @@ -795,4 +811,29 @@ body.guide {
}
}

} // body.guide
} // body.guide

html[dir="rtl"]:lang("ar"),
html[dir="rtl"]:lang("fa") {
body.guide {
h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li {
font-family: "Noto Sans Arabic", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
}
}
}

html[dir="rtl"]:lang("he"),
html[dir="rtl"]:lang( "iw") {
body.guide {
h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li {
font-family: "Heebo", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
}
}
9 changes: 6 additions & 3 deletions guides/assets/stylesrc/components/_code-container.scss
View file
Open in desktop
Expand Up @@ -22,7 +22,8 @@ intermediate whitespace looks uniform. */

// Padding and spacing for LTR vs RTL langauge defaults
:where(body[dir="ltr"]) & { background-position: 10px 10px; padding-right: 1em !important; padding-left: 56px !important; }
:where(body[dir="rtl"]) & { background-position: calc(100% - 10px) 10px; padding-right: 56px !important; padding-left: 1em !important; }
:where(body[dir="rtl"]) &,
html.translated-rtl & { background-position: calc(100% - 10px) 10px; padding-right: 56px !important; padding-left: 1em !important; }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can probably the .translated-rtl from here as well, and switch from body to html on the declarations above.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 196635c


/* Remove bottom margin of paragraphs in special boxes, otherwise they get a
spurious blank area below with the box background. */
Expand All @@ -39,6 +40,8 @@ intermediate whitespace looks uniform. */
background-color: $gray-900;
min-height: auto; // remove if icon is restored
padding-left: 1em !important; // remove if icon is restored
direction: ltr !important;
text-align: left !important;

pre {margin: 0;}

Expand All @@ -52,9 +55,9 @@ intermediate whitespace looks uniform. */
padding: 0.25em 0.5em !important;
position: absolute;
bottom: 10px;
:where(body[dir="ltr"]) & { right: 10px; }
:where(body[dir="rtl"]) & { left: 10px; }
right: 10px;
text-transform: uppercase;
width: auto;
} // button.clipboard-button
} // &.code

Expand Down
9 changes: 7 additions & 2 deletions guides/source/layout.html.erb
View file
Open in desktop
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html dir="<%= @direction %>" lang="en">

<head>
<meta charset="utf-8">
Expand All @@ -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">
Copy link
Member

Choose a reason for hiding this comment

The 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)

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 dir changed pages. Is there a technique you'd suggest?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jathayde well, simple erb -> if can do the work.

<% 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 unicode-range and system fonts without using 3rd party fonts.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@idangoldman unfortunately because we may swap dir on-the-fly with a google translation trigger, it won't work to embed that conditional via ERB.

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?

Copy link

Choose a reason for hiding this comment

The 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 @font-face in guides/assets/stylesrc/style.scss.

@jathayde, what about adding the new fonts support into that file as @font-face with specific unicode-range, that way the fonts will be used (downloaded) only if characters on the unicode-range are presented on the screen.

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, Inter, Noto Sans Arabic, Heebo font face declaration can become more readable with writing a mixin inputs a map of the fonts options and outputs the above.

References:

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I think we could leverage a variable font to reduce the @font-face calls instead of needing 18 declarations for each weight/style combo.

Copy link
Member

Choose a reason for hiding this comment

The 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>
Expand Down