From e43e55c2b78d0e386425c2163ab31c4bf6e6fd23 Mon Sep 17 00:00:00 2001
From: Takuma IMAMURA <209989118+hyperfinitism@users.noreply.github.com>
Date: Wed, 6 May 2026 18:00:11 +0900
Subject: [PATCH] feat: replace render-time text wrapping with browser-native
 wrapping (#191)

This PR uses `foreignObject` with CSS line-clamp to let the browser
handle text wrapping natively instead of manually wrapping on the
server. This provides better font-aware wrapping while keeping
server-side line estimation for SVG height calculation.

Fixes https://github.com/anuraghazra/github-readme-stats/issues/4862.

### Example card

<img width="400" height="150" alt="hyperfinitism-sample-repo"
src="https://github.com/user-attachments/assets/c3a58531-c689-4798-af02-f55ef3a90fa1"
/>

---------

Signed-off-by: Takuma IMAMURA <209989118+hyperfinitism@users.noreply.github.com>
Co-authored-by: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
---
 .../__snapshots__/gist.test.js.snap           |  30 ++-
 .../__snapshots__/pin.test.js.snap            |  28 +-
 docs/advanced_documentation.md                |   2 +
 packages/core/package.json                    |   3 +-
 packages/core/src/api/gist.js                 |   2 +
 packages/core/src/api/pin.js                  |   2 +
 packages/core/src/cards/gist.js               |  69 ++++-
 packages/core/src/cards/repo.js               |  85 ++++--
 packages/core/src/cards/types.d.ts            |   2 +
 packages/core/src/common/fmt.js               |  27 +-
 packages/core/src/common/render.js            | 245 ++++++++++++++++--
 packages/core/src/fetchers/stats.js           |   2 +-
 packages/core/src/fetchers/top-languages.js   |   2 +-
 packages/core/tests/fmt.test.js               |  22 +-
 packages/core/tests/render.test.js            |  76 +++++-
 packages/core/tests/renderGistCard.test.js    |  24 +-
 packages/core/tests/renderRepoCard.test.js    |  35 ++-
 packages/core/tests/renderStatsCard.test.js   |   2 +-
 pnpm-lock.yaml                                |   3 -
 19 files changed, 537 insertions(+), 124 deletions(-)

diff --git a/apps/backend/tests/public-instance/__snapshots__/gist.test.js.snap b/apps/backend/tests/public-instance/__snapshots__/gist.test.js.snap
index 6e8e2779..57e28a92 100644
--- a/apps/backend/tests/public-instance/__snapshots__/gist.test.js.snap
+++ b/apps/backend/tests/public-instance/__snapshots__/gist.test.js.snap
@@ -30,7 +30,7 @@ exports[`Test /api/gist contract > should match the private missing-id response
 
 exports[`Test /api/gist contract > should match the public happy-path response snapshot 1`] = `
 {
-  "content": "<svg width="400" height="192" viewBox="0 0 400 192" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+  "content": "<svg width="400" height="180" viewBox="0 0 400 180" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
         <title id="titleId"/>
         <desc id="descId"/>
         <style>
@@ -44,7 +44,10 @@ exports[`Test /api/gist contract > should match the public happy-path response s
             .header { font-size: 15.5px; }
           }
           
-    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .description {
+      font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif;fill: #434d58;
+      
+    }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
     .icon { fill: #586069 }
   
@@ -90,20 +93,20 @@ exports[`Test /api/gist contract > should match the public happy-path response s
         <g data-testid="main-card-body" transform="translate(0, 55)">
           
     <text class="description" x="25" y="-5">
-        <tspan dy="1.2em" x="25">List of countries and territories in English and Spanish:</tspan><tspan dy="1.2em" x="25">name, continent, capital, dial code, country codes, TLD,</tspan><tspan dy="1.2em" x="25">and area in sq km. Lista de países y territorios en</tspan><tspan dy="1.2em" x="25">Inglés y Español: nombre, continente, capital,</tspan><tspan dy="1.2em" x="25">código de teléfono, códigos de país,</tspan><tspan dy="1.2em" x="25">dominio y área en km cuadrados. Updated 2023</tspan>
+        <tspan dy="1.2em" x="25">List of countries and territories in English and Spanish: name,</tspan><tspan dy="1.2em" x="25">continent, capital, dial code, country codes, TLD, and area in</tspan><tspan dy="1.2em" x="25">sq km. Lista de países y territorios en Inglés y Español:</tspan><tspan dy="1.2em" x="25">nombre, continente, capital, código de teléfono, códigos de</tspan><tspan dy="1.2em" x="25">país, dominio y área en km cuadrados. Updated 2023</tspan>
     </text>
 
-    <g transform="translate(30, 117)">
+    <g transform="translate(30, 105)">
         <g transform="translate(0, 0)">
     <g data-testid="primary-lang">
       <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="#292929"/>
       <text data-testid="lang-name" class="gray" x="15">JSON</text>
     </g>
-    </g><g transform="translate(56.96875, 0)"><g transform="translate(0, 0)">
+    </g><g transform="translate(53.67999954223633, 0)"><g transform="translate(0, 0)">
       <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>
       </svg>
-    </g><g transform="translate(20, 0)"><text data-testid="starsCount" class="gray">33</text></g></g><g transform="translate(111.28125, 0)"><g transform="translate(0, 0)">
+    </g><g transform="translate(20, 0)"><text data-testid="starsCount" class="gray">33</text></g></g><g transform="translate(107.59999923706056, 0)"><g transform="translate(0, 0)">
       <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/>
       </svg>
@@ -127,7 +130,7 @@ exports[`Test /api/gist contract > should match the public happy-path response s
 
 exports[`Test /api/gist contract > should match the public many-params response snapshot 1`] = `
 {
-  "content": "<svg width="400" height="192" viewBox="0 0 400 192" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
+  "content": "<svg width="400" height="180" viewBox="0 0 400 180" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="descId">
         <title id="titleId"/>
         <desc id="descId"/>
         <style>
@@ -141,7 +144,10 @@ exports[`Test /api/gist contract > should match the public many-params response
             .header { font-size: 15.5px; }
           }
           
-    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    .description {
+      font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif;fill: #abcdef;
+      
+    }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
     .icon { fill: #ff00aa }
   
@@ -187,20 +193,20 @@ exports[`Test /api/gist contract > should match the public many-params response
         <g data-testid="main-card-body" transform="translate(0, 55)">
           
     <text class="description" x="25" y="-5">
-        <tspan dy="1.2em" x="25">List of countries and territories in English and Spanish:</tspan><tspan dy="1.2em" x="25">name, continent, capital, dial code, country codes, TLD,</tspan><tspan dy="1.2em" x="25">and area in sq km. Lista de países y territorios en</tspan><tspan dy="1.2em" x="25">Inglés y Español: nombre, continente, capital,</tspan><tspan dy="1.2em" x="25">código de teléfono, códigos de país,</tspan><tspan dy="1.2em" x="25">dominio y área en km cuadrados. Updated 2023</tspan>
+        <tspan dy="1.2em" x="25">List of countries and territories in English and Spanish: name,</tspan><tspan dy="1.2em" x="25">continent, capital, dial code, country codes, TLD, and area in</tspan><tspan dy="1.2em" x="25">sq km. Lista de países y territorios en Inglés y Español:</tspan><tspan dy="1.2em" x="25">nombre, continente, capital, código de teléfono, códigos de</tspan><tspan dy="1.2em" x="25">país, dominio y área en km cuadrados. Updated 2023</tspan>
     </text>
 
-    <g transform="translate(30, 117)">
+    <g transform="translate(30, 105)">
         <g transform="translate(0, 0)">
     <g data-testid="primary-lang">
       <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="#292929"/>
       <text data-testid="lang-name" class="gray" x="15">JSON</text>
     </g>
-    </g><g transform="translate(56.96875, 0)"><g transform="translate(0, 0)">
+    </g><g transform="translate(53.67999954223633, 0)"><g transform="translate(0, 0)">
       <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>
       </svg>
-    </g><g transform="translate(20, 0)"><text data-testid="starsCount" class="gray">33</text></g></g><g transform="translate(111.28125, 0)"><g transform="translate(0, 0)">
+    </g><g transform="translate(20, 0)"><text data-testid="starsCount" class="gray">33</text></g></g><g transform="translate(107.59999923706056, 0)"><g transform="translate(0, 0)">
       <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/>
       </svg>
diff --git a/apps/backend/tests/public-instance/__snapshots__/pin.test.js.snap b/apps/backend/tests/public-instance/__snapshots__/pin.test.js.snap
index 959c008a..32426540 100644
--- a/apps/backend/tests/public-instance/__snapshots__/pin.test.js.snap
+++ b/apps/backend/tests/public-instance/__snapshots__/pin.test.js.snap
@@ -100,11 +100,14 @@ exports[`Test /api/pin contract > should match the public happy-path response sn
             .header { font-size: 15.5px; }
           }
           
-    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
+    .description {
+      font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif;fill: #434d58;
+      
+    }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
     .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
     .badge rect { opacity: 0.2 }
-    
+
     .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58 }
     .stagger {
       opacity: 0;
@@ -160,8 +163,8 @@ exports[`Test /api/pin contract > should match the public happy-path response sn
           
     
 
-    <text class="description" x="25" y="-5">
-      <tspan dy="1.2em" x="25">Help us take over the world with a deeply customizable</tspan><tspan dy="1.2em" x="25">React, TypeScript and GraphQL chat app that has enough text</tspan><tspan dy="1.2em" x="25">to wrap across multiple lines in the repository card.</tspan>
+    <text class="description" x="25" y="-5"> 
+      <tspan dy="1.2em" x="25">Help us take over the world with a deeply customizable</tspan><tspan dy="1.2em" x="25">React, TypeScript and GraphQL chat app that has enough</tspan><tspan dy="1.2em" x="25">text to wrap across multiple lines in the repository card.</tspan>
     </text>
 
     <g transform="translate(30, 75)">
@@ -170,11 +173,11 @@ exports[`Test /api/pin contract > should match the public happy-path response sn
       <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="#2b7489"/>
       <text data-testid="lang-name" class="gray" x="15">TypeScript</text>
     </g>
-    </g><g transform="translate(82.24375, 0)"><g transform="translate(0, 0)">
+    </g><g transform="translate(80.53999967575072, 0)"><g transform="translate(0, 0)">
       <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>
       </svg>
-    </g><g transform="translate(20, 0)"><text data-testid="stargazers" class="gray">38k</text></g></g><g transform="translate(142.55625, 0)"><g transform="translate(0, 0)">
+    </g><g transform="translate(20, 0)"><text data-testid="stargazers" class="gray">38k</text></g></g><g transform="translate(140.4199994087219, 0)"><g transform="translate(0, 0)">
       <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/>
       </svg>
@@ -217,11 +220,14 @@ exports[`Test /api/pin contract > should match the public many-params response s
             .header { font-size: 15.5px; }
           }
           
-    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
+    .description {
+      font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif;fill: #abcdef;
+      
+    }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
     .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
     .badge rect { opacity: 0.2 }
-    
+
     .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #abcdef }
     .stagger {
       opacity: 0;
@@ -277,7 +283,7 @@ exports[`Test /api/pin contract > should match the public many-params response s
           
     
 
-    <text class="description" x="25" y="-5">
+    <text class="description" x="25" y="-5"> 
       <tspan dy="1.2em" x="25">Help us take over the world with a deeply customizable React, TypeScript and GraphQL...</tspan>
     </text>
 
@@ -287,11 +293,11 @@ exports[`Test /api/pin contract > should match the public many-params response s
       <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="#2b7489"/>
       <text data-testid="lang-name" class="gray" x="15">TypeScript</text>
     </g>
-    </g><g transform="translate(82.24375, 0)"><g transform="translate(0, 0)">
+    </g><g transform="translate(80.53999967575072, 0)"><g transform="translate(0, 0)">
       <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>
       </svg>
-    </g><g transform="translate(20, 0)"><text data-testid="stargazers" class="gray">38k</text></g></g><g transform="translate(142.55625, 0)"><g transform="translate(0, 0)">
+    </g><g transform="translate(20, 0)"><text data-testid="stargazers" class="gray">38k</text></g></g><g transform="translate(140.4199994087219, 0)"><g transform="translate(0, 0)">
       <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/>
       </svg>
diff --git a/docs/advanced_documentation.md b/docs/advanced_documentation.md
index 868979da..29992e97 100644
--- a/docs/advanced_documentation.md
+++ b/docs/advanced_documentation.md
@@ -323,6 +323,7 @@ You can customize the appearance and behavior of the pinned repository card usin
 | Name | Description | Type | Default value |
 | --- | --- | --- | --- |
 | `show_owner` | Shows the repo's owner name. | boolean | `false` |
+| `browser_rendering` | Compute text wrapping of repository description natively in the browser, instead of computing it server-side. | boolean | `false` |
 | `description_lines_count` | Manually set the number of lines for the description. Specified value will be clamped between 1 and 3. If this parameter is not specified, the number of lines will be automatically adjusted according to the actual length of the description. | number | `null` |
 | `card_width` | Sets the card's width manually. | number | `400px  (approx.)` |
 | `show_icons` | Shows icons near all stats enabled via `show`. | boolean | `true` |
@@ -368,6 +369,7 @@ You can customize the appearance and behavior of the gist card using the [common
 | Name | Description | Type | Default value |
 | --- | --- | --- | --- |
 | `show_owner` | Shows the gist's owner name. | boolean | `false` |
+| `browser_rendering` | Compute text wrapping of gist description natively in the browser, instead of computing it server-side. | boolean | `false` |
 
 ### Demo
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 585d6264..bdba20f1 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -88,7 +88,6 @@
   "dependencies": {
     "axios": "^1.15.2",
     "emoji-name-map": "^2.0.3",
-    "github-username-regex": "^1.0.0",
-    "word-wrap": "^1.2.5"
+    "github-username-regex": "^1.0.0"
   }
 }
diff --git a/packages/core/src/api/gist.js b/packages/core/src/api/gist.js
index ebce051e..d0307124 100644
--- a/packages/core/src/api/gist.js
+++ b/packages/core/src/api/gist.js
@@ -23,6 +23,7 @@ export default async (
     border_radius,
     border_color,
     show_owner,
+    browser_rendering,
     hide_border,
   },
   pat = null,
@@ -59,6 +60,7 @@ export default async (
         border_color,
         locale: locale ? locale.toLowerCase() : null,
         show_owner: parseBoolean(show_owner),
+        browser_rendering: parseBoolean(browser_rendering),
         hide_border: parseBoolean(hide_border),
       }),
     };
diff --git a/packages/core/src/api/pin.js b/packages/core/src/api/pin.js
index 77107373..7d6ab950 100644
--- a/packages/core/src/api/pin.js
+++ b/packages/core/src/api/pin.js
@@ -23,6 +23,7 @@ export default async (
     card_width,
     theme,
     show_owner,
+    browser_rendering,
     show,
     show_icons,
     number_format,
@@ -99,6 +100,7 @@ export default async (
         border_color,
         card_width_input: parseInt(card_width, 10),
         show_owner: parseBoolean(show_owner),
+        browser_rendering: parseBoolean(browser_rendering),
         show: showStats,
         show_icons: parseBoolean(show_icons),
         number_format,
diff --git a/packages/core/src/cards/gist.js b/packages/core/src/cards/gist.js
index c8d6437d..a63ac955 100644
--- a/packages/core/src/cards/gist.js
+++ b/packages/core/src/cards/gist.js
@@ -8,16 +8,23 @@ import { icons } from "../common/icons.js";
 import languageColors from "../common/languageColors.json" with { type: "json" };
 import { parseEmojis } from "../common/ops.js";
 import {
+  countWrappedLines,
   createLanguageNode,
   flexLayout,
   iconWithLabel,
   measureText,
+  wrappedTextNode,
+  wrappedTextStyles,
 } from "../common/render.js";
 
 const ICON_SIZE = 16;
 const CARD_DEFAULT_WIDTH = 400;
 const X_OFFSET = 25;
 const HEADER_MAX_LENGTH = 35;
+const DESCRIPTION_BOX_WIDTH = CARD_DEFAULT_WIDTH - 2 * X_OFFSET;
+const DESCRIPTION_FONT_SIZE = 13;
+const DESCRIPTION_LINE_HEIGHT_PX = 16;
+const DESCRIPTION_MAX_LINES = 10;
 
 /**
  * @typedef {import('./types').GistCardOptions} GistCardOptions Gist card options.
@@ -43,6 +50,7 @@ const renderGistCard = (gistData, options = {}) => {
     border_radius,
     border_color,
     show_owner = false,
+    browser_rendering = false,
     hide_border = false,
   } = options;
 
@@ -57,16 +65,50 @@ const renderGistCard = (gistData, options = {}) => {
       theme,
     });
 
-  const lineWidth = 59;
-  const linesLimit = 10;
   const desc = parseEmojis(description || "No description provided");
-  const multiLineDescription = wrapTextMultiline(desc, lineWidth, linesLimit);
-  const descriptionLines = multiLineDescription.length;
-  const descriptionSvg = multiLineDescription
-    .map(
-      (line) => `<tspan dy="1.2em" x="${X_OFFSET}">${encodeHTML(line)}</tspan>`,
-    )
-    .join("");
+
+  let descriptionLines, descriptionSvg;
+  if (browser_rendering) {
+    // The browser performs the actual text wrapping inside the foreignObject;
+    // we only estimate the line count server-side so the SVG can reserve enough
+    // height. The estimate uses measureText for font-aware widths instead of a
+    // fixed character count.
+    descriptionLines = countWrappedLines(
+      desc,
+      DESCRIPTION_FONT_SIZE,
+      DESCRIPTION_BOX_WIDTH,
+      DESCRIPTION_MAX_LINES,
+    );
+
+    descriptionSvg = wrappedTextNode({
+      text: desc,
+      x: X_OFFSET,
+      y: 0,
+      width: DESCRIPTION_BOX_WIDTH,
+      height: descriptionLines * DESCRIPTION_LINE_HEIGHT_PX,
+      lineCount: descriptionLines,
+      className: "description",
+      testId: "description-text",
+    });
+  } else {
+    const linesLimit = 10;
+    const multiLineDescription = wrapTextMultiline(
+      desc,
+      DESCRIPTION_BOX_WIDTH,
+      DESCRIPTION_FONT_SIZE,
+      linesLimit,
+    );
+    descriptionLines = multiLineDescription.length;
+    descriptionSvg = multiLineDescription
+      .map(
+        (line) =>
+          `<tspan dy="1.2em" x="${X_OFFSET}">${encodeHTML(line)}</tspan>`,
+      )
+      .join("");
+    descriptionSvg = `<text class="description" x="${X_OFFSET}" y="-5">
+        ${descriptionSvg}
+    </text>`;
+  }
 
   const lineHeight = descriptionLines > 3 ? 12 : 10;
   const height =
@@ -124,16 +166,17 @@ const renderGistCard = (gistData, options = {}) => {
   });
 
   card.setCSS(`
-    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
+    .description {
+      font: 400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif;fill: ${textColor};
+      ${browser_rendering ? wrappedTextStyles : ""}
+    }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
     .icon { fill: ${iconColor} }
   `);
   card.setHideBorder(hide_border);
 
   return card.render(`
-    <text class="description" x="${X_OFFSET}" y="-5">
-        ${descriptionSvg}
-    </text>
+    ${descriptionSvg}
 
     <g transform="translate(30, ${height - 75})">
         ${starAndForkCount}
diff --git a/packages/core/src/cards/repo.js b/packages/core/src/cards/repo.js
index d5bab6f1..d6fac6d7 100644
--- a/packages/core/src/cards/repo.js
+++ b/packages/core/src/cards/repo.js
@@ -8,19 +8,23 @@ import { encodeHTML } from "../common/html.js";
 import { icons } from "../common/icons.js";
 import { buildSearchFilter, clampValue, parseEmojis } from "../common/ops.js";
 import {
+  countWrappedLines,
   createLanguageNode,
   flexLayout,
   iconWithLabel,
   measureText,
+  wrappedTextNode,
+  wrappedTextStyles,
 } from "../common/render.js";
 import { repoCardLocales } from "../translations.js";
 
 import { createTextNode } from "./stats.js";
 
 const ICON_SIZE = 16;
-const DESCRIPTION_LINE_WIDTH = 59;
 const CARD_DEFAULT_WIDTH = 400;
 const X_OFFSET = 25;
+const DESCRIPTION_FONT_SIZE = 13;
+const DESCRIPTION_LINE_HEIGHT_PX = 16;
 const DESCRIPTION_MAX_LINES = 3;
 
 /**
@@ -81,6 +85,7 @@ const renderRepoCard = (repo, options = {}) => {
     bg_color,
     card_width_input,
     show_owner = false,
+    browser_rendering = false,
     show = [],
     show_icons = true,
     number_format = "short",
@@ -177,27 +182,56 @@ const renderRepoCard = (repo, options = {}) => {
   const header = show_owner ? nameWithOwner : name;
   const langName = (primaryLanguage && primaryLanguage.name) || "Unspecified";
   const langColor = (primaryLanguage && primaryLanguage.color) || "#333";
-  const descriptionMaxLines = description_lines_count
-    ? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
-    : DESCRIPTION_MAX_LINES;
-
   const desc = parseEmojis(description || "No description provided");
-  const multiLineDescription = wrapTextMultiline(
-    desc,
-    Math.round(
-      (card_width - CARD_DEFAULT_WIDTH) / 5.93 + DESCRIPTION_LINE_WIDTH,
-    ),
-    descriptionMaxLines,
-  );
-  const descriptionLinesCount = description_lines_count
-    ? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
-    : multiLineDescription.length;
+  const descriptionBoxWidth = card_width - 2 * X_OFFSET;
 
-  const descriptionSvg = multiLineDescription
-    .map(
-      (line) => `<tspan dy="1.2em" x="${X_OFFSET}">${encodeHTML(line)}</tspan>`,
-    )
-    .join("");
+  let descriptionLinesCount, descriptionSvg;
+  if (browser_rendering) {
+    // The browser performs the actual text wrapping inside the foreignObject;
+    // we only estimate the line count server-side so the SVG can reserve enough
+    // height. The estimate uses measureText for font-aware widths instead of a
+    // fixed character count.
+    descriptionLinesCount = description_lines_count
+      ? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
+      : countWrappedLines(
+          desc,
+          DESCRIPTION_FONT_SIZE,
+          descriptionBoxWidth,
+          DESCRIPTION_MAX_LINES,
+        );
+    descriptionSvg = wrappedTextNode({
+      text: desc,
+      x: X_OFFSET,
+      y: 0,
+      width: descriptionBoxWidth,
+      height: descriptionLinesCount * DESCRIPTION_LINE_HEIGHT_PX,
+      lineCount: descriptionLinesCount,
+      className: "description",
+      testId: "description-text",
+    });
+  } else {
+    const descriptionMaxLines = description_lines_count
+      ? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
+      : DESCRIPTION_MAX_LINES;
+    const multiLineDescription = wrapTextMultiline(
+      desc,
+      descriptionBoxWidth,
+      DESCRIPTION_FONT_SIZE,
+      descriptionMaxLines,
+    );
+    descriptionLinesCount = description_lines_count
+      ? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
+      : multiLineDescription.length;
+    descriptionSvg = multiLineDescription
+      .map(
+        (line) =>
+          `<tspan dy="1.2em" x="${X_OFFSET}">${encodeHTML(line)}</tspan>`,
+      )
+      .join("");
+    descriptionSvg = `<text class="description" x="${X_OFFSET}" y="-5"> 
+      ${descriptionSvg}
+    </text>`;
+  }
 
   const extraHeight = Object.keys(STATS).length
     ? -7 + (Math.ceil(statItems.length / 2) + 1) * extraLHeight
@@ -279,11 +313,14 @@ const renderRepoCard = (repo, options = {}) => {
   card.setHideBorder(hide_border);
   card.setHideTitle(false);
   card.setCSS(`
-    .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
+    .description {
+      font: 400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif;fill: ${colors.textColor};
+      ${browser_rendering ? wrappedTextStyles : ""}
+    }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
     .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
     .badge rect { opacity: 0.2 }
-    
+
     .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
     .stagger {
       opacity: 0;
@@ -316,9 +353,7 @@ const renderRepoCard = (repo, options = {}) => {
           : ""
     }
 
-    <text class="description" x="${X_OFFSET}" y="-5">
-      ${descriptionSvg}
-    </text>
+    ${descriptionSvg}
 
     <g transform="translate(30, ${height - 75 - extraHeight})">
       ${starAndForkCount}
diff --git a/packages/core/src/cards/types.d.ts b/packages/core/src/cards/types.d.ts
index 08b9f933..aff7b01e 100644
--- a/packages/core/src/cards/types.d.ts
+++ b/packages/core/src/cards/types.d.ts
@@ -34,6 +34,7 @@ export type StatCardOptions = CommonOptions & {
 
 export type RepoCardOptions = CommonOptions & {
   show_owner: boolean;
+  browser_rendering: boolean;
   description_lines_count: number;
   card_width_input;
   show: Array<string>;
@@ -73,4 +74,5 @@ export type WakaTimeOptions = CommonOptions & {
 
 export type GistCardOptions = CommonOptions & {
   show_owner: boolean;
+  browser_rendering: boolean;
 };
diff --git a/packages/core/src/common/fmt.js b/packages/core/src/common/fmt.js
index 5bc3ad14..2a46e79f 100644
--- a/packages/core/src/common/fmt.js
+++ b/packages/core/src/common/fmt.js
@@ -1,8 +1,7 @@
 // @ts-check
 
-import wrap from "word-wrap";
-
 import { encodeHTML } from "./html.js";
+import { splitWrappedText } from "./render.js";
 
 /**
  * Retrieves num with suffix k(thousands) precise to given decimal places.
@@ -57,26 +56,16 @@ const formatBytes = (bytes) => {
  * Split text over multiple lines based on the card width.
  *
  * @param {string} text Text to split.
- * @param {number} width Line width in number of characters.
+ * @param {number} width Available wrap width in px.
+ * @param {number} fontSize Font size in px.
  * @param {number} maxLines Maximum number of lines.
  * @returns {string[]} Array of lines.
  */
-const wrapTextMultiline = (text, width = 59, maxLines = 3) => {
-  const fullWidthComma = "，";
-  const encoded = encodeHTML(text);
-  const isChinese = encoded.includes(fullWidthComma);
-
-  let wrapped;
-
-  if (isChinese) {
-    wrapped = encoded.split(fullWidthComma); // Chinese full punctuation
-  } else {
-    wrapped = wrap(encoded, {
-      width,
-    }).split("\n"); // Split wrapped lines to get an array of lines
-  }
-
-  const lines = wrapped.map((line) => line.trim()).slice(0, maxLines); // Only consider maxLines lines
+const wrapTextMultiline = (text, width, fontSize, maxLines = 3) => {
+  const wrapped = splitWrappedText(text, fontSize, width);
+  const lines = wrapped
+    .map((line) => encodeHTML(line.trim()))
+    .slice(0, maxLines); // Only consider maxLines lines
 
   // Add "..." to the last line if the text exceeds maxLines
   if (wrapped.length > maxLines) {
diff --git a/packages/core/src/common/render.js b/packages/core/src/common/render.js
index 7aba75c0..ea58f5e7 100644
--- a/packages/core/src/common/render.js
+++ b/packages/core/src/common/render.js
@@ -86,6 +86,61 @@ const createProgressNode = ({
   `;
 };
 
+/**
+ * Renders multi-line text via a `foreignObject` so the browser performs
+ * native, font-aware wrapping. Content overflowing `lineCount` lines is
+ * clipped (with an ellipsis on the last visible line) by CSS line-clamp.
+ *
+ * @param {object} props Function properties.
+ * @param {string} props.text Text to render (will be HTML-encoded).
+ * @param {number} props.x X position of the foreignObject.
+ * @param {number} props.y Y position of the foreignObject.
+ * @param {number} props.width Width of the wrap box.
+ * @param {number} props.height Height of the wrap box.
+ * @param {number} props.lineCount Maximum number of lines to display.
+ * @param {string} props.className CSS class applied to the inner element.
+ * @param {string=} props.testId Optional test id for the inner element.
+ * @returns {string} foreignObject SVG node.
+ */
+const wrappedTextNode = ({
+  text,
+  x,
+  y,
+  width,
+  height,
+  lineCount,
+  className,
+  testId,
+}) => {
+  const testIdAttr = testId ? ` data-testid="${testId}"` : "";
+  return `
+    <foreignObject x="${x}" y="${y}" width="${width}" height="${height}">
+      <div xmlns="http://www.w3.org/1999/xhtml" class="${className}" style="--lines: ${lineCount};"${testIdAttr}>${encodeHTML(
+        text,
+      )}</div>
+    </foreignObject>
+  `;
+};
+
+/**
+ * CSS rules used to render multi-line text inside a `foreignObject`. Apply this
+ * to a CSS class (e.g. `.description`) shared with `wrappedTextNode` so the
+ * browser handles wrapping and the line count is taken from the `--lines`
+ * custom property set on the element.
+ */
+const wrappedTextStyles = `
+    margin: 0;
+    line-height: 1.2;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--lines);
+    line-clamp: var(--lines);
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;
+
 /**
  * Creates an icon with label to display repository/gist stats like forks, stars, etc.
  *
@@ -187,7 +242,7 @@ const renderError = ({
 };
 
 /**
- * Retrieve text length.
+ * Retrieve text length based on Segoe UI font.
  *
  * @see https://stackoverflow.com/a/48172630/10629172
  * @param {string} str String to measure.
@@ -197,37 +252,177 @@ const renderError = ({
 const measureText = (str, fontSize = 10) => {
   // prettier-ignore
   const widths = [
-    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-    0, 0, 0, 0, 0.2796875, 0.2765625,
-    0.3546875, 0.5546875, 0.5546875, 0.8890625, 0.665625, 0.190625,
-    0.3328125, 0.3328125, 0.3890625, 0.5828125, 0.2765625, 0.3328125,
-    0.2765625, 0.3015625, 0.5546875, 0.5546875, 0.5546875, 0.5546875,
-    0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875,
-    0.2765625, 0.2765625, 0.584375, 0.5828125, 0.584375, 0.5546875,
-    1.0140625, 0.665625, 0.665625, 0.721875, 0.721875, 0.665625,
-    0.609375, 0.7765625, 0.721875, 0.2765625, 0.5, 0.665625,
-    0.5546875, 0.8328125, 0.721875, 0.7765625, 0.665625, 0.7765625,
-    0.721875, 0.665625, 0.609375, 0.721875, 0.665625, 0.94375,
-    0.665625, 0.665625, 0.609375, 0.2765625, 0.3546875, 0.2765625,
-    0.4765625, 0.5546875, 0.3328125, 0.5546875, 0.5546875, 0.5,
-    0.5546875, 0.5546875, 0.2765625, 0.5546875, 0.5546875, 0.221875,
-    0.240625, 0.5, 0.221875, 0.8328125, 0.5546875, 0.5546875,
-    0.5546875, 0.5546875, 0.3328125, 0.5, 0.2765625, 0.5546875,
-    0.5, 0.721875, 0.5, 0.5, 0.5, 0.3546875, 0.259375, 0.353125, 0.5890625,
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0, 0, 0, 0, 0, 0, 0, 0.2733333110809326, 0.28499999046325686,
+    0.39166667461395266, 0.5900000095367431, 0.5383333206176758,
+    0.8183333396911621, 0.8, 0.22999999523162842, 0.30166666507720946,
+    0.30166666507720946, 0.41666665077209475, 0.6833333492279052,
+    0.21666667461395264, 0.4, 0.21666667461395264, 0.3900000095367432,
+    0.5383333206176758, 0.5383333206176758, 0.5383333206176758,
+    0.5383333206176758, 0.5383333206176758, 0.5383333206176758,
+    0.5383333206176758, 0.5383333206176758, 0.5383333206176758,
+    0.5383333206176758, 0.21666667461395264, 0.21666667461395264,
+    0.6833333492279052, 0.6833333492279052, 0.6833333492279052,
+    0.4483333110809326, 0.9550000190734863, 0.6449999809265137,
+    0.5733333110809327, 0.6183333396911621, 0.7016666889190674,
+    0.5066666603088379, 0.48833332061767576, 0.6866666793823242,
+    0.7099999904632568, 0.26666667461395266, 0.35666666030883787,
+    0.5800000190734863, 0.4699999809265137, 0.8983333587646485,
+    0.7483333110809326, 0.753333330154419, 0.5599999904632569,
+    0.753333330154419, 0.5983333110809326, 0.5316666603088379,
+    0.5233333110809326, 0.6866666793823242, 0.621666669845581,
+    0.9333333015441895, 0.5900000095367431, 0.553333330154419,
+    0.5699999809265137, 0.30166666507720946, 0.37833333015441895,
+    0.30166666507720946, 0.6833333492279052, 0.41500000953674315,
+    0.26833333969116213, 0.5083333492279053, 0.5883333206176757,
+    0.4616666793823242, 0.5883333206176757, 0.5233333110809326,
+    0.3133333444595337, 0.5883333206176757, 0.5666666507720948,
+    0.24166667461395264, 0.24166667461395264, 0.49666666984558105,
+    0.24166667461395264, 0.8616666793823242, 0.5666666507720948,
+    0.5866666793823242, 0.5883333206176757, 0.5883333206176757,
+    0.3483333349227905, 0.425, 0.33833334445953367, 0.5666666507720948,
+    0.4783333301544189, 0.7233333110809326, 0.45833334922790525,
+    0.4833333492279053, 0.45166668891906736, 0.30166666507720946,
+    0.24000000953674316, 0.30166666507720946, 0.6833333492279052,
   ];
 
-  const avg = 0.5279276315789471;
+  const avg = 0.5131403493881227;
+  // CJK character range: U+3000–U+9FFF (CJK Symbols/Punctuation, Hiragana,
+  // Katakana, CJK Unified Ideographs incl. Extension A) plus U+FF00–U+FFEF
+  // (Halfwidth/Fullwidth Forms — fullwidth ASCII, fullwidth punctuation).
+  const cjkRange = /[\u3000-\u9FFF\uFF00-\uFFEF]/;
+
   return (
     str
       .split("")
-      .map((c) =>
-        c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg,
-      )
+      .map((c) => {
+        if (cjkRange.test(c) || c === "\u3000") {
+          // CJK glyphs and U+3000 IDEOGRAPHIC SPACE are full-width by default;
+          return 1;
+        }
+        if (c.charCodeAt(0) < widths.length) {
+          return widths[c.charCodeAt(0)];
+        } else {
+          return avg;
+        }
+      })
       .reduce((cur, acc) => acc + cur) * fontSize
   );
 };
 
+/**
+ * Split text into the lines it would wrap to when laid out greedily at the
+ * given font size inside a box of width `maxWidth`. Uses `measureText` so the
+ * estimate reflects actual font metrics rather than a fixed character count.
+ * The browser still does the real wrap inside the foreignObject; this is only
+ * used to size the SVG.
+ *
+ * @param {string} text Text to split.
+ * @param {number} fontSize Font size in px (matches `measureText`).
+ * @param {number} maxWidth Available wrap width in px.
+ * @returns {string[]} Estimated wrapped lines.
+ */
+const splitWrappedText = (text, fontSize, maxWidth) => {
+  if (!text) {
+    return [];
+  }
+
+  // Tokenize the text into atoms representing line-break opportunities:
+  //   - ASCII whitespace runs (collapsed/dropped at line edges per CSS rules);
+  //   - non-ASCII whitespaces
+  //   - a single CJK codepoint (browsers break between any two CJK chars,
+  //     punctuation or not, so each one is its own atom and ~1 em wide);
+  //   - a run of non-whitespace non-CJK characters (a "word" that can only
+  //     break at its boundaries, like Latin script).
+  // Korean Hangul (U+AC00–U+D7AF) is intentionally NOT in the CJK range
+  // because Korean wraps at word boundaries by default in HTML.
+  // ASCII whitespace is collapsed to a single space per CSS `white-space: normal;`
+  text = text.replace(/[\t\n\r ]+/g, " ");
+  const tokens = text.match(
+    /\s|[\u3000-\u9FFF\uFF00-\uFFEF]|[^\s\u3000-\u9FFF\uFF00-\uFFEF]+/g,
+  );
+  if (!tokens) {
+    return [];
+  }
+
+  const takeFittingSegment = (token, availableWidth) => {
+    const characters = token.split("");
+    let segment = "";
+    let width = 0;
+
+    for (const character of characters) {
+      const characterWidth = measureText(character, fontSize);
+      if (segment && width + characterWidth > availableWidth) {
+        break;
+      }
+      segment += character;
+      width += characterWidth;
+    }
+
+    return {
+      segment,
+      width,
+    };
+  };
+
+  const lines = [""];
+  let currentWidth = 0;
+
+  for (const token of tokens) {
+    if (token === " ") {
+      // Whitespace at the start of a line is dropped by browsers.
+      if (currentWidth === 0) {
+        continue;
+      }
+      lines[lines.length - 1] += token;
+      currentWidth += measureText(token, fontSize);
+      continue;
+    }
+
+    let remaining = token;
+
+    while (remaining) {
+      const w = measureText(remaining, fontSize);
+      if (currentWidth + w <= maxWidth) {
+        lines[lines.length - 1] += remaining;
+        currentWidth += w;
+        break;
+      }
+
+      if (currentWidth > 0) {
+        lines.push("");
+        currentWidth = 0;
+        continue;
+      }
+
+      // An atom wider than the box wraps mid-glyph (overflow-wrap: anywhere).
+      const { segment, width } = takeFittingSegment(remaining, maxWidth);
+      lines[lines.length - 1] += segment;
+      currentWidth = width;
+      remaining = remaining.slice(segment.length);
+    }
+  }
+
+  return lines.map((line) => line.replace(/[\t\n\r ]+$/, ""));
+};
+
+/**
+ * Estimate how many lines a string will wrap to when laid out greedily at the
+ * given font size inside a box of width `maxWidth`, capped at `maxLines`.
+ *
+ * @param {string} text Text to estimate.
+ * @param {number} fontSize Font size in px (matches `measureText`).
+ * @param {number} maxWidth Available wrap width in px.
+ * @param {number} maxLines Cap on the returned line count.
+ * @returns {number} Estimated line count, at least 1, at most `maxLines`.
+ */
+const countWrappedLines = (text, fontSize, maxWidth, maxLines) => {
+  return Math.min(
+    Math.max(1, splitWrappedText(text, fontSize, maxWidth).length),
+    maxLines,
+  );
+};
+
 export {
   renderError,
   createLanguageNode,
@@ -235,4 +430,8 @@ export {
   iconWithLabel,
   flexLayout,
   measureText,
+  splitWrappedText,
+  countWrappedLines,
+  wrappedTextNode,
+  wrappedTextStyles,
 };
diff --git a/packages/core/src/fetchers/stats.js b/packages/core/src/fetchers/stats.js
index 1e2f3a55..602101bc 100644
--- a/packages/core/src/fetchers/stats.js
+++ b/packages/core/src/fetchers/stats.js
@@ -388,7 +388,7 @@ const fetchStats = async (
     }
     if (res.data.errors[0].message) {
       throw new CustomError(
-        wrapTextMultiline(res.data.errors[0].message, 90, 1)[0],
+        wrapTextMultiline(res.data.errors[0].message, 525, 12)[0],
         res.statusText,
       );
     }
diff --git a/packages/core/src/fetchers/top-languages.js b/packages/core/src/fetchers/top-languages.js
index 541bb3b1..8f782493 100644
--- a/packages/core/src/fetchers/top-languages.js
+++ b/packages/core/src/fetchers/top-languages.js
@@ -94,7 +94,7 @@ const fetchTopLanguages = async (
     }
     if (res.data.errors[0].message) {
       throw new CustomError(
-        wrapTextMultiline(res.data.errors[0].message, 90, 1)[0],
+        wrapTextMultiline(res.data.errors[0].message, 525, 12)[0],
         res.statusText,
       );
     }
diff --git a/packages/core/tests/fmt.test.js b/packages/core/tests/fmt.test.js
index 21b5bfcb..1c0bcdf9 100644
--- a/packages/core/tests/fmt.test.js
+++ b/packages/core/tests/fmt.test.js
@@ -72,7 +72,12 @@ describe("Test fmt.js", () => {
 
   it("wrapTextMultiline: should not wrap small texts", () => {
     {
-      let multiLineText = wrapTextMultiline("Small text should not wrap");
+      let multiLineText = wrapTextMultiline(
+        "Small text should not wrap",
+        130,
+        11,
+        3,
+      );
       expect(multiLineText).toEqual(["Small text should not wrap"]);
     }
   });
@@ -80,26 +85,31 @@ describe("Test fmt.js", () => {
   it("wrapTextMultiline: should wrap large texts", () => {
     let multiLineText = wrapTextMultiline(
       "Hello world long long long text",
-      20,
+      130,
+      11,
       3,
     );
-    expect(multiLineText).toEqual(["Hello world long", "long long text"]);
+    expect(multiLineText).toEqual(["Hello world long long", "long text"]);
   });
 
   it("wrapTextMultiline: should wrap large texts and limit max lines", () => {
     let multiLineText = wrapTextMultiline(
       "Hello world long long long text",
-      10,
+      53,
+      11,
       2,
     );
     expect(multiLineText).toEqual(["Hello", "world long..."]);
   });
 
-  it("wrapTextMultiline: should wrap chinese by punctuation", () => {
+  it("wrapTextMultiline: should handle chinese characters", () => {
     let multiLineText = wrapTextMultiline(
       "专门为刚开始刷题的同学准备的算法基地，没有最细只有更细，立志用动画将晦涩难懂的算法说的通俗易懂！",
+      130,
+      11,
+      3,
     );
     expect(multiLineText.length).toEqual(3);
-    expect(multiLineText[0].length).toEqual(18 * 8); // &#xxxxx; x 8
+    expect(multiLineText[0].length).toEqual(11 * 8); // &#xxxxx; x 8
   });
 });
diff --git a/packages/core/tests/render.test.js b/packages/core/tests/render.test.js
index 9eb55d01..843d047e 100644
--- a/packages/core/tests/render.test.js
+++ b/packages/core/tests/render.test.js
@@ -3,10 +3,80 @@
 import { queryByTestId } from "@testing-library/dom";
 import { describe, expect, it } from "vitest";
 
-import { renderError } from "../src/common/render.js";
+import {
+  countWrappedLines,
+  renderError,
+  splitWrappedText,
+} from "../src/common/render.js";
 
-describe("Test render.js", () => {
-  it("should test renderError", () => {
+describe("Test splitWrappedText", () => {
+  it("should return an empty array for empty text", () => {
+    expect(splitWrappedText("", 10, 200)).toEqual([]);
+  });
+
+  it("should split a two-word string across lines", () => {
+    expect(splitWrappedText("hello world", 10, 25)).toEqual(["hello", "world"]);
+  });
+
+  it("should split a word wider than maxWidth", () => {
+    expect(splitWrappedText("aaaa", 10, 15)).toEqual(["aa", "aa"]);
+  });
+
+  it("should handle mix of short and long words", () => {
+    expect(splitWrappedText("short looooong", 10, 40)).toEqual([
+      "short",
+      "looooon",
+      "g",
+    ]);
+  });
+
+  it("should handle complex whitespace characters", () => {
+    expect(splitWrappedText("One         two three", 10, 25)).toEqual([
+      "One",
+      "     ",
+      "  ",
+      "two",
+      "three",
+    ]);
+  });
+
+  it("trailing spaces should not cause line breaks", () => {
+    expect(splitWrappedText("hi hi ", 10, 12)).toEqual(["hi", "hi"]);
+  });
+});
+
+describe("Test countWrappedLines", () => {
+  it("should return 1 for empty text", () => {
+    expect(countWrappedLines("", 10, 200, 10)).toBe(1);
+  });
+
+  it("should return 1 when all text fits on a single line", () => {
+    expect(countWrappedLines("hi", 10, 200, 10)).toBe(1);
+  });
+
+  it("should return 2 when a two-word string wraps", () => {
+    expect(countWrappedLines("hello world", 10, 25, 10)).toBe(2);
+  });
+
+  it("should split a word wider than maxWidth (overflow-wrap: anywhere)", () => {
+    expect(countWrappedLines("aaaa", 10, 15, 10)).toBe(2);
+  });
+
+  it("should cap the result at maxLines", () => {
+    expect(countWrappedLines("word ".repeat(10), 10, 25, 3)).toBe(3);
+  });
+
+  it("should handle complex whitespace characters", () => {
+    expect(countWrappedLines("One         two three", 10, 25, 10)).toBe(5);
+  });
+
+  it("trailing spaces should not cause line breaks", () => {
+    expect(countWrappedLines("hi hi ", 10, 12, 10)).toBe(2);
+  });
+});
+
+describe("Test renderError", () => {
+  it("should contain error messages", () => {
     document.body.innerHTML = renderError({ message: "Something went wrong" });
     expect(
       queryByTestId(document.body, "message")?.children[0],
diff --git a/packages/core/tests/renderGistCard.test.js b/packages/core/tests/renderGistCard.test.js
index fe06b4b8..123f01c5 100644
--- a/packages/core/tests/renderGistCard.test.js
+++ b/packages/core/tests/renderGistCard.test.js
@@ -54,7 +54,7 @@ describe("test renderGistCard", () => {
     expect(header).toHaveTextContent("some-really-long-repo-name-for-test...");
   });
 
-  it("should trim description if description os too long", () => {
+  it("should trim description if description is too long", () => {
     document.body.innerHTML = renderGistCard({
       ...data,
       description:
@@ -66,7 +66,27 @@ describe("test renderGistCard", () => {
 
     expect(
       document.getElementsByClassName("description")[0].children[1].textContent,
-    ).toBe("English-language pangram—a sentence that contains all");
+    ).toBe("English-language pangram—a sentence that contains all of");
+  });
+
+  it("should respect browser_rendering=true", () => {
+    document.body.innerHTML = renderGistCard(
+      {
+        ...data,
+        description:
+          "The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all of the letters of the English alphabet",
+      },
+      { browser_rendering: true },
+    );
+    // The full description stays in the DOM; the CSS line-clamp on the
+    // foreignObject's inner div is what visually truncates the overflow.
+    const description = document.getElementsByClassName("description")[0];
+    expect(description).toHaveTextContent(
+      "The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all of the letters of the English alphabet",
+    );
+    expect(
+      Number(description.style.getPropertyValue("--lines")),
+    ).toBeGreaterThan(0);
   });
 
   it("should not trim description if it is short", () => {
diff --git a/packages/core/tests/renderRepoCard.test.js b/packages/core/tests/renderRepoCard.test.js
index f14f7998..04fd8557 100644
--- a/packages/core/tests/renderRepoCard.test.js
+++ b/packages/core/tests/renderRepoCard.test.js
@@ -29,7 +29,8 @@ describe("Test renderRepoCard", () => {
     expect(header).toHaveTextContent("convoychat");
     expect(header).not.toHaveTextContent("anuraghazra");
     expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
-      "Help us take over the world! React + TS + GraphQL Chat App",
+      // no space between "Chat" and "App" because there's a line break there
+      "Help us take over the world! React + TS + GraphQL ChatApp",
     );
     expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
     expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
@@ -75,7 +76,7 @@ describe("Test renderRepoCard", () => {
 
     expect(
       document.getElementsByClassName("description")[0].children[1].textContent,
-    ).toBe("English-language pangram—a sentence that contains all");
+    ).toBe("English-language pangram—a sentence that contains all of");
 
     // Should not trim
     document.body.innerHTML = renderRepoCard({
@@ -88,6 +89,36 @@ describe("Test renderRepoCard", () => {
     );
   });
 
+  it("should respect browser_rendering=true", () => {
+    document.body.innerHTML = renderRepoCard(
+      {
+        ...data_repo.repository,
+        description:
+          "The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all of the letters of the English alphabet",
+      },
+      { browser_rendering: true },
+    );
+
+    // Browser-side wrapping inside the foreignObject keeps the full text in
+    // the DOM; the CSS line-clamp truncates whatever exceeds the line budget
+    // at render time.
+    const description = document.getElementsByClassName("description")[0];
+    expect(description).toHaveTextContent(
+      "The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all of the letters of the English alphabet",
+    );
+    expect(description.style.getPropertyValue("--lines")).toBe("3");
+
+    // Short descriptions should leave the full text visible without clamping.
+    document.body.innerHTML = renderRepoCard({
+      ...data_repo.repository,
+      description: "Small text should not trim",
+    });
+
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Small text should not trim",
+    );
+  });
+
   it("should render emojis", () => {
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
diff --git a/packages/core/tests/renderStatsCard.test.js b/packages/core/tests/renderStatsCard.test.js
index c5e459fe..62b75a0d 100644
--- a/packages/core/tests/renderStatsCard.test.js
+++ b/packages/core/tests/renderStatsCard.test.js
@@ -350,7 +350,7 @@ describe("Test renderStatsCard", () => {
 
     expect(
       document.body.getElementsByTagName("svg")[0].getAttribute("width"),
-    ).toBe("305.81250000000006");
+    ).toBe("299.9666657447815");
   });
 
   it("should auto resize if hide_rank is true & custom_title is set", () => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce310c0c..59969e8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -193,9 +193,6 @@ importers:
       github-username-regex:
         specifier: ^1.0.0
         version: 1.0.0
-      word-wrap:
-        specifier: ^1.2.5
-        version: 1.2.5
     devDependencies:
       '@testing-library/dom':
         specifier: 10.4.1