Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #5032 Images in Arabic (RTL) lessons are right-aligned rather than center-aligned. #5212

Merged
merged 6 commits into from
Oct 31, 2023
Merged

Fix #5032 Images in Arabic (RTL) lessons are right-aligned rather than center-aligned. #5212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dabc513
centered images in RTL mode
Vishwajith-Shettigar Oct 28, 2023
a8d8970
centered images in RTL mode
Vishwajith-Shettigar Oct 28, 2023
e2c39f8
centered image in RTL mode
Vishwajith-Shettigar Oct 28, 2023
d3c94d7
Merge branch 'develop' into RTLimagealign
Vishwajith-Shettigar Oct 28, 2023
625c922
Merge branch 'develop' into RTLimagealign
Vishwajith-Shettigar Oct 31, 2023
dcb51c7
made isRTLMode function private
Vishwajith-Shettigar Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion utility/src/main/java/org/oppia/android/util/parser/html/HtmlParser.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,26 @@ class HtmlParser private constructor(
supportsLinks: Boolean = false,
supportsConceptCards: Boolean = false
): Spannable {

var htmlContent = rawString

// Canvas does not support RTL, it always starts from left to right in RTL due to which compound drawables are
// not center aligned. To avoid this situation check if RTL is enabled and set the textDirection.
if (isRtl) {
htmlContentTextView.textDirection = View.TEXT_DIRECTION_RTL

val regex = Regex("""<oppia-noninteractive-image [^>]*>.*?</oppia-noninteractive-image>""")
val modifiedHtmlContent = rawString.replace(regex) {
val oppiaImageTag = it.value
"""<div style="text-align: center;">$oppiaImageTag</div>"""
}
htmlContent = modifiedHtmlContent
} else {
htmlContentTextView.textDirection = View.TEXT_DIRECTION_LTR
}

htmlContentTextView.invalidate()

var htmlContent = rawString
if ("\n\t" in htmlContent) {
htmlContent = htmlContent.replace("\n\t", "")
}
Expand Down
10 changes: 9 additions & 1 deletion utility/src/main/java/org/oppia/android/util/parser/image/UrlImageParser.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import android.view.View
import android.view.ViewGroup
import android.view.ViewTreeObserver
import android.widget.TextView
import androidx.core.view.ViewCompat
import com.bumptech.glide.request.target.CustomTarget
import com.bumptech.glide.request.transition.Transition
import org.oppia.android.util.R
Expand Down Expand Up @@ -234,6 +235,11 @@ class UrlImageParser private constructor(
private val autoResizeImage: Boolean
) : AutoAdjustingImageTarget<T, D>(targetConfiguration) {

private fun isRTLMode(): Boolean {
return ViewCompat.getLayoutDirection(htmlContentTextView) == ViewCompat
.LAYOUT_DIRECTION_RTL
}

override fun computeBounds(
context: Context,
drawable: D,
Expand Down Expand Up @@ -304,11 +310,13 @@ class UrlImageParser private constructor(
drawableWidth *= multipleFactor
}
}
val drawableLeft = if (imageCenterAlign) {

val drawableLeft = if (imageCenterAlign && !isRTLMode()) {
calculateInitialMargin(maxAvailableWidth, drawableWidth)
} else {
0f
}

val drawableTop = 0f
val drawableRight = drawableLeft + drawableWidth
val drawableBottom = drawableTop + drawableHeight
Expand Down
Loading