🚀 Images Alignment option

* Lets user change the alignment of the image Part-of: #69
2025-01-09 19:46:08 +02:00 · 2025-01-09 19:46:08 +02:00 · c22ebab576
commit c22ebab576
parent dbd1b2345b
29 changed files with 173 additions and 72 deletions
--- a/app/src/main/java/ua/acclorite/book_story/domain/reader/ReaderImagesAlignment.kt
+++ b/app/src/main/java/ua/acclorite/book_story/domain/reader/ReaderImagesAlignment.kt
@ -0,0 +1,13 @@
+package ua.acclorite.book_story.domain.reader
+
+import androidx.compose.ui.Alignment
+
+enum class ReaderImagesAlignment(val alignment: Alignment) {
+    START(Alignment.CenterStart),
+    CENTER(Alignment.Center),
+    END(Alignment.CenterEnd)
+}
+
+fun String.toImagesAlignment(): ReaderImagesAlignment {
+    return ReaderImagesAlignment.valueOf(this)
+}
--- a/app/src/main/java/ua/acclorite/book_story/presentation/core/constants/DataStoreConstants.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/core/constants/DataStoreConstants.kt
@ -50,6 +50,7 @@ object DataStoreConstants {
    val CHAPTER_TITLE_ALIGNMENT = stringPreferencesKey("chapter_title_alignment")
    val IMAGES = booleanPreferencesKey("images")
    val IMAGES_CORNERS_ROUNDNESS = intPreferencesKey("images_corners_roundness")
+    val IMAGES_ALIGNMENT = stringPreferencesKey("images_alignment")

    // Browse settings
    val BROWSE_FILES_STRUCTURE = stringPreferencesKey("browse_files_structure")
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderContent.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderContent.kt
@ -15,6 +15,7 @@ import ua.acclorite.book_story.domain.library.book.Book
 import ua.acclorite.book_story.domain.reader.Checkpoint
 import ua.acclorite.book_story.domain.reader.FontWithName
 import ua.acclorite.book_story.domain.reader.ReaderHorizontalGesture
+import ua.acclorite.book_story.domain.reader.ReaderImagesAlignment
 import ua.acclorite.book_story.domain.reader.ReaderText
 import ua.acclorite.book_story.domain.reader.ReaderText.Chapter
 import ua.acclorite.book_story.domain.reader.ReaderTextAlignment
@ -57,6 +58,7 @@ fun ReaderContent(
    fontColor: Color,
    images: Boolean,
    imagesCornersRoundness: Dp,
+    imagesAlignment: ReaderImagesAlignment,
    fontFamily: FontWithName,
    lineHeight: TextUnit,
    fontStyle: FontStyle,
@ -124,6 +126,7 @@ fun ReaderContent(
            fontColor = fontColor,
            images = images,
            imagesCornersRoundness = imagesCornersRoundness,
+            imagesAlignment = imagesAlignment,
            fontFamily = fontFamily,
            lineHeight = lineHeight,
            fontStyle = fontStyle,
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayout.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayout.kt
@ -23,6 +23,7 @@ import androidx.compose.ui.unit.dp
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.domain.reader.FontWithName
 import ua.acclorite.book_story.domain.reader.ReaderHorizontalGesture
+import ua.acclorite.book_story.domain.reader.ReaderImagesAlignment
 import ua.acclorite.book_story.domain.reader.ReaderText
 import ua.acclorite.book_story.domain.reader.ReaderTextAlignment
 import ua.acclorite.book_story.presentation.core.components.common.LazyColumnWithScrollbar
@ -50,6 +51,7 @@ fun ReaderLayout(
    fontColor: Color,
    images: Boolean,
    imagesCornersRoundness: Dp,
+    imagesAlignment: ReaderImagesAlignment,
    fontFamily: FontWithName,
    lineHeight: TextUnit,
    fontStyle: FontStyle,
@ -167,6 +169,7 @@ fun ReaderLayout(
                                showMenu = showMenu,
                                entry = entry,
                                imagesCornersRoundness = imagesCornersRoundness,
+                                imagesAlignment = imagesAlignment,
                                fontFamily = fontFamily,
                                fontColor = fontColor,
                                lineHeight = lineHeight,
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutText.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutText.kt
@ -10,6 +10,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.TextUnit
 import ua.acclorite.book_story.domain.reader.FontWithName
+import ua.acclorite.book_story.domain.reader.ReaderImagesAlignment
 import ua.acclorite.book_story.domain.reader.ReaderText
 import ua.acclorite.book_story.domain.reader.ReaderTextAlignment
 import ua.acclorite.book_story.ui.reader.ReaderEvent
@ -20,6 +21,7 @@ fun LazyItemScope.ReaderLayoutText(
    showMenu: Boolean,
    entry: ReaderText,
    imagesCornersRoundness: Dp,
+    imagesAlignment: ReaderImagesAlignment,
    fontFamily: FontWithName,
    fontColor: Color,
    lineHeight: TextUnit,
@ -44,7 +46,8 @@ fun LazyItemScope.ReaderLayoutText(
            ReaderLayoutTextImage(
                entry = entry,
                sidePadding = sidePadding,
-                imagesCornersRoundness = imagesCornersRoundness
+                imagesCornersRoundness = imagesCornersRoundness,
+                imagesAlignment = imagesAlignment
            )
        }

--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutTextImage.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderLayoutTextImage.kt
@ -1,6 +1,7 @@
 package ua.acclorite.book_story.presentation.reader

 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyItemScope
@ -8,27 +9,31 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.Dp
+import ua.acclorite.book_story.domain.reader.ReaderImagesAlignment
 import ua.acclorite.book_story.domain.reader.ReaderText

@Composable
 fun LazyItemScope.ReaderLayoutTextImage(
    entry: ReaderText.Image,
    sidePadding: Dp,
-    imagesCornersRoundness: Dp
+    imagesCornersRoundness: Dp,
+    imagesAlignment: ReaderImagesAlignment
 ) {
-    Image(
+    Box(
        modifier = Modifier
            .animateItem(
                fadeInSpec = null,
                fadeOutSpec = null
            )
            .padding(horizontal = sidePadding)
-            .clip(RoundedCornerShape(imagesCornersRoundness))
            .fillMaxWidth(),
-        bitmap = entry.imageBitmap,
-        contentDescription = null,
-        contentScale = ContentScale.FillWidth
-    )
+        contentAlignment = imagesAlignment.alignment
+    ) {
+        Image(
+            modifier = Modifier.clip(RoundedCornerShape(imagesCornersRoundness)),
+            bitmap = entry.imageBitmap,
+            contentDescription = null
+        )
+    }
 }
--- a/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderScaffold.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/reader/ReaderScaffold.kt
@ -23,6 +23,7 @@ import ua.acclorite.book_story.domain.library.book.Book
 import ua.acclorite.book_story.domain.reader.Checkpoint
 import ua.acclorite.book_story.domain.reader.FontWithName
 import ua.acclorite.book_story.domain.reader.ReaderHorizontalGesture
+import ua.acclorite.book_story.domain.reader.ReaderImagesAlignment
 import ua.acclorite.book_story.domain.reader.ReaderText
 import ua.acclorite.book_story.domain.reader.ReaderText.Chapter
 import ua.acclorite.book_story.domain.reader.ReaderTextAlignment
@ -61,6 +62,7 @@ fun ReaderScaffold(
    fontColor: Color,
    images: Boolean,
    imagesCornersRoundness: Dp,
+    imagesAlignment: ReaderImagesAlignment,
    fontFamily: FontWithName,
    lineHeight: TextUnit,
    fontStyle: FontStyle,
@ -155,6 +157,7 @@ fun ReaderScaffold(
            fontColor = fontColor,
            images = images,
            imagesCornersRoundness = imagesCornersRoundness,
+            imagesAlignment = imagesAlignment,
            fontFamily = fontFamily,
            lineHeight = lineHeight,
            fontStyle = fontStyle,
--- a/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/chapters/components/ChapterTitleAlignmentOption.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/chapters/components/ChapterTitleAlignmentOption.kt
@ -23,10 +23,10 @@ fun ChapterTitleAlignmentOption() {
            ButtonItem(
                id = it.toString(),
                title = when (it) {
-                    ReaderTextAlignment.START -> stringResource(id = R.string.text_alignment_start)
-                    ReaderTextAlignment.JUSTIFY -> stringResource(id = R.string.text_alignment_justify)
-                    ReaderTextAlignment.CENTER -> stringResource(id = R.string.text_alignment_center)
-                    ReaderTextAlignment.END -> stringResource(id = R.string.text_alignment_end)
+                    ReaderTextAlignment.START -> stringResource(id = R.string.alignment_start)
+                    ReaderTextAlignment.JUSTIFY -> stringResource(id = R.string.alignment_justify)
+                    ReaderTextAlignment.CENTER -> stringResource(id = R.string.alignment_center)
+                    ReaderTextAlignment.END -> stringResource(id = R.string.alignment_end)
                },
                textStyle = MaterialTheme.typography.labelLarge,
                selected = it == state.value.chapterTitleAlignment
--- a/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/ImagesSubcategory.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/ImagesSubcategory.kt
@ -9,6 +9,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import ua.acclorite.book_story.R
 import ua.acclorite.book_story.presentation.settings.components.SettingsSubcategory
+import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesAlignmentOption
 import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesCornersRoundnessOption
 import ua.acclorite.book_story.presentation.settings.reader.images.components.ImagesOption

@ -31,5 +32,9 @@ fun LazyListScope.ImagesSubcategory(
        item {
            ImagesCornersRoundnessOption()
        }
+
+        item {
+            ImagesAlignmentOption()
+        }
    }
 }
--- a/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ImagesAlignmentOption.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/images/components/ImagesAlignmentOption.kt
@ -0,0 +1,45 @@
+package ua.acclorite.book_story.presentation.settings.reader.images.components
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import ua.acclorite.book_story.R
+import ua.acclorite.book_story.domain.reader.ReaderImagesAlignment
+import ua.acclorite.book_story.domain.ui.ButtonItem
+import ua.acclorite.book_story.presentation.core.components.settings.SegmentedButtonWithTitle
+import ua.acclorite.book_story.ui.main.MainEvent
+import ua.acclorite.book_story.ui.main.MainModel
+import ua.acclorite.book_story.ui.theme.ExpandingTransition
+
+@Composable
+fun ImagesAlignmentOption() {
+    val mainModel = hiltViewModel<MainModel>()
+    val state = mainModel.state.collectAsStateWithLifecycle()
+
+    ExpandingTransition(visible = state.value.images) {
+        SegmentedButtonWithTitle(
+            title = stringResource(id = R.string.images_alignment_option),
+            buttons = ReaderImagesAlignment.entries.map {
+                ButtonItem(
+                    id = it.toString(),
+                    title = when (it) {
+                        ReaderImagesAlignment.START -> stringResource(id = R.string.alignment_start)
+                        ReaderImagesAlignment.CENTER -> stringResource(id = R.string.alignment_center)
+                        ReaderImagesAlignment.END -> stringResource(id = R.string.alignment_end)
+                    },
+                    textStyle = MaterialTheme.typography.labelLarge,
+                    selected = it == state.value.imagesAlignment
+                )
+            },
+            onClick = {
+                mainModel.onEvent(
+                    MainEvent.OnChangeImagesAlignment(
+                        it.id
+                    )
+                )
+            }
+        )
+    }
+}
--- a/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/text/components/TextAlignmentOption.kt
+++ b/app/src/main/java/ua/acclorite/book_story/presentation/settings/reader/text/components/TextAlignmentOption.kt
@ -23,10 +23,10 @@ fun TextAlignmentOption() {
            ButtonItem(
                id = it.toString(),
                title = when (it) {
-                    ReaderTextAlignment.START -> stringResource(id = R.string.text_alignment_start)
-                    ReaderTextAlignment.JUSTIFY -> stringResource(id = R.string.text_alignment_justify)
-                    ReaderTextAlignment.CENTER -> stringResource(id = R.string.text_alignment_center)
-                    ReaderTextAlignment.END -> stringResource(id = R.string.text_alignment_end)
+                    ReaderTextAlignment.START -> stringResource(id = R.string.alignment_start)
+                    ReaderTextAlignment.JUSTIFY -> stringResource(id = R.string.alignment_justify)
+                    ReaderTextAlignment.CENTER -> stringResource(id = R.string.alignment_center)
+                    ReaderTextAlignment.END -> stringResource(id = R.string.alignment_end)
                },
                textStyle = MaterialTheme.typography.labelLarge,
                selected = it == state.value.textAlignment
--- a/app/src/main/java/ua/acclorite/book_story/ui/main/MainEvent.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/main/MainEvent.kt
@ -52,4 +52,5 @@ sealed class MainEvent {
    data class OnChangeChapterTitleAlignment(val value: String) : MainEvent()
    data class OnChangeImages(val value: Boolean) : MainEvent()
    data class OnChangeImagesCornersRoundness(val value: Int) : MainEvent()
+    data class OnChangeImagesAlignment(val value: String) : MainEvent()
 }
--- a/app/src/main/java/ua/acclorite/book_story/ui/main/MainModel.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/main/MainModel.kt
@ -20,6 +20,7 @@ import ua.acclorite.book_story.domain.browse.toBrowseFilesStructure
 import ua.acclorite.book_story.domain.browse.toBrowseLayout
 import ua.acclorite.book_story.domain.browse.toBrowseSortOrder
 import ua.acclorite.book_story.domain.reader.toHorizontalGesture
+import ua.acclorite.book_story.domain.reader.toImagesAlignment
 import ua.acclorite.book_story.domain.reader.toReaderScreenOrientation
 import ua.acclorite.book_story.domain.reader.toTextAlignment
 import ua.acclorite.book_story.domain.use_case.data_store.ChangeLanguage
@ -438,6 +439,14 @@ class MainModel @Inject constructor(
                    it.copy(imagesCornersRoundness = this)
                }
            )
+
+            is MainEvent.OnChangeImagesAlignment -> handleDatastoreUpdate(
+                key = DataStoreConstants.IMAGES_ALIGNMENT,
+                value = event.value,
+                updateState = {
+                    it.copy(imagesAlignment = this.toImagesAlignment())
+                }
+            )
        }
    }

--- a/app/src/main/java/ua/acclorite/book_story/ui/main/MainState.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/main/MainState.kt
@ -14,9 +14,11 @@ import ua.acclorite.book_story.domain.browse.toBrowseFilesStructure
 import ua.acclorite.book_story.domain.browse.toBrowseLayout
 import ua.acclorite.book_story.domain.browse.toBrowseSortOrder
 import ua.acclorite.book_story.domain.reader.ReaderHorizontalGesture
+import ua.acclorite.book_story.domain.reader.ReaderImagesAlignment
 import ua.acclorite.book_story.domain.reader.ReaderScreenOrientation
 import ua.acclorite.book_story.domain.reader.ReaderTextAlignment
 import ua.acclorite.book_story.domain.reader.toHorizontalGesture
+import ua.acclorite.book_story.domain.reader.toImagesAlignment
 import ua.acclorite.book_story.domain.reader.toReaderScreenOrientation
 import ua.acclorite.book_story.domain.reader.toTextAlignment
 import ua.acclorite.book_story.presentation.core.constants.Constants
@ -95,6 +97,7 @@ data class MainState(
    val chapterTitleAlignment: ReaderTextAlignment = provideDefaultValue { ReaderTextAlignment.JUSTIFY },
    val images: Boolean = provideDefaultValue { true },
    val imagesCornersRoundness: Int = provideDefaultValue { 8 },
+    val imagesAlignment: ReaderImagesAlignment = provideDefaultValue { ReaderImagesAlignment.START },

    // Browse Settings
    val browseFilesStructure: BrowseFilesStructure = provideDefaultValue {
@ -320,6 +323,10 @@ data class MainState(
                    imagesCornersRoundness = provideValue(
                        IMAGES_CORNERS_ROUNDNESS
                    ) { imagesCornersRoundness },
+
+                    imagesAlignment = provideValue(
+                        IMAGES_ALIGNMENT, convert = { toImagesAlignment() }
+                    ) { imagesAlignment },
                )
            }
        }
--- a/app/src/main/java/ua/acclorite/book_story/ui/reader/ReaderScreen.kt
+++ b/app/src/main/java/ua/acclorite/book_story/ui/reader/ReaderScreen.kt
@ -342,6 +342,7 @@ data class ReaderScreen(val bookId: Int) : Screen, Parcelable {
            fontColor = fontColor.value,
            images = mainState.value.images,
            imagesCornersRoundness = imagesCornersRoundness,
+            imagesAlignment = mainState.value.imagesAlignment,
            fontFamily = fontFamily,
            lineHeight = lineHeight,
            fontStyle = fontStyle,
--- a/app/src/main/res/values-ar/strings.xml
+++ b/app/src/main/res/values-ar/strings.xml
@ -172,8 +172,8 @@
    <string name="licenses_option">رخص مفتوحة المصدر</string>
    <string name="credits_icon">الأيقونات</string>
    <string name="credits_updates">إدارة التحديثات الجديدة</string>
-    <string name="text_alignment_start">ابدأ</string>
-    <string name="text_alignment_center">المركز</string>
+    <string name="alignment_start">ابدأ</string>
+    <string name="alignment_center">المركز</string>
    <string name="move_this_book">نقل</string>
    <string name="delete_this_book">حذف</string>
    <string name="details_book">التفاصيل</string>
@ -182,7 +182,7 @@
    <string name="app_version_option_desc_2">انقر للتحقق من وجود تحديثات</string>
    <string name="report_bug_option">الإبلاغ عن خطأ</string>
    <string name="whats_new_option">ما الجديد</string>
-    <string name="text_alignment_end">النهاية</string>
+    <string name="alignment_end">النهاية</string>
    <string name="marsh_theme">بلوتو</string>
    <string name="credits_ideas">أفكار</string>
    <string name="credits_fonts">الخطوط</string>
--- a/app/src/main/res/values-cs/strings.xml
+++ b/app/src/main/res/values-cs/strings.xml
@ -124,8 +124,8 @@
    <string name="browse_sort_order_file_format">Formát souboru</string>
    <string name="browse_sort_order_file_type">Typ souboru</string>
    <string name="browse_sort_order_file_size">Velikost souboru</string>
-    <string name="text_alignment_start">Začátek</string>
-    <string name="text_alignment_end">Konec</string>
+    <string name="alignment_start">Začátek</string>
+    <string name="alignment_end">Konec</string>
    <string name="screen_orientation_portrait">Na výšku</string>
    <string name="screen_orientation_landscape">Na šířku</string>
    <string name="screen_orientation_locked_portrait">Pouze na výšku</string>
@ -203,8 +203,8 @@
    <string name="theme_contrast_high">Vysoký</string>
    <string name="files_structure_all">Všechny soubory</string>
    <string name="browse_grid_size_per_row">na řádku</string>
-    <string name="text_alignment_justify">Zarovnat</string>
-    <string name="text_alignment_center">Do prostřed</string>
+    <string name="alignment_justify">Zarovnat</string>
+    <string name="alignment_center">Do prostřed</string>
    <string name="purple_theme">Jupiter</string>
    <string name="pink2_theme">Ganymede</string>
    <string name="cover_image_changed">Obálka byla úspěšně změněna.</string>
--- a/app/src/main/res/values-de/strings.xml
+++ b/app/src/main/res/values-de/strings.xml
@ -289,10 +289,10 @@
    <string name="browse_sort_order_file_size">Dateigröße</string>
    <string name="text_alignment_option">Textausrichtung</string>
    <string name="browse_files_structure_option">Dateistruktur</string>
-    <string name="text_alignment_start">Start</string>
-    <string name="text_alignment_justify">Rechtfertigen</string>
-    <string name="text_alignment_center">Mitte</string>
-    <string name="text_alignment_end">Ende</string>
+    <string name="alignment_start">Start</string>
+    <string name="alignment_justify">Rechtfertigen</string>
+    <string name="alignment_center">Mitte</string>
+    <string name="alignment_end">Ende</string>
    <string name="credits_contribution">Beitrag</string>
    <string name="double_press_exit_option_desc">Drücken Sie zweimal die Zurück-Taste, um die App zu beenden</string>
    <string name="double_press_exit_option">Zum Beenden zweimal Zurück drücken</string>
--- a/app/src/main/res/values-es/strings.xml
+++ b/app/src/main/res/values-es/strings.xml
@ -289,10 +289,10 @@
    <string name="filter_content_desc">Filtrar</string>
    <string name="text_alignment_option">Alineación del texto</string>
    <string name="browse_files_structure_option">Estructura de los ficheros</string>
-    <string name="text_alignment_start">Iniciar</string>
-    <string name="text_alignment_justify">Justificar</string>
-    <string name="text_alignment_center">Centrar</string>
-    <string name="text_alignment_end">Fin</string>
+    <string name="alignment_start">Iniciar</string>
+    <string name="alignment_justify">Justificar</string>
+    <string name="alignment_center">Centrar</string>
+    <string name="alignment_end">Fin</string>
    <string name="help_translate_option">Ayuda a traducir</string>
    <string name="credits_fonts">Fuentes</string>
    <string name="credits_translation">Traducción</string>
--- a/app/src/main/res/values-fr/strings.xml
+++ b/app/src/main/res/values-fr/strings.xml
@ -118,10 +118,10 @@
    <string name="browse_sort_order_file_type">Type de fichier</string>
    <string name="browse_sort_order_last_modified">Dernière modification</string>
    <string name="browse_sort_order_file_size">Taille de fichier</string>
-    <string name="text_alignment_start">Début</string>
-    <string name="text_alignment_justify">Justifier</string>
-    <string name="text_alignment_center">Centrer</string>
-    <string name="text_alignment_end">Fin</string>
+    <string name="alignment_start">Début</string>
+    <string name="alignment_justify">Justifier</string>
+    <string name="alignment_center">Centrer</string>
+    <string name="alignment_end">Fin</string>
    <string name="dynamic_theme">Mercure</string>
    <string name="blue_theme">Neptune</string>
    <string name="green_theme">Terre</string>
--- a/app/src/main/res/values-hi/strings.xml
+++ b/app/src/main/res/values-hi/strings.xml
@ -165,10 +165,10 @@
    <string name="browse_sort_order_file_format">फाइल का प्रकार</string>
    <string name="browse_sort_order_file_type">फाइल का प्रकार</string>
    <string name="browse_sort_order_last_modified">आखिरी बार संशोधित</string>
-    <string name="text_alignment_start">प्रारंभ</string>
-    <string name="text_alignment_justify">सममित करें</string>
-    <string name="text_alignment_center">मध्य</string>
-    <string name="text_alignment_end">अंत</string>
+    <string name="alignment_start">प्रारंभ</string>
+    <string name="alignment_justify">सममित करें</string>
+    <string name="alignment_center">मध्य</string>
+    <string name="alignment_end">अंत</string>
    <string name="screen_orientation_landscape">आड़ी दिशा</string>
    <string name="screen_orientation_portrait">खड़ी दिशा</string>
    <string name="screen_orientation_locked_portrait">खड़ा दिशा लॉक</string>
--- a/app/src/main/res/values-it/strings.xml
+++ b/app/src/main/res/values-it/strings.xml
@ -198,10 +198,10 @@
    <string name="general_settings">Generale</string>
    <string name="browse_settings_desc">Generale, filtro, ordinamento</string>
    <string name="text_alignment_option">Allineamento del testo</string>
-    <string name="text_alignment_center">Centrale</string>
-    <string name="text_alignment_end">Fine</string>
+    <string name="alignment_center">Centrale</string>
+    <string name="alignment_end">Fine</string>
    <string name="general_settings_desc">Lingua dell\'app</string>
-    <string name="text_alignment_start">Avvia</string>
+    <string name="alignment_start">Avvia</string>
    <string name="search_field_empty">Cerca…</string>
    <string name="color_preset_selected_query">Selezionato «%1$s»</string>
    <string name="translator_reader_settings">Traduttore</string>
--- a/app/src/main/res/values-pl/strings.xml
+++ b/app/src/main/res/values-pl/strings.xml
@ -124,10 +124,10 @@
    <string name="browse_sort_order_file_type">Typ pliku</string>
    <string name="browse_sort_order_last_modified">Ostatnio modyfikowany</string>
    <string name="browse_sort_order_file_size">Rozmiar pliku</string>
-    <string name="text_alignment_start">Start</string>
-    <string name="text_alignment_justify">Uzasadnij</string>
-    <string name="text_alignment_end">Koniec</string>
-    <string name="text_alignment_center">Środek</string>
+    <string name="alignment_start">Start</string>
+    <string name="alignment_justify">Uzasadnij</string>
+    <string name="alignment_end">Koniec</string>
+    <string name="alignment_center">Środek</string>
    <string name="green_theme">Ziemia</string>
    <string name="press_again_toast">Naciśnij ponownie, aby wyjść</string>
    <string name="fast_color_preset_change_option_desc">Przesuń w lewo lub w prawo, aby zmienić ustawienie koloru</string>
--- a/app/src/main/res/values-pt-rBR/strings.xml
+++ b/app/src/main/res/values-pt-rBR/strings.xml
@ -81,8 +81,8 @@
    <string name="browse_layout_grid">Grade</string>
    <string name="today">Hoje</string>
    <string name="browse_grid_size_auto">Automático</string>
-    <string name="text_alignment_start">Começar</string>
-    <string name="text_alignment_end">Fim</string>
+    <string name="alignment_start">Começar</string>
+    <string name="alignment_end">Fim</string>
    <string name="dynamic_theme">Mercúrio</string>
    <string name="blue_theme">Netuno</string>
    <string name="green_theme">Terra</string>
@ -117,10 +117,10 @@
    <string name="start_permissions_preferences">Permissões</string>
    <string name="copied">Copiado</string>
    <string name="required_content_desc">Requerido</string>
-    <string name="text_alignment_justify">Justificar</string>
+    <string name="alignment_justify">Justificar</string>
    <string name="move_books_description">Escolha a categoria da qual você quer mover todos os livros selecionados(%1$s). Todos os livros selecionados serão movidos para essa categoria.</string>
    <string name="delete_books_description">Isto irá apagar todos os livros selecionados(%1$s) da base de dados. Isso não irá apagar os livros do seu dispositivo.</string>
-    <string name="text_alignment_center">Centro</string>
+    <string name="alignment_center">Centro</string>
    <string name="details_book">Detalhes</string>
    <string name="help_desc_how_to_customize_reader_2">Configurações</string>
    <string name="revert_content_desc">Reverter</string>
--- a/app/src/main/res/values-ta/strings.xml
+++ b/app/src/main/res/values-ta/strings.xml
@ -82,7 +82,7 @@
    <string name="pure_dark_power_saver">சேமிப்பாளர்</string>
    <string name="theme_contrast_standard">தரநிலை</string>
    <string name="theme_contrast_medium">சராசரி</string>
-    <string name="text_alignment_end">முடிவு</string>
+    <string name="alignment_end">முடிவு</string>
    <string name="screen_orientation_free">இலவசம்</string>
    <string name="screen_orientation_portrait">உருவப்படம்</string>
    <string name="screen_orientation_landscape">நிலப்பரப்பு</string>
@ -163,7 +163,7 @@
    <string name="browse_layout_grid">வலைவாய்</string>
    <string name="browse_grid_size_auto">தானி</string>
    <string name="browse_grid_size_per_row">ஒரு வரிசையில்</string>
-    <string name="text_alignment_center">நடுவண்</string>
+    <string name="alignment_center">நடுவண்</string>
    <string name="help_title_how_to_edit_book">நான் ஒரு புத்தகத்தை எவ்வாறு திருத்துவது?</string>
    <string name="help_desc_how_to_edit_book_2">நூலகம்</string>
    <string name="help_title_how_to_read_book">நான் ஒரு புத்தகத்தைப் படிப்பது எப்படி?</string>
@ -263,8 +263,8 @@
    <string name="browse_sort_order_file_type">கோப்பு வகை</string>
    <string name="browse_sort_order_last_modified">கடைசியாக மாற்றப்பட்டது</string>
    <string name="browse_sort_order_file_size">கோப்பு அளவு</string>
-    <string name="text_alignment_start">தொடங்கு</string>
-    <string name="text_alignment_justify">நியாயப்படுத்துங்கள்</string>
+    <string name="alignment_start">தொடங்கு</string>
+    <string name="alignment_justify">நியாயப்படுத்துங்கள்</string>
    <string name="screen_orientation_locked_portrait">பூட்டப்பட்ட உருவப்படம்</string>
    <string name="dynamic_theme">அறிவன்</string>
    <string name="blue_theme">நெப்டியூன்</string>
--- a/app/src/main/res/values-tr/strings.xml
+++ b/app/src/main/res/values-tr/strings.xml
@ -160,10 +160,10 @@
    <string name="browse_sort_order_file_type">Dosya türü</string>
    <string name="browse_sort_order_last_modified">Son değiştirilme</string>
    <string name="browse_sort_order_file_size">Dosya boyutu</string>
-    <string name="text_alignment_start">Başlangıç</string>
-    <string name="text_alignment_justify">İki yana yaslı</string>
-    <string name="text_alignment_center">Ortalı</string>
-    <string name="text_alignment_end">Son</string>
+    <string name="alignment_start">Başlangıç</string>
+    <string name="alignment_justify">İki yana yaslı</string>
+    <string name="alignment_center">Ortalı</string>
+    <string name="alignment_end">Son</string>
    <string name="dynamic_theme">Merkür</string>
    <string name="blue_theme">Neptün</string>
    <string name="green_theme">Dünya</string>
--- a/app/src/main/res/values-uk/strings.xml
+++ b/app/src/main/res/values-uk/strings.xml
@ -200,6 +200,7 @@
    <string name="images_option">Зображення</string>
    <string name="images_option_desc">Показувати зображення разом із написами до них</string>
    <string name="images_corners_roundness_option">Округлість кутків</string>
+    <string name="images_alignment_option">Розташування</string>

    <!-- Browse -->
    <string name="browse_files_structure_option">Структура файлів</string>
@ -253,10 +254,10 @@
    <string name="browse_sort_order_file_size">Розмір файла</string>

    <!-- Text Alignment properties -->
-    <string name="text_alignment_start">Старт</string>
-    <string name="text_alignment_justify">Рівномірно</string>
-    <string name="text_alignment_center">Центр</string>
-    <string name="text_alignment_end">Кінець</string>
+    <string name="alignment_start">Старт</string>
+    <string name="alignment_justify">Рівномірно</string>
+    <string name="alignment_center">Центр</string>
+    <string name="alignment_end">Кінець</string>

    <!-- Screen Orientation properties -->
    <string name="screen_orientation_free">Вільно</string>
--- a/app/src/main/res/values-zh-rCN/strings.xml
+++ b/app/src/main/res/values-zh-rCN/strings.xml
@ -167,8 +167,8 @@
    <string name="browse_layout_list">列表</string>
    <string name="browse_grid_size_per_row">每行</string>
    <string name="browse_sort_order_file_format">文件格式</string>
-    <string name="text_alignment_start">开头</string>
-    <string name="text_alignment_end">末尾</string>
+    <string name="alignment_start">开头</string>
+    <string name="alignment_end">末尾</string>
    <string name="screen_orientation_free">自由</string>
    <string name="screen_orientation_landscape">横屏</string>
    <string name="screen_orientation_locked_portrait">竖屏锁定</string>
@ -184,7 +184,7 @@
    <string name="browse_sort_order_name">字母顺序</string>
    <string name="screen_orientation_portrait">竖屏</string>
    <string name="pink_theme">土星</string>
-    <string name="text_alignment_center">居中</string>
+    <string name="alignment_center">居中</string>
    <string name="dynamic_theme">水星</string>
    <string name="lavender_theme">阋神星</string>
    <string name="files_structure_directory">目录</string>
@ -256,7 +256,7 @@
    <string name="help_desc_how_to_edit_book_1">前往</string>
    <string name="help_desc_how_to_edit_book_2">书库</string>
    <string name="help_title_how_to_read_book">如何阅读一本书？</string>
-    <string name="text_alignment_justify">证明合法</string>
+    <string name="alignment_justify">证明合法</string>
    <string name="help_desc_how_to_add_books_1">前往</string>
    <string name="help_desc_how_to_customize_app_1">前往</string>
    <string name="help_desc_how_to_customize_app_3">您可以在 \"书库\"、\"历史记录 \"和 \"浏览 \"界面点击右上角的三个点，然后从下拉菜单中选择 \"设置\"。 然后你就会看到此应用程序的所有可用设置。 请随意尝试！</string>
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@ -255,6 +255,7 @@
    <string name="images_option">Images</string>
    <string name="images_option_desc">Display images along with their captions</string>
    <string name="images_corners_roundness_option">Corners roundness</string>
+    <string name="images_alignment_option">Alignment</string>

    <!-- Browse -->
    <string name="browse_files_structure_option">Files structure</string>
@ -309,11 +310,11 @@
    <string name="browse_sort_order_last_modified">Last modified</string>
    <string name="browse_sort_order_file_size">File size</string>

-    <!-- Text Alignment properties -->
-    <string name="text_alignment_start">Start</string>
-    <string name="text_alignment_justify">Justify</string>
-    <string name="text_alignment_center">Center</string>
-    <string name="text_alignment_end">End</string>
+    <!-- Alignment properties -->
+    <string name="alignment_start">Start</string>
+    <string name="alignment_justify">Justify</string>
+    <string name="alignment_center">Center</string>
+    <string name="alignment_end">End</string>

    <!-- Screen Orientation properties -->
    <string name="screen_orientation_free">Free</string>