-1

I'm having problems get pre-formatted text to render properly on my iPhone.

If I just do a single pre-formatted item, things look OK (code immediately below).

<!DOCTYPE html>
<html>
<head>
<title>Problem with <pre></title>
</head>

<style>
pre {
  background-color: rgb(30, 30, 30);
  color: rgb(200,200,200);
}
</style>

<body>
<!-- exactly 80 characters -->
<div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
</body>
</html>

From my iPhone

But when I try to do the same thing within an ordered list (code immediately below).

<!DOCTYPE html>
<html>
<head>
<title>Problem with <pre></title>
</head>

<style>
pre {
  background-color: rgb(30, 30, 30);
  color: rgb(200,200,200);
}
</style>

<body>
<div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
<ol>
  <li> <div style="width:80ch"><pre>asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</pre></div>
</ol>
</div>
</body>
</html>

Everything looks fine when loading this from my computer, but on my iPhone, not only is the indented one messed up, now the original one looks wrong too. It's almost like the font size changed when I added the list.

from my phone

Links to both versions:

first one

second one

How can I make this work correctly on my phone? I need the width to be 80 characters wide so I can show standard terminal output.

doggo
  • 53
  • 1
  • 6
  • Try setting the div and li to inline-block and setting the x-overflow property to scroll. Preformatted text doesn't wrap, I don't think. – Sydney Y Mar 03 '20 at 02:59
  • 1
    That provides a work-around (thanks for that!), but the question still remains unresolved. Note that the first one DOES display correctly on iPhone. – doggo Mar 04 '20 at 00:42
  • I see that I have received at least one downvote, but no suggestion on how to improve the question. I'd ask anyone with feedback to please let me know how to ask a better question. – doggo Mar 04 '20 at 15:04
  • The downvote wasn't me, but from what I've observed: SO prefers inline images and code. I guess that way it persists for the life of the question, rather than counting on imgur to continue hosting the image. – Sydney Y Mar 06 '20 at 04:19
  • Bummer. As a new user, I am not allowed to put images in my question. – doggo Mar 06 '20 at 04:47

1 Answers1

0

The css unit ch is actually the width of a 0 (zero). So in order for your code to work you must make sure that the parent element is using a monospace font and that it's websafe so that your phone uses that monospace font.

In your case the div and li are using the ch units so the div and li need to have monospace fonts because they won't inherit from the child pre tag. You'll also need to set a matching font size between the pre elements and their parents.

Sydney Y
  • 2,912
  • 3
  • 9
  • 15
  • 1
    After hours of slamming my head against the wall and feeling like the stupidest person in the world, it seems like David Kaneda's answer to this question: https://stackoverflow.com/questions/3226001/some-font-sizes-rendered-larger-on-safari-iphone applies to my situation (incorporating his suggestion fixed the problem instantly). – doggo Mar 06 '20 at 04:05
  • Ah, that's awesome! – Sydney Y Mar 06 '20 at 04:14