X
Tap here to go to the mobile version of the site.

Support Forum

Why does <pre> formatted text </pre> not display correctly?

Posted

Family tree .html file with preformatted text displays correctly in desk top Firefox but not in tablet version. Misalignment occurs.

Family tree .html file with preformatted text displays correctly in desk top Firefox but not in tablet version. Misalignment occurs.

Chosen solution

Assuming you are a web developer. Unless the page sets the meta viewport element the text of the page is inflated to make it more readable. Generally this works ok, occasionally it produces bazaar results.

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

If you are not you can disable this inflation for your copy of Firefox by opening the settings by

  • tapping on your phone's menu button or 3 dot menu in the upper right of the browser
  • selecting settings from the menu
  • selecting display
  • selecting text size
  • pressing the small 'A' button till the text is at its smallest size
  • selecting set
  • then reloading the page should not change the text size
Read this answer in context 5
kbrosnan
  • Moderator
582 solutions 3847 answers

Chosen Solution

Assuming you are a web developer. Unless the page sets the meta viewport element the text of the page is inflated to make it more readable. Generally this works ok, occasionally it produces bazaar results.

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

If you are not you can disable this inflation for your copy of Firefox by opening the settings by

  • tapping on your phone's menu button or 3 dot menu in the upper right of the browser
  • selecting settings from the menu
  • selecting display
  • selecting text size
  • pressing the small 'A' button till the text is at its smallest size
  • selecting set
  • then reloading the page should not change the text size
Assuming you are a web developer. Unless the page sets the meta viewport element the text of the page is inflated to make it more readable. Generally this works ok, occasionally it produces bazaar results. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag If you are not you can disable this inflation for your copy of Firefox by opening the settings by * tapping on your phone's menu button or 3 dot menu in the upper right of the browser * selecting settings from the menu * selecting display * selecting text size * pressing the small 'A' button till the text is at its smallest size * selecting set * then reloading the page should not change the text size

Question owner

No, changing text size does not cure misalignments of vertical link lines created by | key and spaces. OK on PC with identical coding. See users.Adam.com.au/dcredway/FamTreeA.html

No, changing text size does not cure misalignments of vertical link lines created by | key and spaces. OK on PC with identical coding. See users.Adam.com.au/dcredway/FamTreeA.html

Question owner

Have now read many items on Viewport. But using this meta tag in problem
 web page it has not cured layout of pre-fotmatted text.

First question - can viewport tag only be used in CSS? My web family web site was created without a CSS style sheet to keep it simple.

Will there be problems depending on viewing device such as any tablet or phone?  Hard to view this site on phone!

Thanks for your help from old 82 year Derek
Have now read many items on Viewport. But using this meta tag in problem <pre> web page it has not cured layout of pre-fotmatted text. First question - can viewport tag only be used in CSS? My web family web site was created without a CSS style sheet to keep it simple. Will there be problems depending on viewing device such as any tablet or phone? Hard to view this site on phone! Thanks for your help from old 82 year Derek

Question owner

Need any help or suggestions for formatted text problem

Sorry, didn't tick box below in previous message

Regards Derek

Need any help or suggestions for formatted text problem Sorry, didn't tick box below in previous message Regards Derek
jscher2000
  • Top 10 Contributor
8695 solutions 71074 answers

Here's a working link: http://users.adam.com.au/dcredway/FamTreeA.htm

On Windows, Firefox uses the TrueType font Courier New to render <pre> (by default, assuming you didn't change it in the Options dialog). On Android, Firefox uses a fixed-width font named Droid Sans Mono.

There is possibly relevant difference between these fonts: Courier New has specific regular, italic, bold, and bold italic variants, but Droid Sans Mono only has regular. In order to make Droid Sans Mono "bold" Firefox has to modify the characters, and this might be causing the problem, or part of the problem.

To test that theory, could you create a version of the page without the <b> tag around the tree?

Here's a working link: http://users.adam.com.au/dcredway/FamTreeA.htm On Windows, Firefox uses the TrueType font Courier New to render &lt;pre> (by default, assuming you didn't change it in the Options dialog). On Android, Firefox uses a fixed-width font named Droid Sans Mono. There is possibly relevant difference between these fonts: Courier New has specific regular, italic, bold, and bold italic variants, but Droid Sans Mono only has regular. In order to make Droid Sans Mono "bold" Firefox has to modify the characters, and this might be causing the problem, or part of the problem. To test that theory, could you create a version of the page without the &lt;b> tag around the tree?

Modified by jscher2000

Question owner

Yes removing bold tag does result in correct display of preformatted text . But it makes family tree look like teletype faint text.

Firefox on tablets should use Courier New so web display is identical to desktop, laptop etc PCs or is there a better solution?

Yes removing <b> bold tag does result in correct display of preformatted text . But it makes family tree look like teletype faint text. Firefox on tablets should use Courier New so web display is identical to desktop, laptop etc PCs or is there a better solution?
jscher2000
  • Top 10 Contributor
8695 solutions 71074 answers

Hi Yawder, thank you for testing that.

So one possibility is that Firefox could do a better job improvising bold from Droid Sans Mono. But I don't know what the timeline would be for that.

Another option might be to specify a different monospaced font, but I don't know whether a better monospaced font is available for Android devices. I tried searching that yesterday, but didn't see any authoritative listing.

A third possibility might be to replace the regular spaces with non-breaking spaces (&nbsp;) to see whether Firefox "bolds" those better. But this will make it hard for you to edit and bulk up the page.

You could add a script to the page that would "sniff" the user's browser and the font used for the tree and unbold it if it's Droid Sans Mono in mobile Firefox. To facilitate that, you could switch from using <pre><b> to using <pre style="font-weight:bold"> to make it simpler to switch off.

Or perhaps it is simplest to accept that Firefox for Android's rendering won't be as nice as on desktop. It's not terrible, I don't think, since users are somewhat accustomed to compromises on mobile browsers.

Hi Yawder, thank you for testing that. So one possibility is that Firefox could do a better job improvising bold from Droid Sans Mono. But I don't know what the timeline would be for that. Another option might be to specify a different monospaced font, but I don't know whether a better monospaced font is available for Android devices. I tried searching that yesterday, but didn't see any authoritative listing. A third possibility might be to replace the regular spaces with non-breaking spaces (&amp;nbsp;) to see whether Firefox "bolds" those better. But this will make it hard for you to edit and bulk up the page. You could add a script to the page that would "sniff" the user's browser and the font used for the tree and unbold it if it's Droid Sans Mono in mobile Firefox. To facilitate that, you could switch from using &lt;pre>&lt;b> to using &lt;pre style="font-weight:bold"> to make it simpler to switch off. Or perhaps it is simplest to accept that Firefox for Android's rendering won't be as nice as on desktop. It's not terrible, I don't think, since users are somewhat accustomed to compromises on mobile browsers.
jscher2000
  • Top 10 Contributor
8695 solutions 71074 answers

Another option might be to use a downloadable font. Google has one you can use here (regular face and bold face): http://typecast.com/preview/google/Inconsolata

I haven't tested it on Android.

Another option might be to use a downloadable font. Google has one you can use here (regular face and bold face): http://typecast.com/preview/google/Inconsolata I haven't tested it on Android.

Question owner

Thanks for your help with alignment problem. Seems Android tablet users will have to put up with faint type when using Firefox for these family trees. Your other suggestions are beyond my web skills! Let's hope Mozilla upgrade browser font for bold, italic one day. Waiting on son to advise how IPad Safari renders the trees.

Regards and thanks again. Derek

Thanks for your help with alignment problem. Seems Android tablet users will have to put up with faint type when using Firefox for these family trees. Your other suggestions are beyond my web skills! Let's hope Mozilla upgrade browser font for bold, italic one day. Waiting on son to advise how IPad Safari renders the trees. Regards and thanks again. Derek

Question owner

Just checked inbuilt browser on this ACER Icons tablet and I have correct alignment. That has surprised me so it's back to Mozilla!. Browser is Chrome

Just checked inbuilt browser on this ACER Icons tablet and I have correct alignment. That has surprised me so it's back to Mozilla!. Browser is Chrome

Question owner

IPad Safari displays pre_formatted text correctly. Firefox browser for tablets needs Droid Sans Mono need updating for bold, italic etc WHEN??

IPad Safari displays pre_formatted text correctly. Firefox browser for tablets needs Droid Sans Mono need updating for bold, italic etc WHEN??
jscher2000
  • Top 10 Contributor
8695 solutions 71074 answers

Helpful Reply

Hi Yawder, do you want to file a bug report on the problem that when Firefox generates the faux bold face for Droid Sans Mono it is doing a bad job compared with other browsers?

You can submit that here: https://bugzilla.mozilla.org/

Hi Yawder, do you want to file a bug report on the problem that when Firefox generates the faux bold face for Droid Sans Mono it is doing a bad job compared with other browsers? You can submit that here: https://bugzilla.mozilla.org/

Question owner

Bug 1062108 raised - patch done by Johnathon Kew. (jfkthname)

How long before this type of patch will appear in Firefox for Android update?

Bug 1062108 raised - patch done by Johnathon Kew. (jfkthname) How long before this type of patch will appear in Firefox for Android update?
jscher2000
  • Top 10 Contributor
8695 solutions 71074 answers

Hi Yawder, usually a patch will go into the Nightly version first, then it becomes a candidate to uplift to the Aurora and Beta versions depending on risk (i.e., interdependence on other changes and effect on other aspects of the program) and time to release. Since Firefox 33 is several weeks away, I think it's possible it could be added in Firefox 33, but I didn't read the bug in detail.

Hi Yawder, usually a patch will go into the Nightly version first, then it becomes a candidate to uplift to the Aurora and Beta versions depending on risk (i.e., interdependence on other changes and effect on other aspects of the program) and time to release. Since Firefox 33 is several weeks away, I think it's possible it could be added in Firefox 33, but I didn't read the bug in detail.