Skip to content

Improve font family with add lang attr #3718

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

Merged
sorah merged 16 commits into from
Dec 23, 2025
Merged

Improve font family with add lang attr #3718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
603c444
Extracted reusable components into a new root layout and implemented …
liberaldev Dec 22, 2025
7e31701
Implemented language-specific font settings for improved localization…
liberaldev Dec 22, 2025
5dd0aa6
Enhanced accessibility in the language selector by adding `lang` attr…
liberaldev Dec 22, 2025
321a039
Updated font imports to include broader weight ranges and additional …
liberaldev Dec 22, 2025
9d77afc
Refined language-specific font rules by adjusting `lang` selectors fo…
liberaldev Dec 22, 2025
d1a86eb
Updated `lang` selectors from `:root` to `html` for improved specific…
liberaldev Dec 22, 2025
8d0f7d0
Update language-specific font definitions for improved compatibility
liberaldev Dec 22, 2025
de5424d
Added `sans` font stack to Tailwind config for consistency with defau…
liberaldev Dec 22, 2025
2b1935d
Updated default font stack to use "Plus Jakarta Sans" for improved de…
liberaldev Dec 22, 2025
7e16c02
Add missing newline at end of root layout file
liberaldev Dec 22, 2025
102401a
Refactor language-specific font definitions to use CSS variables for …
liberaldev Dec 22, 2025
abbbbe1
Add [lang="..."] selectors to language-specific font definitions for …
liberaldev Dec 22, 2025
287423c
Refactor language-specific font definitions to consolidate into `:roo…
liberaldev Dec 22, 2025
ededa2a
Merge branch 'master' into improve-font-family-with-lang-attr
liberaldev Dec 22, 2025
c460dfd
Merge branch 'master' into improve-font-family-with-lang-attr
sorah Dec 23, 2025
a725e45
Refactored language selector markup for improved readability and sema…
liberaldev Dec 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion _includes/language_selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,10 @@
{% for lang in site.data.languages %}
<a href="/{{ lang.code }}{{ page.url | remove_first: '/' | replace_first: page.lang, '' }}"
class="flex items-center justify-between px-4 py-2 text-sm {% if lang.code == current_lang %}bg-stone-100 dark:bg-stone-700 text-stone-900 dark:text-stone-50 font-medium{% else %}text-stone-700 dark:text-stone-300{% endif %} hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors">
<span>{{ lang.native_name }} ({{ lang.code }})</span>
<span>
<span lang="{{ lang.code | to_html_lang }}">{{ lang.native_name }}</span>
(<span lang="und-Latn">{{ lang.code }}</span>)
</span>
{% if lang.code == current_lang %}
<span class="icon-check" aria-hidden="true"></span>
{% endif %}
Expand Down
234 changes: 117 additions & 117 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,125 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

{% if page.title != null %}
{% capture homepage_path %}/{{ page.lang }}/{% endcapture %}
{% if page.url == homepage_path %}
<title>{{ page.title }}</title>
{% else %}
<title>{{ page.title }} | Ruby</title>
{% endif %}
{% else %}
<title>Ruby Programming Language</title>
{% endif %}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
---
layout: root
---
<head>
<meta charset="utf-8">

{% if page.title != null %}
{% capture homepage_path %}/{{ page.lang }}/{% endcapture %}
{% if page.url == homepage_path %}
{% assign meta_description = "A Programmer's Best Friend" %}
{% elsif page.description %}
{% assign meta_description = page.description %}
{% elsif page.excerpt %}
{% assign meta_description = page.excerpt | strip_html | strip_newlines | truncate: 160 %}
<title>{{ page.title }}</title>
{% else %}
{% assign meta_description = page.content | strip_html | strip_newlines | truncate: 160 %}
<title>{{ page.title }} | Ruby</title>
{% endif %}

{% if page.title %}
{% if page.url == homepage_path %}
{% assign meta_title = page.title %}
{% else %}
{% assign meta_title = page.title | append: " | Ruby" %}
{% endif %}
{% else %}
<title>Ruby Programming Language</title>
{% endif %}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

{% capture homepage_path %}/{{ page.lang }}/{% endcapture %}
{% if page.url == homepage_path %}
{% assign meta_description = "A Programmer's Best Friend" %}
{% elsif page.description %}
{% assign meta_description = page.description %}
{% elsif page.excerpt %}
{% assign meta_description = page.excerpt | strip_html | strip_newlines | truncate: 160 %}
{% else %}
{% assign meta_description = page.content | strip_html | strip_newlines | truncate: 160 %}
{% endif %}

{% if page.title %}
{% if page.url == homepage_path %}
{% assign meta_title = page.title %}
{% else %}
{% assign meta_title = "Ruby Programming Language" %}
{% assign meta_title = page.title | append: " | Ruby" %}
{% endif %}

<meta name="description" content="{{ meta_description }}">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
<meta property="og:title" content="{{ meta_title }}">
<meta property="og:description" content="{{ meta_description }}">
<meta property="og:image" content="{{ site.url }}/images/og-image.png">
<meta property="og:site_name" content="Ruby Programming Language">
<meta property="og:locale" content="{{ page.lang | default: 'en' }}">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
<meta name="twitter:title" content="{{ meta_title }}">
<meta name="twitter:description" content="{{ meta_description }}">
<meta name="twitter:image" content="{{ site.url }}/images/twitter-card-square.png">

<!-- Schema.org -->
<meta itemprop="name" content="{{ meta_title }}">
<meta itemprop="description" content="{{ meta_description }}">
<meta itemprop="image" content="{{ site.url }}/images/og-image.png">

<link rel="stylesheet" type="text/css" href="/stylesheets/compiled.css">
<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+JP:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;700;800&family=Rock+Salt&family=Material+Icons&family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],200..700,0,0&display=swap" rel="stylesheet">
<link rel="canonical" href="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/images/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
{% include rss_discovery.html %}

<!-- Apply theme immediately to prevent flash -->
<script>
(function() {
const theme = localStorage.getItem('theme-preference') || 'auto';
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else if (theme === 'light') {
document.documentElement.classList.remove('dark');
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
})();
</script>

<!-- Detect icon font loading to prevent FOUT -->
<script>
(function() {
if (document.fonts && document.fonts.load) {
document.fonts.load('24px "Material Symbols Rounded"').then(function() {
document.documentElement.classList.add('fonts-loaded');
}).catch(function() {
document.documentElement.classList.add('fonts-loaded');
});
} else {
{% else %}
{% assign meta_title = "Ruby Programming Language" %}
{% endif %}

<meta name="description" content="{{ meta_description }}">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
<meta property="og:title" content="{{ meta_title }}">
<meta property="og:description" content="{{ meta_description }}">
<meta property="og:image" content="{{ site.url }}/images/og-image.png">
<meta property="og:site_name" content="Ruby Programming Language">
<meta property="og:locale" content="{{ page.lang | default: 'en' }}">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
<meta name="twitter:title" content="{{ meta_title }}">
<meta name="twitter:description" content="{{ meta_description }}">
<meta name="twitter:image" content="{{ site.url }}/images/twitter-card-square.png">

<!-- Schema.org -->
<meta itemprop="name" content="{{ meta_title }}">
<meta itemprop="description" content="{{ meta_description }}">
<meta itemprop="image" content="{{ site.url }}/images/og-image.png">

<link rel="stylesheet" type="text/css" href="/stylesheets/compiled.css">
<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+JP:[email protected]&family=Noto+Sans+KR:[email protected]&family=Noto+Sans+SC:[email protected]&family=Noto+Sans+TC:[email protected]&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap&family=Rock+Salt&family=Material+Icons&family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],200..700,0,0&display=swap" rel="stylesheet">
<link rel="canonical" href="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/images/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
{% include rss_discovery.html %}

<!-- Apply theme immediately to prevent flash -->
<script>
(function() {
const theme = localStorage.getItem('theme-preference') || 'auto';
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else if (theme === 'light') {
document.documentElement.classList.remove('dark');
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
})();
</script>

<!-- Detect icon font loading to prevent FOUT -->
<script>
(function() {
if (document.fonts && document.fonts.load) {
document.fonts.load('24px "Material Symbols Rounded"').then(function() {
document.documentElement.classList.add('fonts-loaded');
}
})();
</script>

<script type="text/javascript" src="/javascripts/navigation-toggle.js" defer></script>
<script type="text/javascript" src="/javascripts/header-navigation.js" defer></script>
<script type="text/javascript" src="/javascripts/toc.js" defer></script>
<script type="text/javascript" src="/javascripts/theme-toggle.js" defer></script>
{% if layout.javascript != null %}
{% for javascript in layout.javascript %}
<script type="text/javascript" src="/javascripts/{{ javascript }}.js"></script>
{% endfor %}
{% endif %}
</head>

{% capture homepage_url %}/{{ page.lang }}/{% endcapture %}

<body{% if page.url == homepage_url %} id="home-page-layout"{% endif %}>
{% include header.html %}

<div id="page" class="pt-20">
{{ content }}
</div>

{% include footer.html %}
</body>
</html>
}).catch(function() {
document.documentElement.classList.add('fonts-loaded');
});
} else {
document.documentElement.classList.add('fonts-loaded');
}
})();
</script>

<script type="text/javascript" src="/javascripts/navigation-toggle.js" defer></script>
<script type="text/javascript" src="/javascripts/header-navigation.js" defer></script>
<script type="text/javascript" src="/javascripts/toc.js" defer></script>
<script type="text/javascript" src="/javascripts/theme-toggle.js" defer></script>
{% if layout.javascript != null %}
{% for javascript in layout.javascript %}
<script type="text/javascript" src="/javascripts/{{ javascript }}.js"></script>
{% endfor %}
{% endif %}
</head>

{% capture homepage_url %}/{{ page.lang }}/{% endcapture %}

<body{% if page.url == homepage_url %} id="home-page-layout"{% endif %}>
{% include header.html %}

<div id="page" class="pt-20">
{{ content }}
</div>

{% include footer.html %}
</body>
Loading
Loading