Merge pull request #1224 from dpc-sdp/bugfix/SDPAP-9439-ar-font

[SDPAP-9439] support quick type adjustments for language fonts
dpc-sdp · Jun 17, 2024 · 35add5c · 35add5c
2 parents 989e9e6 + a83c127
commit 35add5c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/nuxt-ripple/app.config.ts b/packages/nuxt-ripple/app.config.ts
@@ -26,6 +26,7 @@ declare module '@nuxt/schema' {
           name: string
           url: string
           rtl?: boolean
+          styles?: Record<string, string>
         }
       }
       search?: {
@@ -71,7 +72,10 @@ export default defineAppConfig({
       ar: {
         name: 'Noto Kufi Arabic',
         url: 'https://fonts.googleapis.com/earlyaccess/notokufiarabic.css',
-        rtl: true
+        rtl: true,
+        styles: {
+          '.rpl-type-p-large-highlight': 'line-height: var(--rpl-type-lh-9)'
+        }
       },
       bn: {
         name: 'Noto Sans Bengali',

diff --git a/packages/nuxt-ripple/composables/use-tide-language.ts b/packages/nuxt-ripple/composables/use-tide-language.ts
@@ -24,12 +24,20 @@ export default (page: any) => {
   const direction = computed(() => (found.value?.rtl ? 'rtl' : 'ltr'))
 
   if (found.value) {
+    let customCSS = ''
+
+    if (found.value?.styles) {
+      Object.keys(found.value.styles).forEach((selector) => {
+        customCSS += `.${language.value} ${selector} { ${found.value.styles[selector]}; }`
+      })
+    }
+
     useHead({
       link: [{ rel: 'stylesheet', href: found.value?.url }],
       style: [
         {
           children: `
-          .${language.value} * { font-family: '${found.value?.name}', var(--rpl-type-font-family) !important }
+          .${language.value} * { font-family: '${found.value?.name}', var(--rpl-type-font-family) !important } ${customCSS}
           `
         }
       ]