Why does <pre> formatted text </pre> not display correctly?
Family tree .html file with preformatted text displays correctly in desk top Firefox but not in tablet version. Misalignment occurs.
Выбранное решение
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
Все ответы (14)
Выбранное решение
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
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
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
Need any help or suggestions for formatted text problem
Sorry, didn't tick box below in previous message
Regards Derek
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?
Изменено
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?
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 ( ) 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.
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.
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
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
IPad Safari displays pre_formatted text correctly. Firefox browser for tablets needs Droid Sans Mono need updating for bold, italic etc WHEN??
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/
Bug 1062108 raised - patch done by Johnathon Kew. (jfkthname)
How long before this type of patch will appear in Firefox for Android update?
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.