From 58860c334c4e95fe4c84da01d06a2ec8ecd9294b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 15 Dec 2022 00:41:48 +0800
Subject: [PATCH] Responsive font size based on content length

The shorter, the larger font-size
---
 src/components/status.css        | 1 +
 src/components/status.jsx        | 9 +++++++++
 src/utils/html-content-length.js | 5 +++++
 3 files changed, 15 insertions(+)
 create mode 100644 src/utils/html-content-length.js

diff --git a/src/components/status.css b/src/components/status.css
index e0d2e7c1..cc559544 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -191,6 +191,7 @@
 }
 .status.large .content {
   font-size: 150%;
+  font-size: calc(100% + 50% / var(--content-text-weight));
 }
 .status.large .poll,
 .status.large .actions {
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 986df14d..d3424fda 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -10,6 +10,7 @@ import Loader from '../components/loader';
 import Modal from '../components/modal';
 import NameText from '../components/name-text';
 import enhanceContent from '../utils/enhance-content';
+import htmlContentLength from '../utils/html-content-length';
 import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
 import store from '../utils/store';
@@ -695,6 +696,14 @@ function Status({
           class={`content-container ${
             sensitive || spoilerText ? 'has-spoiler' : ''
           } ${showSpoiler ? 'show-spoiler' : ''}`}
+          style={
+            size === 'l' && {
+              '--content-text-weight':
+                Math.round(
+                  (spoilerText.length + htmlContentLength(content)) / 140,
+                ) || 1,
+            }
+          }
         >
           {!!spoilerText && sensitive && (
             <>
diff --git a/src/utils/html-content-length.js b/src/utils/html-content-length.js
new file mode 100644
index 00000000..039edef2
--- /dev/null
+++ b/src/utils/html-content-length.js
@@ -0,0 +1,5 @@
+const div = document.createElement('div');
+export default (html) => {
+  div.innerHTML = html;
+  return div.innerText.length;
+};