From 58a02f06ea45669a6afd5694780944905943bade Mon Sep 17 00:00:00 2001 From: sabaimran <65192171+sabaimran@users.noreply.github.com> Date: Fri, 7 Jun 2024 11:53:47 +0530 Subject: [PATCH] Fix multilingual font rendering (#797) * Fix multilingual font rendering; fallback to an Arabic language font which contains more Asian characters. Close #756 * Tune font-sizes and styling to accomodate new fonts with old sizing - Move connection-status styling out from inline html into css block - Remove start typing chat-input height jitter - align new-conversation button, text - use relative font sizes instead of absolute font sizes in most places --------- Co-authored-by: Debanjum Singh Solanky --- src/interface/desktop/assets/khoj.css | 10 ++--- src/khoj/interface/web/assets/khoj.css | 18 ++++---- src/khoj/interface/web/chat.html | 60 +++++++++++++++++--------- 3 files changed, 52 insertions(+), 36 deletions(-) diff --git a/src/interface/desktop/assets/khoj.css b/src/interface/desktop/assets/khoj.css index 9269f649..1f1594d5 100644 --- a/src/interface/desktop/assets/khoj.css +++ b/src/interface/desktop/assets/khoj.css @@ -1,6 +1,6 @@ /* Amber Light scheme (Default) */ /* Can be forced with data-theme="light" */ -@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;500;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); [data-theme="light"], :root:not([data-theme="dark"]) { @@ -14,7 +14,7 @@ --water: #44b9da; --leaf: #7b990a; --flower: #d1684e; - --font-family: 'Tajawal', sans-serif !important; + --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important; } /* Amber Dark scheme (Auto) */ @@ -31,7 +31,7 @@ --water: #44b9da; --leaf: #7b990a; --flower: #d1684e; - --font-family: 'Tajawal', sans-serif !important; + --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important; } } /* Amber Dark scheme (Forced) */ @@ -47,7 +47,7 @@ --water: #44b9da; --leaf: #7b990a; --flower: #d1684e; - --font-family: 'Tajawal', sans-serif !important; + --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important; } /* Amber (Common styles) */ :root { @@ -55,7 +55,7 @@ --form-element-focus-color: var(--primary-focus); --switch-color: var(--primary-inverse); --switch-checked-background-color: var(--primary); - --font-family: 'Tajawal', sans-serif !important; + --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important; } .khoj-configure { diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css index 8736ec6d..26b2c9fb 100644 --- a/src/khoj/interface/web/assets/khoj.css +++ b/src/khoj/interface/web/assets/khoj.css @@ -1,6 +1,6 @@ /* Amber Light scheme (Default) */ /* Can be forced with data-theme="light" */ -@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;500;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); [data-theme="light"], :root:not([data-theme="dark"]) { @@ -15,7 +15,7 @@ --water: #44b9da; --leaf: #7b990a; --flower: #ffaeae; - --font-family: 'Tajawal', sans-serif !important; + --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important; } /* Amber Dark scheme (Auto) */ @@ -33,7 +33,7 @@ --water: #44b9da; --leaf: #7b990a; --flower: #ffaeae; - --font-family: 'Tajawal', sans-serif !important; + --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important; } } /* Amber Dark scheme (Forced) */ @@ -50,7 +50,7 @@ --water: #44b9da; --leaf: #7b990a; --flower: #ffaeae; - --font-family: 'Tajawal', sans-serif !important; + --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important; } /* Amber (Common styles) */ :root { @@ -58,7 +58,7 @@ --form-element-focus-color: var(--primary-focus); --switch-color: var(--primary-inverse); --switch-checked-background-color: var(--primary); - --font-family: 'Tajawal', sans-serif !important; + --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important; } .khoj-configure { @@ -102,7 +102,7 @@ a.khoj-logo { .khoj-nav a { color: var(--main-text-color); text-decoration: none; - font-size: 20px; + font-size: medium; font-weight: normal; padding: 0 4px; border-radius: 4px; @@ -124,7 +124,6 @@ a.khoj-logo { height: 30px; } span.khoj-nav-item-text { - padding-top: 6px; padding-left: 8px; } img.khoj-logo { @@ -191,11 +190,10 @@ img.khoj-logo { display: grid; justify-content: center; align-items: center; - font-size: 20px; + font-size: large; box-sizing: unset; width: 40px; - height: 35px; - padding-top: 8px + height: 40px; } .subscribed { border: 3px solid var(--primary-hover); diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html index 1a62f893..b9122b3e 100644 --- a/src/khoj/interface/web/chat.html +++ b/src/khoj/interface/web/chat.html @@ -787,7 +787,7 @@ To get started, just start typing below. You can also type / to see a list of co const textarea = document.getElementById('chat-input'); const scrollTop = textarea.scrollTop; textarea.style.height = '0'; - const scrollHeight = textarea.scrollHeight + 8; // +8 accounts for padding + const scrollHeight = textarea.scrollHeight + 16; // +8 accounts for padding textarea.style.height = Math.min(scrollHeight, 200) + 'px'; textarea.scrollTop = scrollTop; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; @@ -1081,7 +1081,6 @@ To get started, just start typing below. You can also type / to see a list of co let statusDotIcon = document.getElementById("connection-status-icon"); statusDotIcon.style.backgroundColor = "green"; let statusDotText = document.getElementById("connection-status-text"); - statusDotText.style.marginTop = "10px"; statusDotText.textContent = "Connected to Server"; } } @@ -2070,9 +2069,9 @@ To get started, just start typing below. You can also type / to see a list of co
-