Fix Gemini, Claude and ChatGPT Canvas typography, RTL lists, and English font fallbacks

CHANGELOG.md

@@ -12,6 +12,9 @@ This project follows a practical release-note format:
 
 ## Unreleased
 
+- Fixed font application across Gemini and Claude conversation sidebars, hover
+  previews, and response messages containing CSS custom properties. Aligned
+  ChatGPT Canvas RTL list markers and parents to the right.
 - Added versioned browser downloads, SHA-256 manifests, build metadata, and
   installation guidance to GitHub releases without rebuilding verified packages.
 - Added automatic collection of matching store-signed Chrome CRX3 and Firefox

assets/styles/chatgpt.css

@@ -81,14 +81,14 @@ body :where(
 ):not(
   :is([style*="font-family" i], [style*="font:" i]),
   :is([style*="font-family" i], [style*="font:" i]) *,
-  :is(pre, code, [class*="code-block"], [class*="CodeBlock"], [class*="code-snippet"], .CodeMirror, .monaco-editor, .cm-editor, .hljs, [class*="language-"]),
-  :is(pre, code, [class*="code-block"], [class*="CodeBlock"], [class*="code-snippet"], .CodeMirror, .monaco-editor, .cm-editor, .hljs, [class*="language-"]) *,
+  :is(pre, code, [class*="code" i], .CodeMirror, .monaco-editor, .cm-editor, .hljs, [class*="language-"]),
+  :is(pre, code, [class*="code" i], .CodeMirror, .monaco-editor, .cm-editor, .hljs, [class*="language-"]) *,
   :is(.katex, math, [role="math"], mjx-container),
   :is(.katex, math, [role="math"], mjx-container) *,
   [aria-hidden="true"],
   [aria-hidden="true"] *,
-  :is([class*="icon" i], [class*="symbol" i], mat-icon, [class*="fa-"], .fa, .fab, .fad, .fal, .far, .fas, .fass, .fasr, .fat, .icofont, .typcn, mu, [class*="mu-"], [class*="vjs-"]),
-  :is([class*="icon" i], [class*="symbol" i], mat-icon, [class*="fa-"], .fa, .fab, .fad, .fal, .far, .fas, .fass, .fasr, .fat, .icofont, .typcn, mu, [class*="mu-"], [class*="vjs-"]) *
+  :is([class*="icon" i], [class*="symbol" i], mat-icon, [class*="fa-"], .fa, .fab, .fad, .fal, .far, .fas, .icofont, .typcn, [class*="mu-"], [class*="vjs-"]),
+  :is([class*="icon" i], [class*="symbol" i], mat-icon, [class*="fa-"], .fa, .fab, .fad, .fal, .far, .fas, .icofont, .typcn, [class*="mu-"], [class*="vjs-"]) *
 ) {
   font-family: var(--fontara-font),
     var(--fontara-chatgpt-font-sans-child-fallback) !important;
@@ -117,18 +117,20 @@ body :where(
   text-align: right !important;
 }
 
-[class*="writing-block"] :is(p, h1, h2, h3, h4, h5, h6, li, th, td, blockquote)[dir="rtl"] {
+:is([class*="writing-block"], .ProseMirror) :is(p, h1, h2, h3, h4, h5, h6, th, td, blockquote)[dir="rtl"],
+:is([class*="writing-block"], .ProseMirror)[dir="rtl"] li,
+:is([class*="writing-block"], .ProseMirror) li:is([dir="rtl"], :has([dir="rtl"]), :has(p[dir="auto"])) {
   direction: rtl !important;
   text-align: right !important;
 }
 
-[class*="writing-block"] :is(ul, ol)[dir="rtl"],
-[class*="writing-block"] :is(ul, ol):has(> li[dir="rtl"]) {
+:is([class*="writing-block"], .ProseMirror)[dir="rtl"] :is(ul, ol),
+:is([class*="writing-block"], .ProseMirror) :is(ul, ol):is([dir="rtl"], :has([dir="rtl"]), :has(p[dir="auto"])) {
   padding-inline: 1.5rem 0 !important;
   direction: rtl !important;
   text-align: right !important;
 }
 
-[class*="writing-block"] table:has([dir="rtl"]) {
+:is([class*="writing-block"], .ProseMirror) table:has([dir="rtl"]) {
   direction: rtl !important;
 }

assets/styles/claude.css

@@ -1,16 +1,22 @@
 :root {
-  --fontara-claude-anthropic-sans-root-fallback: "Anthropic Sans", system-ui,
-    "Segoe UI", Roboto, Helvetica, Arial, sans-serif, ui-sans-serif, system-ui,
-    -apple-system, "Segoe UI", Roboto, sans-serif;
-  --fontara-claude-anthropic-sans-ui-fallback: "Anthropic Sans", system-ui,
-    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  --fontara-claude-anthropic-serif-display-fallback: "Anthropic Serif",
-    Georgia, "Arial Hebrew", "Noto Sans Hebrew", "Times New Roman", Times,
-    "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "PingFang TC",
-    "Microsoft JhengHei", "Noto Sans CJK TC", "PingFang SC",
-    "Microsoft YaHei", "Noto Sans CJK SC", "Apple SD Gothic Neo",
-    "Malgun Gothic", "Noto Sans CJK KR", serif;
-  --fontara-claude-message-fallback: var(--fontara-claude-anthropic-serif-display-fallback);
+  --fontara-claude-anthropic-sans-root-fallback: var(--cds-font-sans, "anthropic-sans"),
+    "anthropic-sans", "Anthropic Sans", system-ui, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif;
+  --fontara-claude-anthropic-sans-ui-fallback: var(--font-ui, "anthropic-sans"),
+    "anthropic-sans", "Anthropic Sans", system-ui, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif;
+  --fontara-claude-anthropic-serif-display-fallback: "anthropic-serif",
+    "Anthropic Serif", Georgia, "Times New Roman", Times, serif;
+  --fontara-claude-message-fallback: var(
+    --_prose-font-body,
+    var(
+      --font-claude-response,
+      var(
+        --cds-font-voice,
+        var(--fontara-claude-anthropic-serif-display-fallback)
+      )
+    )
+  );
 }
 
 .cds-root[data-font],
@@ -36,43 +42,22 @@
   [data-sourcepos],
   [data-row-label],
   [data-row-label] *,
+  [data-row-main-button],
+  [data-row-main-button] *,
+  [data-roving-item],
   .dframe-fade-label,
   [class*="dframe-"],
-  [data-cds="Prose"],
-  .prose,
-  .standard-markdown,
-  .standard-markdown :where(
-    p,
-    span,
-    div,
-    li,
-    ul,
-    ol,
-    strong,
-    em,
-    b,
-    i,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    blockquote,
-    td,
-    th
-  ),
   body,
   html
 ):not(
-  [style*="font-"],
-  [style*="font-"] *,
+  :is([style*="font-family" i], [style*="font:" i]),
+  :is([style*="font-family" i], [style*="font:" i]) *,
   pre,
   pre *,
   code,
   code *,
-  [class*="code" i],
-  [class*="code" i] *,
+  :is([class*="code" i], .CodeMirror, .monaco-editor, .cm-editor, .hljs, [class*="language-"]),
+  :is([class*="code" i], .CodeMirror, .monaco-editor, .cm-editor, .hljs, [class*="language-"]) *,
   .katex,
   .katex *,
   math,
@@ -81,20 +66,10 @@
   [role="math"] *,
   mjx-container,
   mjx-container *,
-  [class*="icon" i],
-  [class*="icon" i] *,
-  [class*="symbol" i],
-  [class*="symbol" i] *,
   [aria-hidden="true"],
   [aria-hidden="true"] *,
-  [class*="fa-"],
-  [class*="fa-"] *,
-  mat-icon,
-  mat-icon *,
-  :is(.fa, .fab, .fad, .fal, .far, .fas, .fass, .fasr, .fat, .icofont, .typcn, mu, [class*="mu-"], [class*="vjs-"]),
-  :is(.fa, .fab, .fad, .fal, .far, .fas, .fass, .fasr, .fat, .icofont, .typcn, mu, [class*="mu-"], [class*="vjs-"]) *,
-  :is(.monaco-editor, .cm-editor, .hljs, [class*="language-"]),
-  :is(.monaco-editor, .cm-editor, .hljs, [class*="language-"]) *
+  :is([class*="icon" i], [class*="symbol" i], [data-cds="Icon"], mat-icon, [class*="fa-"], .fa, .fab, .fad, .fal, .far, .fas, .icofont, .typcn, [class*="mu-"], [class*="vjs-"]),
+  :is([class*="icon" i], [class*="symbol" i], [data-cds="Icon"], mat-icon, [class*="fa-"], .fa, .fab, .fad, .fal, .far, .fas, .icofont, .typcn, [class*="mu-"], [class*="vjs-"]) *
 ) {
   font-family: var(--fontara-font),
     var(--fontara-claude-anthropic-sans-ui-fallback) !important;
@@ -109,7 +84,17 @@
   --fontara-claude-message-fallback: var(--fontara-claude-anthropic-sans-ui-fallback);
 }
 
-:is(article, [data-test-render-count], .font-claude-message, [role="article"], [class*="font-user-message"]) :where(
+:is(
+  article,
+  [data-test-render-count],
+  .font-claude-message,
+  [role="article"],
+  [class*="font-user-message"],
+  [data-cds="Prose"],
+  [data-perf-reply-text],
+  .standard-markdown,
+  [data-testid*="message"]
+) :where(
   p,
   span,
   div,
@@ -118,6 +103,10 @@
   h1, h2, h3, h4, h5, h6,
   li,
   label,
+  em,
+  strong,
+  b,
+  i,
   blockquote,
   figcaption,
   summary,
@@ -126,36 +115,26 @@
   legend,
   [role="heading"]
 ):not(
-  [style*="font-"],
-  [style*="font-"] *,
+  :is([style*="font-family" i], [style*="font:" i]),
+  :is([style*="font-family" i], [style*="font:" i]) *,
   pre,
   pre *,
   code,
   code *,
-  [class*="code" i],
-  [class*="code" i] *,
+  :is([class*="code" i], .CodeMirror, .monaco-editor, .cm-editor, .hljs, [class*="language-"]),
+  :is([class*="code" i], .CodeMirror, .monaco-editor, .cm-editor, .hljs, [class*="language-"]) *,
   .katex,
   .katex *,
-  math,
-  math *,
   [role="math"],
   [role="math"] *,
+  math,
+  math *,
   mjx-container,
   mjx-container *,
-  [class*="icon" i],
-  [class*="icon" i] *,
-  [class*="symbol" i],
-  [class*="symbol" i] *,
   [aria-hidden="true"],
   [aria-hidden="true"] *,
-  [class*="fa-"],
-  [class*="fa-"] *,
-  mat-icon,
-  mat-icon *,
-  :is(.fa, .fab, .fad, .fal, .far, .fas, .fass, .fasr, .fat, .icofont, .typcn, mu, [class*="mu-"], [class*="vjs-"]),
-  :is(.fa, .fab, .fad, .fal, .far, .fas, .fass, .fasr, .fat, .icofont, .typcn, mu, [class*="mu-"], [class*="vjs-"]) *,
-  :is(.monaco-editor, .cm-editor, .hljs, [class*="language-"]),
-  :is(.monaco-editor, .cm-editor, .hljs, [class*="language-"]) *
+  :is([class*="icon" i], [class*="symbol" i], [data-cds="Icon"], mat-icon, [class*="fa-"], .fa, .fab, .fad, .fal, .far, .fas, .icofont, .typcn, [class*="mu-"], [class*="vjs-"]),
+  :is([class*="icon" i], [class*="symbol" i], [data-cds="Icon"], mat-icon, [class*="fa-"], .fa, .fab, .fad, .fal, .far, .fas, .icofont, .typcn, [class*="mu-"], [class*="vjs-"]) *
 ) {
   font-family: var(--fontara-font),
     var(--fontara-claude-message-fallback) !important;

assets/styles/gemini.css

@@ -39,14 +39,14 @@ body :where(
   [role="option"],
   [role="tab"]
 ):not(
-  [style*="font-"],
-  [style*="font-"] *,
+  :is([style*="font-family" i], [style*="font:" i]),
+  :is([style*="font-family" i], [style*="font:" i]) *,
   pre,
   pre *,
   code,
   code *,
-  [class*="code" i],
-  [class*="code" i] *,
+  :is([class*="code" i], .CodeMirror, .monaco-editor, .cm-editor, .hljs, [class*="language-"]),
+  :is([class*="code" i], .CodeMirror, .monaco-editor, .cm-editor, .hljs, [class*="language-"]) *,
   .katex,
   .katex *,
   math,
@@ -55,20 +55,12 @@ body :where(
   [role="math"] *,
   mjx-container,
   mjx-container *,
-  [class*="icon" i],
-  [class*="icon" i] *,
-  [class*="symbol" i],
-  [class*="symbol" i] *,
   [aria-hidden="true"],
   [aria-hidden="true"] *,
-  [class*="fa-"],
-  [class*="fa-"] *,
-  mat-icon,
-  mat-icon *,
-  :is(.fa, .fab, .fad, .fal, .far, .fas, .fass, .fasr, .fat, .icofont, .typcn, mu, [class*="mu-"], [class*="vjs-"]),
-  :is(.fa, .fab, .fad, .fal, .far, .fas, .fass, .fasr, .fat, .icofont, .typcn, mu, [class*="mu-"], [class*="vjs-"]) *,
-  :is(.monaco-editor, .cm-editor, .hljs, [class*="language-"]),
-  :is(.monaco-editor, .cm-editor, .hljs, [class*="language-"]) *
+  :is(mat-icon, gem-icon, [class*="material-symbol"], [class*="material-icon"], [class*="lumi-symbol"], [class*="google-symbol"], [class*="fa-"], .fa, .fab, .fad, .fal, .far, .fas, .icofont, .typcn, [class*="mu-"], [class*="vjs-"]),
+  :is(mat-icon, gem-icon, [class*="material-symbol"], [class*="material-icon"], [class*="lumi-symbol"], [class*="google-symbol"], [class*="fa-"], .fa, .fab, .fad, .fal, .far, .fas, .icofont, .typcn, [class*="mu-"], [class*="vjs-"]) *,
+  :is([class*="icon" i], [class*="symbol" i]):not([class*="-with-"], [class*="with-"], [class*="has-"]),
+  :is([class*="icon" i], [class*="symbol" i]):not([class*="-with-"], [class*="with-"], [class*="has-"]) *
 ) {
   font-family: var(--fontara-font),
     var(--fontara-gemini-google-sans-flex-ui-fallback) !important;

src/inject/rtl/site-adapters.ts

@@ -334,16 +334,24 @@ function createChatGptAdapter(): RtlSiteAdapter {
         // individual text blocks choose a direction instead of the editor root.
         if (engine.isExcluded(child) || child.matches(wbSel)) return
         const childText = getTextWithoutSelector(child, mathGuard)
-        if (engine.needsRTL(childText)) {
+        if (
+          engine.needsRTL(childText) ||
+          (child.matches('p[dir="auto"]') &&
+            detectDominantDirection(childText) === "rtl")
+        ) {
           engine.applyRTL(child)
-          if (
-            child.tagName === "LI" &&
-            child.parentElement &&
-            (child.parentElement.tagName === "UL" ||
-              child.parentElement.tagName === "OL")
-          ) {
-            engine.rememberStyle(child.parentElement, [])
-            child.parentElement.setAttribute("dir", "rtl")
+          const listItem = child.tagName === "LI" ? child : child.closest("li")
+          if (listItem) {
+            engine.rememberStyle(listItem, [])
+            listItem.setAttribute("dir", "rtl")
+            const listRoot = listItem.parentElement
+            if (
+              listRoot &&
+              (listRoot.tagName === "UL" || listRoot.tagName === "OL")
+            ) {
+              engine.rememberStyle(listRoot, [])
+              listRoot.setAttribute("dir", "rtl")
+            }
           }
           if (child.tagName === "TD" || child.tagName === "TH") {
             const table = child.closest("table")
@@ -705,24 +713,29 @@ function createGeminiAdapter(): RtlSiteAdapter {
           unicode-bidi: embed;
         }
 
-        ${messageScope} :is(ul, ol)[dir="rtl"] {
+        ${messageScope} :is(ul, ol)[dir="rtl"]:not(.md-content *) {
           direction: rtl !important;
           text-align: right !important;
           padding-inline-start: 2rem !important;
           padding-inline-end: 0 !important;
         }
 
-        ${messageScope} :is(ul, ol)[dir="rtl"],
-        ${messageScope} :is(ul, ol):has(> li[dir="rtl"]) {
+        ${messageScope} :is(ul, ol):not(.md-content *):is([dir="rtl"], :has(> li[dir="rtl"])) {
           list-style-type: revert !important;
         }
 
-        ${messageScope} :is(ul, ol)[dir="rtl"] > li,
-        ${messageScope} :is(ul, ol) > li[dir="rtl"] {
+        ${messageScope} :is(ul, ol):not(.md-content *)[dir="rtl"] > li,
+        ${messageScope} :is(ul, ol):not(.md-content *) > li[dir="rtl"] {
           list-style-type: inherit !important;
           list-style-position: outside !important;
         }
 
+        ${messageScope} :is(ul, ol):not(.md-content *)[dir="rtl"] > li::before,
+        ${messageScope} :is(ul, ol):not(.md-content *) > li[dir="rtl"]::before {
+          content: none !important;
+          display: none !important;
+        }
+
         ${messageScope} :is(ul, ol)[dir="rtl"] > li:not([dir="ltr"]),
         ${messageScope} :is(ul, ol) > li[dir="rtl"] {
           direction: rtl !important;