Add RTL support to Typography & TextStyles (#378)

Ashinch · Apr 6, 2023 · 3c2ac83 · 3c2ac83
1 parent 9b332fe
commit 3c2ac83
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 11 deletions.
diff --git a/app/src/main/java/me/ash/reader/ui/component/reader/Styles.kt b/app/src/main/java/me/ash/reader/ui/component/reader/Styles.kt
@@ -21,6 +21,7 @@
 package me.ash.reader.ui.component.reader
 
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.ReadOnlyComposable
@@ -35,7 +36,16 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import me.ash.reader.data.model.preference.*
+import me.ash.reader.data.model.preference.LocalReadingFonts
+import me.ash.reader.data.model.preference.LocalReadingImageHorizontalPadding
+import me.ash.reader.data.model.preference.LocalReadingImageRoundedCorners
+import me.ash.reader.data.model.preference.LocalReadingLetterSpacing
+import me.ash.reader.data.model.preference.LocalReadingSubheadAlign
+import me.ash.reader.data.model.preference.LocalReadingSubheadBold
+import me.ash.reader.data.model.preference.LocalReadingTextAlign
+import me.ash.reader.data.model.preference.LocalReadingTextBold
+import me.ash.reader.data.model.preference.LocalReadingTextFontSize
+import me.ash.reader.data.model.preference.LocalReadingTextHorizontalPadding
 import me.ash.reader.ui.ext.alphaLN
 
 const val MAX_CONTENT_WIDTH = 840.0
@@ -78,7 +88,7 @@ fun bodyForeground(): Color = onSurfaceVariantColor()
 @Stable
 @Composable
 @ReadOnlyComposable
-fun bodyStyle(): TextStyle =
+fun bodyStyle(): TextStyle = LocalTextStyle.current.merge(
     TextStyle(
         fontFamily = LocalReadingFonts.current.asFontFamily(LocalContext.current),
         fontWeight = if (LocalReadingTextBold.current.value) FontWeight.SemiBold else FontWeight.Normal,
@@ -87,11 +97,12 @@ fun bodyStyle(): TextStyle =
         color = bodyForeground(),
         textAlign = LocalReadingTextAlign.current.toTextAlign(),
     )
+)
 
 @Stable
 @Composable
 @ReadOnlyComposable
-fun h1Style(): TextStyle =
+fun h1Style(): TextStyle = LocalTextStyle.current.merge(
     TextStyle(
         fontFamily = LocalReadingFonts.current.asFontFamily(LocalContext.current),
         fontWeight = if (LocalReadingSubheadBold.current.value) FontWeight.SemiBold else FontWeight.Normal,
@@ -100,11 +111,12 @@ fun h1Style(): TextStyle =
         color = onSurfaceColor(),
         textAlign = LocalReadingSubheadAlign.current.toTextAlign(),
     )
+)
 
 @Stable
 @Composable
 @ReadOnlyComposable
-fun h2Style(): TextStyle =
+fun h2Style(): TextStyle = LocalTextStyle.current.merge(
     TextStyle(
         fontFamily = LocalReadingFonts.current.asFontFamily(LocalContext.current),
         fontWeight = if (LocalReadingSubheadBold.current.value) FontWeight.SemiBold else FontWeight.Normal,
@@ -113,11 +125,12 @@ fun h2Style(): TextStyle =
         color = onSurfaceColor(),
         textAlign = LocalReadingSubheadAlign.current.toTextAlign(),
     )
+)
 
 @Stable
 @Composable
 @ReadOnlyComposable
-fun h3Style(): TextStyle =
+fun h3Style(): TextStyle = LocalTextStyle.current.merge(
     TextStyle(
         fontFamily = LocalReadingFonts.current.asFontFamily(LocalContext.current),
         fontWeight = if (LocalReadingSubheadBold.current.value) FontWeight.SemiBold else FontWeight.Normal,
@@ -126,11 +139,12 @@ fun h3Style(): TextStyle =
         color = onSurfaceColor(),
         textAlign = LocalReadingSubheadAlign.current.toTextAlign(),
     )
+)
 
 @Stable
 @Composable
 @ReadOnlyComposable
-fun h4Style(): TextStyle =
+fun h4Style(): TextStyle = LocalTextStyle.current.merge(
     TextStyle(
         fontFamily = LocalReadingFonts.current.asFontFamily(LocalContext.current),
         fontWeight = if (LocalReadingSubheadBold.current.value) FontWeight.SemiBold else FontWeight.Normal,
@@ -139,11 +153,12 @@ fun h4Style(): TextStyle =
         color = onSurfaceColor(),
         textAlign = LocalReadingSubheadAlign.current.toTextAlign(),
     )
+)
 
 @Stable
 @Composable
 @ReadOnlyComposable
-fun h5Style(): TextStyle =
+fun h5Style(): TextStyle = LocalTextStyle.current.merge(
     TextStyle(
         fontFamily = LocalReadingFonts.current.asFontFamily(LocalContext.current),
         fontWeight = if (LocalReadingSubheadBold.current.value) FontWeight.SemiBold else FontWeight.Normal,
@@ -152,11 +167,12 @@ fun h5Style(): TextStyle =
         color = onSurfaceColor(),
         textAlign = LocalReadingSubheadAlign.current.toTextAlign(),
     )
+)
 
 @Stable
 @Composable
 @ReadOnlyComposable
-fun h6Style(): TextStyle =
+fun h6Style(): TextStyle = LocalTextStyle.current.merge(
     TextStyle(
         fontFamily = LocalReadingFonts.current.asFontFamily(LocalContext.current),
         fontWeight = if (LocalReadingSubheadBold.current.value) FontWeight.SemiBold else FontWeight.Normal,
@@ -165,29 +181,32 @@ fun h6Style(): TextStyle =
         color = onSurfaceColor(),
         textAlign = LocalReadingSubheadAlign.current.toTextAlign(),
     )
+)
 
 @Stable
 @Composable
 @ReadOnlyComposable
-fun captionStyle(): TextStyle =
+fun captionStyle(): TextStyle = LocalTextStyle.current.merge(
     MaterialTheme.typography.bodySmall.merge(
         TextStyle(
             fontFamily = LocalReadingFonts.current.asFontFamily(LocalContext.current),
             color = bodyForeground().copy(alpha = 0.6f),
             textAlign = TextAlign.Center,
         )
     )
+)
 
 @Stable
 @Composable
 @ReadOnlyComposable
-fun linkTextStyle(): TextStyle =
+fun linkTextStyle(): TextStyle = LocalTextStyle.current.merge(
     TextStyle(
         fontFamily = LocalReadingFonts.current.asFontFamily(LocalContext.current),
         fontSize = LocalReadingTextFontSize.current.sp,
         color = MaterialTheme.colorScheme.primary,
         textDecoration = TextDecoration.Underline,
     )
+)
 
 @Stable
 @Composable

diff --git a/app/src/main/java/me/ash/reader/ui/theme/Theme.kt b/app/src/main/java/me/ash/reader/ui/theme/Theme.kt
@@ -1,5 +1,6 @@
 package me.ash.reader.ui.theme
 
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -36,12 +37,14 @@ fun AppTheme(
     ProvideZcamViewingConditions {
         CompositionLocalProvider(
             LocalTonalPalettes provides tonalPalettes.apply { Preparing() },
+            LocalTextStyle provides LocalTextStyle.current.applyTextDirection()
         ) {
             MaterialTheme(
                 colorScheme =
                 if (useDarkTheme) dynamicDarkColorScheme()
                 else dynamicLightColorScheme(),
-                typography = LocalBasicFonts.current.asTypography(LocalContext.current),
+                typography = LocalBasicFonts.current.asTypography(LocalContext.current)
+                    .applyTextDirection(),
                 shapes = Shapes,
                 content = content,
             )

diff --git a/...e/ash/reader/ui/theme/SystemTypography.kt → .../main/java/me/ash/reader/ui/theme/Type.kt b/...e/ash/reader/ui/theme/SystemTypography.kt → .../main/java/me/ash/reader/ui/theme/Type.kt
@@ -3,6 +3,7 @@ package me.ash.reader.ui.theme
 import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextDirection
 import androidx.compose.ui.unit.sp
 
 val SystemTypography = Typography(
@@ -97,3 +98,23 @@ val SystemTypography = Typography(
         letterSpacing = 0.5.sp,
     ),
 )
+
+internal fun TextStyle.applyTextDirection() = this.copy(textDirection = TextDirection.Content)
+
+internal fun Typography.applyTextDirection() = this.copy(
+    displayLarge = displayLarge.applyTextDirection(),
+    displayMedium = displayMedium.applyTextDirection(),
+    displaySmall = displaySmall.applyTextDirection(),
+    headlineLarge = headlineLarge.applyTextDirection(),
+    headlineMedium = headlineMedium.applyTextDirection(),
+    headlineSmall = headlineSmall.applyTextDirection(),
+    titleLarge = titleLarge.applyTextDirection(),
+    titleMedium = titleMedium.applyTextDirection(),
+    titleSmall = titleSmall.applyTextDirection(),
+    bodyLarge = bodyLarge.applyTextDirection(),
+    bodyMedium = bodyMedium.applyTextDirection(),
+    bodySmall = bodySmall.applyTextDirection(),
+    labelLarge = labelLarge.applyTextDirection(),
+    labelMedium = labelMedium.applyTextDirection(),
+    labelSmall = labelSmall.applyTextDirection(),
+)