1

I'm having a issue with Android not displaying multiple spaces for text in a <div>. If you look at my example below on desktop, the text "Test" is at the very edge on the right. If you look at it on an Android device, it's about 20ish pixels away from the right edge. I'm using the white-space:pre-wrap CSS style, but for some reason it renders incorrectly on Android.

I'm building a text scrolling app that needs to respect spaces that the end-user enters. Basically, I need to display what the user enters, multiple spaces and all.

Does Android render white spaces differently? If so, how can I get it to look consistent across all platforms?

.parentDiv {
  width: 277px;
  height: 50px;
  top:0;
  left:0
  position: absolute;
  background-color: rgb(0, 0, 0);
  word-wrap: break-word;
  line-height: 1.0em;
  overflow: hidden;
  z-index: 1002;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  filter: alpha(opacity=100);
  -moz-opacity: 1.00;
  -khtml-opacity: 1.00;
  opacity: 1.00;
  font-family: Arial, fallback Arial;
  font-size: 14px;
  text-align: start;
  color: rgb(191, 190, 191);
  border: 0px solid;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.textBoxText {
  font-family: inherit;
  font-size: inherit;
  text-decoration: inherit;
}
<div id="layer-0-0" class="parentDiv">
  <div class="textBoxText">                                                            TEST</div>
</div>

View on JSFiddle

showdev
  • 28,454
  • 37
  • 55
  • 73
Deadcell
  • 23
  • 4
  • Which Android browser are you using? – showdev Oct 09 '17 at 17:54
  • chrome. it happens on version 6 to the latest version 7 – Deadcell Oct 09 '17 at 18:09
  • Different browsers, browser versions, or platforms may display fonts with different measurements or spacing. See [How to prevent different browsers rendering fonts differently?](https://stackoverflow.com/questions/30876894/how-to-prevent-different-browsers-rendering-fonts-differently) I'd avoid relying on whitespace characters for layout purposes. If you're trying to align text to the right, consider CSS [`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) or [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float). Are you trying to achieve something else? – showdev Oct 09 '17 at 18:16
  • So, I'm not exactly using spaces for layout purposes. I'm building a text scrolling app that needs to respect spaces that the end user enters. Basically what the user enters, multiple spaces and all, is what I need to display. I'm looking at your links right now. – Deadcell Oct 09 '17 at 18:26
  • Ok, I see. Is the number of spaces what's most important, regardless of how it's displayed? Or does it also need to be displayed pixel-perfectly identical? For example, can it look different as long as there's still 30 spaces when there's supposed to be? – showdev Oct 09 '17 at 18:32
  • Yeah, the issue is it needs to look the same. Not sure if you look at the fiddle I linked but it shows what I mean. I need all platforms to look pixel perfect with the correct amount of spaces. – Deadcell Oct 09 '17 at 18:35
  • I think that will be a difficult task, apart from using images or some more universal render engine, maybe like Flash. Here's another relevant post: [How can I achieve pixel-perfect positioning and spacing of textual elements across browsers?](https://stackoverflow.com/questions/6990717/how-can-i-achieve-pixel-perfect-positioning-and-spacing-of-textual-elements-acro) – showdev Oct 09 '17 at 18:41
  • hmm, I see. Well that's a shame really because using images is not really an option here. What's weird is if I don't allow for multiple spaces in a row, the text matches across all platforms. Oh well, I'll just have to see if I can come up with some other method to do this. Thanks for the help. – Deadcell Oct 09 '17 at 18:46

0 Answers0