Add margin size, text justification and hyphenation to Theme settings

app/src/main/java/org/wikipedia/bridge/JavaScriptActionHandler.kt

@@ -28,6 +28,43 @@ object JavaScriptActionHandler {
         return "pcs.c1.Page.setMargins({ top:'${top}px', bottom:'${bottom}px' })"
     }
 
+    private fun buildTextFormattingCss(): String {
+        val sb = StringBuilder()
+        val selectors = "body, .pcs-body, .mw-parser-output, .mw-parser-output p, .mw-parser-output li," +
+                " .mw-parser-output dd, .mw-parser-output td"
+        val rules = mutableListOf<String>()
+        if (Prefs.isTextJustifyEnabled) {
+            rules.add("text-align: justify !important")
+        }
+        if (Prefs.isTextHyphenationEnabled) {
+            rules.add("-webkit-hyphens: auto !important")
+            rules.add("hyphens: auto !important")
+            rules.add("word-wrap: break-word !important")
+            rules.add("overflow-wrap: break-word !important")
+        }
+        if (rules.isNotEmpty()) {
+            sb.append("$selectors { ${rules.joinToString("; ")}; }")
+        }
+        return sb.toString()
+    }
+
+    fun setHorizontalMargins(multiplier: Int): String {
+        // multiplier 10 = default PCS behavior (no margin override)
+        // multiplier 9..0 = progressively wider content
+        return "(function() {" +
+                "var s = document.getElementById('app-margin-style');" +
+                "if (!s) { s = document.createElement('style'); s.id = 'app-margin-style'; document.head.appendChild(s); }" +
+                "if ($multiplier >= 10) { s.innerHTML = '${buildTextFormattingCss()}'; return; }" +
+                "s.innerHTML = '" +
+                "html, body { overflow-x: hidden !important; }" +
+                " body, .pcs-body, .content, .mw-body, #content, #bodyContent, .mw-parser-output, section" +
+                " { max-width: 100% !important; box-sizing: border-box !important; }" +
+                " body { padding-left: ${multiplier + 1}vw !important; padding-right: ${multiplier + 1}vw !important;" +
+                " margin-left: auto !important; margin-right: auto !important; }" +
+                " ${buildTextFormattingCss()}';" +
+                "})();"
+    }
+
     fun getTextSelection(): String {
         return "pcs.c1.InteractionHandling.getSelectionInfo()"
     }

app/src/main/java/org/wikipedia/events/ChangeMarginSizeEvent.kt

@@ -0,0 +1,3 @@
+package org.wikipedia.events
+
+class ChangeMarginSizeEvent

app/src/main/java/org/wikipedia/page/PageActivity.kt

@@ -54,6 +54,7 @@ import org.wikipedia.descriptions.DescriptionEditSuccessActivity
 import org.wikipedia.edit.EditHandler
 import org.wikipedia.edit.EditSectionActivity
 import org.wikipedia.events.ArticleSavedOrDeletedEvent
+import org.wikipedia.events.ChangeMarginSizeEvent
 import org.wikipedia.events.ChangeTextSizeEvent
 import org.wikipedia.extensions.parcelableExtra
 import org.wikipedia.gallery.GalleryActivity
@@ -210,6 +211,9 @@ class PageActivity : BaseActivity(), PageFragment.Callback, LinkPreviewDialog.Lo
                         is ChangeTextSizeEvent -> {
                             pageFragment.updateFontSize()
                         }
+                        is ChangeMarginSizeEvent -> {
+                            pageFragment.updateMargins()
+                        }
                         is ArticleSavedOrDeletedEvent -> {
                             pageFragment.title?.run {
                                 if (event.pages.any { it.apiTitle == prefixedText && it.lang == wikiSite.languageCode }) {

app/src/main/java/org/wikipedia/page/PageFragment.kt

@@ -964,6 +964,7 @@ class PageFragment : Fragment(), BackPressedHandler, CommunicationBridge.Communi
         // Explicitly set the top margin (even though it might have already been set in the setup
         // handler), since the page metadata might have altered the lead image display state.
         bridge.execute(JavaScriptActionHandler.setTopMargin(leadImagesHandler.topMargin))
+        bridge.execute(JavaScriptActionHandler.setHorizontalMargins(Prefs.marginSizeMultiplier))
         bridge.execute(JavaScriptActionHandler.setFooter(model))
     }
 
@@ -1053,6 +1054,10 @@ class PageFragment : Fragment(), BackPressedHandler, CommunicationBridge.Communi
         webView.settings.defaultFontSize = app.getFontSize().toInt()
     }
 
+    fun updateMargins() {
+        bridge.execute(JavaScriptActionHandler.setHorizontalMargins(Prefs.marginSizeMultiplier))
+    }
+
     fun updateQuickActionsAndMenuOptions() {
         if (!isAdded) {
             return

app/src/main/java/org/wikipedia/settings/Prefs.kt

@@ -128,6 +128,18 @@ object Prefs {
         get() = PrefsIoUtil.getInt(R.string.preference_key_text_size_multiplier, 0)
         set(multiplier) = PrefsIoUtil.setInt(R.string.preference_key_text_size_multiplier, multiplier)
 
+    var marginSizeMultiplier
+        get() = PrefsIoUtil.getInt(R.string.preference_key_margin_size_multiplier, 10)
+        set(multiplier) = PrefsIoUtil.setInt(R.string.preference_key_margin_size_multiplier, multiplier)
+
+    var isTextJustifyEnabled
+        get() = PrefsIoUtil.getBoolean(R.string.preference_key_text_justify, true)
+        set(value) = PrefsIoUtil.setBoolean(R.string.preference_key_text_justify, value)
+
+    var isTextHyphenationEnabled
+        get() = PrefsIoUtil.getBoolean(R.string.preference_key_text_hyphenation, true)
+        set(value) = PrefsIoUtil.setBoolean(R.string.preference_key_text_hyphenation, value)
+
     var editingTextSizeMultiplier
         get() = PrefsIoUtil.getInt(R.string.preference_key_editing_text_size_multiplier, 0)
         set(multiplier) = PrefsIoUtil.setInt(R.string.preference_key_editing_text_size_multiplier, multiplier)

app/src/main/java/org/wikipedia/theme/ThemeChooserDialog.kt

@@ -27,6 +27,7 @@ import org.wikipedia.activity.FragmentUtil
 import org.wikipedia.analytics.eventplatform.AppearanceSettingInteractionEvent
 import org.wikipedia.concurrency.FlowEventBus
 import org.wikipedia.databinding.DialogThemeChooserBinding
+import org.wikipedia.events.ChangeMarginSizeEvent
 import org.wikipedia.events.WebViewInvalidateEvent
 import org.wikipedia.page.ExtendedBottomSheetDialogFragment
 import org.wikipedia.settings.Prefs
@@ -101,6 +102,40 @@ class ThemeChooserDialog : ExtendedBottomSheetDialogFragment() {
             override fun onStopTrackingTouch(seekBar: SeekBar) {}
         })
 
+        binding.marginSizeSeekBar.value = Prefs.marginSizeMultiplier
+        binding.buttonDecreaseMarginSize.setOnClickListener {
+            val newValue = (Prefs.marginSizeMultiplier - 1).coerceAtLeast(resources.getInteger(R.integer.minMarginSizeMultiplier))
+            Prefs.marginSizeMultiplier = newValue
+            binding.marginSizeSeekBar.value = newValue
+            FlowEventBus.post(ChangeMarginSizeEvent())
+        }
+        binding.buttonIncreaseMarginSize.setOnClickListener {
+            val newValue = (Prefs.marginSizeMultiplier + 1).coerceAtMost(resources.getInteger(R.integer.maxMarginSizeMultiplier))
+            Prefs.marginSizeMultiplier = newValue
+            binding.marginSizeSeekBar.value = newValue
+            FlowEventBus.post(ChangeMarginSizeEvent())
+        }
+        binding.marginSizeSeekBar.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
+            override fun onProgressChanged(seekBar: SeekBar, value: Int, fromUser: Boolean) {
+                if (!fromUser) return
+                Prefs.marginSizeMultiplier = binding.marginSizeSeekBar.value
+                FlowEventBus.post(ChangeMarginSizeEvent())
+            }
+            override fun onStartTrackingTouch(seekBar: SeekBar) {}
+            override fun onStopTrackingTouch(seekBar: SeekBar) {}
+        })
+
+        binding.textJustifySwitch.isChecked = Prefs.isTextJustifyEnabled
+        binding.textJustifySwitch.setOnCheckedChangeListener { _, isChecked ->
+            Prefs.isTextJustifyEnabled = isChecked
+            FlowEventBus.post(ChangeMarginSizeEvent())
+        }
+        binding.textHyphenationSwitch.isChecked = Prefs.isTextHyphenationEnabled
+        binding.textHyphenationSwitch.setOnCheckedChangeListener { _, isChecked ->
+            Prefs.isTextHyphenationEnabled = isChecked
+            FlowEventBus.post(ChangeMarginSizeEvent())
+        }
+
         binding.syntaxHighlightSwitch.setOnCheckedChangeListener { _, isChecked ->
             Prefs.editSyntaxHighlightEnabled = isChecked
             callback()?.onEditingPrefsChanged()
@@ -157,6 +192,10 @@ class ThemeChooserDialog : ExtendedBottomSheetDialogFragment() {
 
     private fun updateForEditing() {
         binding.themeChooserDarkModeDimImagesSwitch.isVisible = !isEditing
+        binding.marginSizeContainer.isVisible = !isEditing
+        binding.textFormattingDividerTop.isVisible = !isEditing
+        binding.textFormattingContainer.isVisible = !isEditing
+        binding.textFormattingDividerBottom.isVisible = !isEditing
         binding.readingFocusModeContainer.isVisible = !isEditing
         binding.themeChooserReadingFocusModeDescription.isVisible = !isEditing
         binding.fontFamilyContainer.isVisible = !isEditing

app/src/main/java/org/wikipedia/views/ObservableWebView.kt

@@ -192,6 +192,19 @@ class ObservableWebView : WebView {
         FlowEventBus.post(INVALIDATE_EVENT)
     }
 
+    override fun overScrollBy(deltaX: Int, deltaY: Int, scrollX: Int, scrollY: Int,
+                              scrollRangeX: Int, scrollRangeY: Int, maxOverScrollX: Int,
+                              maxOverScrollY: Int, isTouchEvent: Boolean): Boolean {
+        // Block horizontal scrolling entirely
+        return super.overScrollBy(0, deltaY, 0, scrollY, 0, scrollRangeY, 0,
+                maxOverScrollY, isTouchEvent)
+    }
+
+    override fun scrollTo(x: Int, y: Int) {
+        // Only allow vertical scrolling
+        super.scrollTo(0, y)
+    }
+
     companion object {
         private val INVALIDATE_EVENT = WebViewInvalidateEvent()
         private val FAST_SCROLL_THRESHOLD = (1000 * densityScalar).toInt()

app/src/main/res/layout/dialog_theme_chooser.xml

@@ -180,6 +180,118 @@
 
             </LinearLayout>
 
+            <LinearLayout
+                android:id="@+id/marginSizeContainer"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical">
+
+                <TextView
+                    android:id="@+id/margin_size_label"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="@string/margin_size_label"
+                    android:textColor="?attr/primary_color"
+                    android:textSize="16sp" />
+
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="4dp">
+
+                    <TextView
+                        android:id="@+id/buttonDecreaseMarginSize"
+                        android:layout_width="32dp"
+                        android:layout_height="32dp"
+                        android:layout_gravity="center_vertical"
+                        android:background="?attr/selectableItemBackgroundBorderless"
+                        android:clickable="true"
+                        android:contentDescription="@string/margin_size_decrease"
+                        android:focusable="true"
+                        android:gravity="center"
+                        android:text="-"
+                        android:textColor="?attr/primary_color"
+                        android:textSize="20sp"
+                        android:textStyle="bold"
+                        tools:ignore="HardcodedText" />
+
+                    <org.wikipedia.views.DiscreteSeekBar
+                        android:id="@+id/margin_size_seek_bar"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_gravity="center_vertical"
+                        android:layout_weight="1"
+                        android:max="@integer/maxMarginSizeMultiplier"
+                        android:progressBackgroundTint="?attr/border_color"
+                        app:min="@integer/minMarginSizeMultiplier"
+                        app:tickDrawable="@drawable/ic_seek_bar_tick" />
+
+                    <TextView
+                        android:id="@+id/buttonIncreaseMarginSize"
+                        android:layout_width="32dp"
+                        android:layout_height="32dp"
+                        android:layout_gravity="center_vertical"
+                        android:background="?attr/selectableItemBackgroundBorderless"
+                        android:clickable="true"
+                        android:contentDescription="@string/margin_size_increase"
+                        android:focusable="true"
+                        android:gravity="center"
+                        android:text="+"
+                        android:textColor="?attr/primary_color"
+                        android:textSize="20sp"
+                        android:textStyle="bold"
+                        tools:ignore="HardcodedText" />
+
+                </LinearLayout>
+
+            </LinearLayout>
+
+            <View
+                android:id="@+id/textFormattingDividerTop"
+                android:layout_width="match_parent"
+                android:layout_height="0.5dp"
+                android:layout_gravity="center_horizontal"
+                android:layout_marginTop="16dp"
+                android:layout_marginBottom="16dp"
+                android:background="?attr/border_color" />
+
+            <LinearLayout
+                android:id="@+id/textFormattingContainer"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal">
+
+                <com.google.android.material.materialswitch.MaterialSwitch
+                    android:id="@+id/text_justify_switch"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="1"
+                    android:layout_marginEnd="32dp"
+                    android:gravity="center_vertical"
+                    android:text="@string/text_justify_label"
+                    android:textColor="?attr/primary_color" />
+
+                <com.google.android.material.materialswitch.MaterialSwitch
+                    android:id="@+id/text_hyphenation_switch"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_weight="1"
+                    android:layout_marginStart="32dp"
+                    android:gravity="center_vertical"
+                    android:text="@string/text_hyphenation_label"
+                    android:textColor="?attr/primary_color" />
+
+            </LinearLayout>
+
+            <View
+                android:id="@+id/textFormattingDividerBottom"
+                android:layout_width="match_parent"
+                android:layout_height="0.5dp"
+                android:layout_gravity="center_horizontal"
+                android:layout_marginTop="16dp"
+                android:layout_marginBottom="16dp"
+                android:background="?attr/border_color" />
+
             <LinearLayout
                 android:id="@+id/readingFocusModeContainer"
                 android:layout_width="match_parent"

app/src/main/res/values-bg/strings.xml

@@ -460,6 +460,11 @@
   <string name="theme_category_editing">Редактиране</string>
   <string name="reading_focus_mode">Режим на фокусиране при четене</string>
   <string name="reading_focus_mode_detail">Скрива функциите за редактиране и долната лента с инструменти при превъртане</string>
+  <string name="margin_size_increase">Увеличаване на полетата</string>
+  <string name="margin_size_decrease">Намаляване на полетата</string>
+  <string name="margin_size_label">Полета</string>
+  <string name="text_justify_label">Подравняване</string>
+  <string name="text_hyphenation_label">Сричкопренасяне</string>
   <string name="editing_syntax_highlight_label">Оцветяване на синтаксиса</string>
   <string name="editing_line_numbers_label">Показване номерата на редовете</string>
   <string name="editing_monospace_font_label">Използване на моноширинен шрифт</string>

app/src/main/res/values-cs/strings.xml

@@ -522,6 +522,11 @@
   <string name="theme_category_editing">Editace</string>
   <string name="reading_focus_mode">Soustředěné čtení</string>
   <string name="reading_focus_mode_detail">Skryje funkce editace a spodní panel nástrojů při posouvání</string>
+  <string name="margin_size_increase">Zvětšit okraje</string>
+  <string name="margin_size_decrease">Zmenšit okraje</string>
+  <string name="margin_size_label">Okraje</string>
+  <string name="text_justify_label">Zarovnat</string>
+  <string name="text_hyphenation_label">Dělení</string>
   <string name="editing_syntax_highlight_label">Zvýraznění syntaxe</string>
   <string name="editing_line_numbers_label">Zobrazit čísla řádků</string>
   <string name="editing_monospace_font_label">Použít monospace font</string>

app/src/main/res/values-de/strings.xml

@@ -539,6 +539,11 @@
   <string name="theme_category_editing">Bearbeiten</string>
   <string name="reading_focus_mode">Modus Lesefokus</string>
   <string name="reading_focus_mode_detail">Blendet Bearbeitungsfunktionen und untere Symbolleiste beim Scrollen aus</string>
+  <string name="margin_size_increase">Ränder vergrößern</string>
+  <string name="margin_size_decrease">Ränder verkleinern</string>
+  <string name="margin_size_label">Ränder</string>
+  <string name="text_justify_label">Blocksatz</string>
+  <string name="text_hyphenation_label">Silbentrennung</string>
   <string name="editing_syntax_highlight_label">Syntaxhervorhebung</string>
   <string name="editing_line_numbers_label">Zeilennummern anzeigen</string>
   <string name="editing_monospace_font_label">Monospace-Schriftarten verwenden</string>

app/src/main/res/values-es/strings.xml

@@ -583,6 +583,11 @@
   <string name="theme_category_editing">Edición</string>
   <string name="reading_focus_mode">Modo de lectura con concentración</string>
   <string name="reading_focus_mode_detail">Oculta las funciones de edición y la barra de herramientas inferior al desplazarse</string>
+  <string name="margin_size_increase">Aumentar márgenes</string>
+  <string name="margin_size_decrease">Reducir márgenes</string>
+  <string name="margin_size_label">Márgenes</string>
+  <string name="text_justify_label">Justificar</string>
+  <string name="text_hyphenation_label">Separación</string>
   <string name="editing_syntax_highlight_label">Resaltado de sintaxis</string>
   <string name="editing_line_numbers_label">Mostrar números de línea</string>
   <string name="editing_monospace_font_label">Usar fuente monoespaciada</string>

app/src/main/res/values-fr/strings.xml

@@ -558,7 +558,12 @@
   <string name="theme_category_reading">Lecture</string>
   <string name="theme_category_editing">Modification</string>
   <string name="reading_focus_mode">Mode de focalisation sur la lecture</string>
-  <string name="reading_focus_mode_detail">Masque les fonctionnalités de modification et la barre d’outil en bas lors du défilement</string>
+  <string name="reading_focus_mode_detail">Masque les fonctionnalités de modification et la barre d\'outil en bas lors du défilement</string>
+  <string name="margin_size_increase">Augmenter les marges</string>
+  <string name="margin_size_decrease">Réduire les marges</string>
+  <string name="margin_size_label">Marges</string>
+  <string name="text_justify_label">Justifier</string>
+  <string name="text_hyphenation_label">Coupure</string>
   <string name="editing_syntax_highlight_label">Mise en évidence de la syntaxe</string>
   <string name="editing_line_numbers_label">Afficher les numéros de ligne</string>
   <string name="editing_monospace_font_label">Utiliser une police à chasse fixe</string>