Title: Mobile webview text style issue
Last modified: June 15, 2022

---

# Mobile webview text style issue

 *  Resolved [saijav](https://wordpress.org/support/users/saijav/)
 * (@saijav)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/mobile-webview-text-style-issue/)
 * My latest quiz have long questions and on mobile view the text is disorented 
   and not in proper order, is there anyway i can edit the question text to be optimized
   for mobile view.
    Thank you
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmobile-webview-text-style-issue%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Harmonic Design](https://wordpress.org/support/users/harmonic_design/)
 * (@harmonic_design)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/mobile-webview-text-style-issue/#post-15740276)
 * Hi saijav,
    your theme controls things like colours and font sizes – HD Quiz 
   inherits whatever your theme has set.
 * On mobile, your theme is doing several things that are just… weird.
 * For example, it is setting labels (answers) to a SUPER small font size, it is
   forcing word-break on all headings, and it appears to be doing something to text
   direction.
 * I’ll take a deeper look into your site and see if I can untangle this for you.
   Stay tuned!
 *  Plugin Author [Harmonic Design](https://wordpress.org/support/users/harmonic_design/)
 * (@harmonic_design)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/mobile-webview-text-style-issue/#post-15740639)
 * Hi saijav,
    I did some digging and found some interesting things. So far, to 
   my understanding, this is actually a _browser_ issue. The browser has no idea
   how to properly format and arrange the word/letter order since modern browsers
   _are too damned smart_ and are autodetecting the language direction. In my testing,
   this also appears to be specific with Urdu and doesn’t affect other RTL languages.
 * Even weirder, this language appears to have a bug with line-wrapping – which 
   is the thing that is actually causing the “jumble”. The font treats each line(
   not line break, just a wrap) as if it were its own sentence. You can see it in
   action as you increase and decrease your browser window.
 * Can you please confirm, perhaps with a screenshot, how the Urdu is _supposed 
   to look_ for the first question so I can use it as the baseline comparison?
 * **How to fix.**
    Unfortunately, my attempts to create an “elegant” solution for
   you have failed. This is a super weird issue that appears to be Urdu-specific
   that I’ve never come across before.
 * OPTION 1: Featured image.
    This option will 100% work for you. If you create 
   an image and put the Urdu in that image, you can then set this image as the Featured
   Image for the question. Since it’s an image, it will always be perfectly formatted
   no matter what browser your visitors are viewing in, and regardless on what they
   have their language set to. Only downside is that it is tedious to have to create
   an image for each question.
 * OPTION 2: Table-caption
    Another option is to wrap the Urdu in a span. We can
   then target that span with CSS and give it the `display: table-caption;` property.
   This will basically “stack” each word on top of each other, meaning one word 
   per line. Definitely not the most elegant solution, but it will at least force
   the same order for everyone.
 * Other than that, I’m out of ideas. I think this is just literally a browser bug
   that we have to wait to be fixed. **Even Google** is broken with this.
 * Here is a video demonstrating the exact same problem with Google Translate: [https://youtu.be/OuCnTxOIwS4](https://youtu.be/OuCnTxOIwS4)
 * I’m marking this as solved for now as A) Using the featured image will solve 
   this for you, and B) The underlying issue is language/browser-specific and not
   something that I can change on my end.
 * However, please feel free to continue to respond here if you have any further
   insights/questions or if anyone else reading this can chip in with some ideas.
 *  Thread Starter [saijav](https://wordpress.org/support/users/saijav/)
 * (@saijav)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/mobile-webview-text-style-issue/#post-15742146)
 * Thank you so much for the detasiled answer. The featured image would do for me
   now.
    Will look into further details later.
 * Thank you for the promt response

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mobile webview text style issue’ is closed to new replies.

 * ![](https://ps.w.org/hd-quiz/assets/icon-256X256.gif?rev=2936040)
 * [HD Quiz](https://wordpress.org/plugins/hd-quiz/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/hd-quiz/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/hd-quiz/)
 * [Active Topics](https://wordpress.org/support/plugin/hd-quiz/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/hd-quiz/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/hd-quiz/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [saijav](https://wordpress.org/support/users/saijav/)
 * Last activity: [3 years, 11 months ago](https://wordpress.org/support/topic/mobile-webview-text-style-issue/#post-15742146)
 * Status: resolved