From c043870d3d70ef61aa1fcaf35e82cd35d241473c Mon Sep 17 00:00:00 2001 From: George Cushen Date: Sat, 24 Jan 2026 03:30:32 +0000 Subject: [PATCH] feat(biography): re-implement ruby pronunciation annotations for CJK names MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add visual pronunciation guides (pinyin, furigana, IPA) displayed as ruby text annotations above the profile name in biography blocks. - Add conditional ruby rendering in resume-biography and resume-biography-3 - Include browser fallback for non-ruby-supporting browsers Usage: Set `name.pronunciation` in author YAML (e.g., "Wáng Wěi") --- modules/blox/assets/css/blox/biography.css | 88 ++++++++++++++++++- .../blox/blox/resume-biography-3/README.md | 1 + .../blox/blox/resume-biography-3/block.html | 21 ++++- modules/blox/blox/resume-biography/README.md | 4 +- modules/blox/blox/resume-biography/block.html | 21 ++++- 5 files changed, 124 insertions(+), 11 deletions(-) diff --git a/modules/blox/assets/css/blox/biography.css b/modules/blox/assets/css/blox/biography.css index c4f30028..3ac8b703 100644 --- a/modules/blox/assets/css/blox/biography.css +++ b/modules/blox/assets/css/blox/biography.css @@ -28,6 +28,7 @@ .network-icon li { margin-right: 10px; + @media (max-width: 640px) { /* Min 48px Lighthouse tap targets on mobile */ margin-right: 12px; @@ -74,7 +75,87 @@ z-index: 1; } -/* Ruby pronunciation styling for modern look */ +/* Ruby pronunciation styling - 2026+ modern design */ +.hb-ruby-name { + ruby-position: over; + display: ruby; + text-align: center; +} + +.hb-ruby-name rt { + /* Elegant, subdued annotation text */ + font-size: 0.45em; + font-weight: 500; + letter-spacing: 0.08em; + line-height: 1.2; + + /* Subtle gradient text for premium feel */ + background: linear-gradient(135deg, + var(--color-gray-500) 0%, + var(--color-gray-400) 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + + /* Smooth reveal animation */ + opacity: 0.85; + transition: opacity 0.3s ease, transform 0.3s ease; +} + +.dark .hb-ruby-name rt { + background: linear-gradient(135deg, + var(--color-gray-400) 0%, + var(--color-gray-300) 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +/* Hover enhancement - subtle lift */ +.hb-ruby-name:hover rt { + opacity: 1; + transform: translateY(-1px); +} + +/* CJK-optimized variant - larger annotation for CJK characters over Latin */ +.hb-ruby-name--cjk rt { + font-size: 0.5em; + font-weight: 400; + letter-spacing: 0.12em; +} + +/* Latin-optimized variant - smaller annotation for romanization over CJK */ +.hb-ruby-name--latin rt { + font-size: 0.4em; + font-weight: 500; + text-transform: none; +} + +/* Accessibility: respect reduced motion */ +@media (prefers-reduced-motion: reduce) { + .hb-ruby-name rt { + transition: none; + } + + .hb-ruby-name:hover rt { + transform: none; + } +} + +/* Fallback styling for browsers without ruby support */ +@supports not (display: ruby) { + .hb-ruby-name { + display: inline-block; + } + + .hb-ruby-name rt { + display: block; + font-size: 0.6em; + margin-bottom: 0.25em; + } +} + +/* Legacy class support */ .ruby-modern { ruby-position: over; } @@ -151,7 +232,8 @@ text-align: center; font-size: 20px; background-color: #fff; - color: #000; /* override parent alpha */ + color: #000; + /* override parent alpha */ box-shadow: 0 10px 20px rgb(0 0 0 / 4%), 0 2px 6px rgb(0 0 0 / 4%), @@ -198,4 +280,4 @@ background-image: radial-gradient(at 20% 25%, hsla(212, 35%, 15%, 1) 0px, transparent 50%), radial-gradient(at 75% 30%, hsla(160, 35%, 15%, 1) 0px, transparent 50%), radial-gradient(at 25% 80%, hsla(280, 35%, 15%, 1) 0px, transparent 50%), radial-gradient(at 75% 85%, hsla(30, 35%, 15%, 1) 0px, transparent 50%); -} +} \ No newline at end of file diff --git a/modules/blox/blox/resume-biography-3/README.md b/modules/blox/blox/resume-biography-3/README.md index bb436ed8..4f052e6d 100644 --- a/modules/blox/blox/resume-biography-3/README.md +++ b/modules/blox/blox/resume-biography-3/README.md @@ -35,6 +35,7 @@ design: - **Horizontal Layout**: Desktop-optimized side-by-side arrangement for better space utilization - **Integrated Education**: Built-in education timeline with institution details - **Interests Section**: Personal interests display for a well-rounded professional image +- **Name Pronunciation**: Ruby annotation displays pronunciation guides above your name (set `name.pronunciation` in your author YAML) - **Social Integration**: Complete social media profile links with proper external handling - **Avatar Flexibility**: Multiple size and shape options for personal branding - **Academic Icons**: Beautiful education and achievement icons diff --git a/modules/blox/blox/resume-biography-3/block.html b/modules/blox/blox/resume-biography-3/block.html index 6aa40473..32da642a 100644 --- a/modules/blox/blox/resume-biography-3/block.html +++ b/modules/blox/blox/resume-biography-3/block.html @@ -185,9 +185,24 @@ {{/* Name and Role - Centered */}}
-

- {{ $profile.title }} -

+ {{/* Extract pronunciation for ruby annotation */}} + {{ $name_pronunciation := "" }} + {{ with $profile.name_pronunciation }} + {{ if eq (printf "%T" .) "string" }} + {{ $name_pronunciation = strings.TrimSpace . }} + {{ end }} + {{ end }} + + {{/* Name with optional ruby pronunciation */}} + {{ if and $profile.title $name_pronunciation }} +

+ {{ $profile.title }}{{ $name_pronunciation }} +

+ {{ else }} +

+ {{ $profile.title }} +

+ {{ end }} {{ $pronouns := "" }} {{ with $profile.pronouns }} diff --git a/modules/blox/blox/resume-biography/README.md b/modules/blox/blox/resume-biography/README.md index 9bed5a36..8e6034b9 100644 --- a/modules/blox/blox/resume-biography/README.md +++ b/modules/blox/blox/resume-biography/README.md @@ -10,7 +10,7 @@ Present yourself professionally with the Resume Biography block - a comprehensiv - **Flexible Shapes**: Choose from circle, square, or rounded avatar styles - **Social Integration**: Beautiful social media links with icon support - **Banner Support**: Optional header banner for additional visual impact -- **Name Pronunciation**: Ruby annotation support for proper name pronunciation +- **Name Pronunciation**: Ruby annotation displays pronunciation guides above your name (set `name.pronunciation` in your author YAML) - **Pronoun Support**: Inclusive pronoun display for professional clarity - **Organization Links**: Clickable organization affiliations - **Download Button**: Optional CV/resume download functionality @@ -38,7 +38,7 @@ Present yourself professionally with the Resume Biography block - a comprehensiv - **Immediate Recognition**: Professional photo creates memorable personal brand - **Credibility Signals**: Organization affiliations and social links build trust -- **Accessibility**: Pronunciation guides ensure your name is remembered correctly +- **Accessibility**: Pronunciation guides (Pinyin, furigana, IPA) displayed above your name help visitors remember and pronounce it correctly - **Professional Network**: Social links facilitate professional connections ## 💡 Customization Options diff --git a/modules/blox/blox/resume-biography/block.html b/modules/blox/blox/resume-biography/block.html index 8b0bb757..6aa444c3 100644 --- a/modules/blox/blox/resume-biography/block.html +++ b/modules/blox/blox/resume-biography/block.html @@ -246,9 +246,24 @@
{{ end }} -
- {{- $profile_title -}} -
+ {{/* Extract pronunciation for ruby annotation */}} + {{ $name_pronunciation := "" }} + {{ with $profile.name_pronunciation }} + {{ if eq (printf "%T" .) "string" }} + {{ $name_pronunciation = strings.TrimSpace . }} + {{ end }} + {{ end }} + + {{/* Name with optional ruby pronunciation */}} + {{ if and $profile_title $name_pronunciation }} +

+ {{ $profile_title }}{{ $name_pronunciation }} +

+ {{ else }} +
+ {{- $profile_title -}} +
+ {{ end }} {{- with $profile_pronouns -}}
({{ . }})
{{- end -}}