From da84d9b2e1e0d63f46bc674a76791fd9e941a6ac Mon Sep 17 00:00:00 2001 From: yusakuw Date: Sun, 23 Jan 2022 00:35:49 +0900 Subject: [PATCH 1/7] fix UI font for CJK --- dist/article/article.css | 2 +- dist/styles/global.css | 18 +++++++++++++++++- src/scripts/models/app.ts | 14 +++++++++----- src/scripts/settings.ts | 16 +++++++++++++--- 4 files changed, 40 insertions(+), 10 deletions(-) diff --git a/dist/article/article.css b/dist/article/article.css index 68e4977..4b94154 100644 --- a/dist/article/article.css +++ b/dist/article/article.css @@ -3,7 +3,7 @@ html, body { margin: 0; - font-family: "Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei", + font-family: "Segoe UI", "Source Han Sans Regular", sans-serif; } body { diff --git a/dist/styles/global.css b/dist/styles/global.css index fa934eb..93abd44 100644 --- a/dist/styles/global.css +++ b/dist/styles/global.css @@ -49,12 +49,28 @@ body.darwin { html, body { background-color: transparent; - font-family: "Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei", + font-family: "Segoe UI", "Source Han Sans Regular", sans-serif; height: 100%; overflow: hidden; margin: 0; } +body:lang(zh-CN) { + font-family: "Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei", + sans-serif; +} +body:lang(zh-TW) { + font-family: "Segoe UI", "Source Han Sans TC Regular", "Microsoft JhengHei", + sans-serif; +} +body:lang(ja) { + font-family: "Segoe UI", "Source Han Sans JP Regular", "Yu Gothic UI", + sans-serif; +} +body:lang(ko) { + font-family: "Segoe UI", "Source Han Sans KR Regular", "Malgun Gothic", + sans-serif; +} body.win32, body.linux { background-color: var(--neutralLighterAlt); diff --git a/src/scripts/models/app.ts b/src/scripts/models/app.ts index bef0216..ab17bec 100644 --- a/src/scripts/models/app.ts +++ b/src/scripts/models/app.ts @@ -32,7 +32,7 @@ import { selectAllArticles, showItemFromId, } from "./page" -import { getCurrentLocale } from "../settings" +import { getCurrentLocale, setThemeDefaultFont } from "../settings" import locales from "../i18n/_locales" import { SYNC_SERVICE, ServiceActionTypes } from "./service" @@ -369,10 +369,14 @@ export interface InitIntlAction { type: typeof INIT_INTL locale: string } -export const initIntlDone = (locale: string): InitIntlAction => ({ - type: INIT_INTL, - locale: locale, -}) +export const initIntlDone = (locale: string): InitIntlAction => { + document.documentElement.lang = locale + setThemeDefaultFont(locale) + return { + type: INIT_INTL, + locale: locale, + } +} export function initIntl(): AppThunk> { return dispatch => { diff --git a/src/scripts/settings.ts b/src/scripts/settings.ts index 45ee994..3bf83d0 100644 --- a/src/scripts/settings.ts +++ b/src/scripts/settings.ts @@ -5,13 +5,13 @@ import { ThemeSettings } from "../schema-types" import intl from "react-intl-universal" import { SourceTextDirection } from "./models/source" -const lightTheme: IPartialTheme = { +let lightTheme: IPartialTheme = { defaultFontStyle: { fontFamily: - '"Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei", sans-serif', + '"Segoe UI", "Source Han Sans Regular", sans-serif', }, } -const darkTheme: IPartialTheme = { +let darkTheme: IPartialTheme = { ...lightTheme, palette: { neutralLighterAlt: "#282828", @@ -41,6 +41,16 @@ const darkTheme: IPartialTheme = { }, } +export function setThemeDefaultFont(locale: string) { + switch(locale) { + case "zh-CN": lightTheme.defaultFontStyle.fontFamily = '"Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei", sans-serif'; break + case "zh-TW": lightTheme.defaultFontStyle.fontFamily = '"Segoe UI", "Source Han Sans TC Regular", "Microsoft JhengHei", sans-serif'; break + case "ja": lightTheme.defaultFontStyle.fontFamily = '"Segoe UI", "Source Han Sans JP Regular", "Yu Gothic UI", sans-serif'; break + case "ko": lightTheme.defaultFontStyle.fontFamily = '"Segoe UI", "Source Han Sans KR Regular", "Malgun Gothic", sans-serif'; break + default: lightTheme.defaultFontStyle.fontFamily = '"Segoe UI", "Source Han Sans Regular", sans-serif' + } + applyThemeSettings() +} export function setThemeSettings(theme: ThemeSettings) { window.settings.setThemeSettings(theme) applyThemeSettings() From a73bc491dfe17b3612820b988b75349129121dba Mon Sep 17 00:00:00 2001 From: Yousef Javaherian Date: Fri, 11 Mar 2022 02:40:03 +0330 Subject: [PATCH 2/7] title & snippet in card component now respect source text dir attribute --- package-lock.json | 10 +++++----- src/components/cards/compact-card.tsx | 7 ++++++- src/components/cards/default-card.tsx | 13 +++++++++++-- src/components/cards/highlights.tsx | 19 ++++++++++++++++++- src/components/cards/list-card.tsx | 2 ++ src/components/cards/magazine-card.tsx | 2 ++ 6 files changed, 44 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 69ad249..6e9cf5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,6 @@ "name": "fluent-reader", "version": "1.1.0", "license": "BSD-3-Clause", - "dependencies": { - "font-list": "^1.4.2" - }, "devDependencies": { "@fluentui/react": "^7.126.2", "@types/lovefield": "^2.1.3", @@ -24,6 +21,7 @@ "electron-react-devtools": "^0.5.3", "electron-store": "^5.2.0", "electron-window-state": "^5.0.3", + "font-list": "^1.4.2", "hard-source-webpack-plugin": "^0.13.1", "html-webpack-plugin": "^4.3.0", "js-md5": "^0.7.3", @@ -4192,7 +4190,8 @@ "node_modules/font-list": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/font-list/-/font-list-1.4.2.tgz", - "integrity": "sha512-vPekA+sinAymEkNHwnOse0D75phwNvH/E0z/mJSgGoCBVKy+rLZzd3HziYVwlII34bb0ZYOKBbM36s2bfCaR1A==" + "integrity": "sha512-vPekA+sinAymEkNHwnOse0D75phwNvH/E0z/mJSgGoCBVKy+rLZzd3HziYVwlII34bb0ZYOKBbM36s2bfCaR1A==", + "dev": true }, "node_modules/for-in": { "version": "1.0.2", @@ -12739,7 +12738,8 @@ "font-list": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/font-list/-/font-list-1.4.2.tgz", - "integrity": "sha512-vPekA+sinAymEkNHwnOse0D75phwNvH/E0z/mJSgGoCBVKy+rLZzd3HziYVwlII34bb0ZYOKBbM36s2bfCaR1A==" + "integrity": "sha512-vPekA+sinAymEkNHwnOse0D75phwNvH/E0z/mJSgGoCBVKy+rLZzd3HziYVwlII34bb0ZYOKBbM36s2bfCaR1A==", + "dev": true }, "for-in": { "version": "1.0.2", diff --git a/src/components/cards/compact-card.tsx b/src/components/cards/compact-card.tsx index 566bfdc..e7eb594 100644 --- a/src/components/cards/compact-card.tsx +++ b/src/components/cards/compact-card.tsx @@ -23,10 +23,15 @@ const CompactCard: React.FunctionComponent = props => ( text={props.item.title} filter={props.filter} title + dir={props.source.textDir} /> - +