Text problem with Opera "Fit to Width"

[Manoj]

Hi all

I'm noticing a problem with Xara-created websites when viewed in Opera. When I use the "Fit to Width" option, say if I want to scale a widish site to fit my browser without scrolling, some of the text appears to be redrawn into columns, overlapping other parts of the page. I tried some of the sites that people have posted here, and I've seen it on Gary's tutorial page: http://gwpriester.com/mxw1/index.htm and Sledger's Suzuka page:
http://stain.id.au/flash/d1gp/ (not that these sites would be wider than on an 800 X 600 screen, but they illustrate the problem I'm talking about).

I THINK the problem is for text that is directly entered, not placed in a text box, but I'm not sure.

Anyone else notice the same thing? My apologies if this has already been raised.

Best
Manoj

[steve.ledger]

I THINK the problem is for text that is directly entered, not placed in a text box, but I'm not sure.

Yes you are correct, this is the cause (in Opera) of some text becoming vertically placed when viewing while the Fit To Width option is enabled (also occurs when printed from Opera, and during print preview).

You'll also see the same problem at http://steveledger.net/.

Also, Opera's 'Small Screen' setting completely breaks Xtreme created sites.
So sites intended for those devices need to be purpose made (when using Xtreme.)

[covoxer]

This is a problem of the Opera's Fit To Width mode actually. It's clearly stated in the Opera's manual that this mode can render pages wrongly. And it does.
Eventually, it is impossible in theory to create an algorithm like this that would correctly render any acceptable W3C compliant html.
Pages exported by Xtreme are mostly compliant to W3C XHTML 1.0 Transitional standard, which means that any incorrect rendering is due to the poor implementation of the browser engine.
Unfortunately, W3C standards are not strict enough to guarantee correct rendering of the compliant code. Thus, even 100% W3C compliant browser is allowed to render most of the HTML incorrectly.
Things get even worse woth special modes like 'fit to screen' as these modes do not follow even these loose requirements.
Knowing all the quirks of the browser engine one can actually create a html which will render correctly. But it's getting quite complicated if we want such compatibility with many engines especially if we are talking not about creation of a single html but about an algorithm that will convert any possible XAR design into html automatically. So we have to limit either variety of the compatible browser engines (and their modes), or capabilities of the filter.
Currently our goal is to make html correctly rendered in the IE6, IE7, FireFox, Safari and Opera in their default rendering modes (for Opera). In "Fit To Width" mode Opera behaves as a completely different engine, and as I say, it doesn't even comply to standards.

BTW One more interesting thing regarding Opera is that user have an enormous control over the page reformatting. It includes "Author mode" (default, W3C compliant) and 11 different modes which all completely replace CSS of the page (violating standards and making page look anything but the authors intent). So it's perfectly easy to render any complex html incorrect in this browser. Though user is expected to understand what he/she is doing.

[steve.ledger]

That's right - I did intend to point out that it's really an Opera issue rather than an Xtreme generated one.

[BobInce]

The problem is triggered by the wrapper <div>s that are absolutely positioned but with no width property. Although this is a bug in Opera's fit-to-width mode, it might still be worth Xtreme adding a width property to absolutely-positioned wrapper <div>s in general, because this particular combination of properties is historically troublesome. CSS 2.0 treated them differently to 2.1 and some browsers followed the old 2.0 rules or simply broke.

IIRC IE/Mac v5 was the main browser affected, though hopefully almost no-one's still using that.

Also, Opera's 'Small Screen' setting completely breaks Xtreme created sites.

Not really, it displays pretty much as SSR is supposed to. The typical issue with Xtreme-exported sites in SSR mode is that they often have a lot of images that in hand-authored HTML would be background images. Xtreme exports them as normal foreground images which Opera sees as real content and then struggles to fit all on the small page.

Unfortunately for a visual design tool like Xtreme there is no possible way to know whether a graphic represents important content or background fluff; it's just one of the compromises you have to make when going WYSIWYG.

I think it's fair to say visual tools like Xtreme would not be the first choice for designing sites for mobile phones! So it's not a huge issue.

[steve.ledger]

I think it's fair to say visual tools like Xtreme would not be the first choice for designing sites for mobile phones! So it's not a huge issue.

It could be done, but as I suggested, you need to set out with this as your goal.
Many other sites will work fine on 'Small Screen' setting, even TalkGraphics (see screenshot). They are not necessarily *designed* for mobile phones, Opera can just work them for mobile phones.
But sites I have tested which were built using Xtreme, break up badly, links are dead, stuff is all over the place, they are generally unusable.

It's not an issue for me because (strange as it may seem these days) I use my mobile phone to make and receive phone calls.

[Manoj]

But sites I have tested which were built using Xtreme, break up badly, links are dead, stuff is all over the place, they are generally unusable.

You think it's that bad Sledger? I was looking forward to making my new portfolio site in Xara. My html skills are poor at best but I was planning on getting the site vetted by a professional before it goes up.

BTW your site looks great--the Toyota illustration is just mindblowing

Manoj

[covoxer]

Steve,

But sites I have tested which were built using Xtreme, break up
badly, links are dead, stuff is all over the place, they are generally unusable.

Which exactly browser did this? Which mode (fit to screen or full size)? Which device (brand, model)?

From this short description it most likely had no Java Script enabled (dead links while on the rollover containing page). Other issues point that it was either in the 'fit to screen' mode or it was simply a poorly implemented browser.

[steve.ledger]

Steve,
Which exactly browser did this? Which mode (fit to screen or full size)? Which device (brand, model)?

From this short description it most likely had no Java Script enabled (dead links while on the rollover containing page). Other issues point that it was either in the 'fit to screen' mode or it was simply a poorly implemented browser.

John we're talking about the current release of Opera (9.5) while viewing sites using 'Small Screen' setting. My screenshot shows Opera in this mode while logged onto TG.
I am not testing on any mobile phone device, only testing the 'Small Screen' setting of Opera.
BTW: Java script is enabled.

[covoxer]

Oh... I thought you were talking about some small screen devices.

You are right. Scratch those quirk modes please. They are not expected to be supported. They are not even following any standards.

For example, you know why rollover links are dead in this mode? Because objects with absolute coordinates are placed in the wrong place (no wonder), but their properties are NOT adjusted accordingly. Say thanks to Opera, and forget about that mode please.
Hopefully, no one uses small screen mode on the PC, and I suppose that even fit to width is used only in extreme cases.

Now talking back about small screen devices, I wouldn't expect them to work well in fit to width modes, but most of them have a full size mode (desktop mode etc.) which MAY work acceptably.

BTW Before anyone brings an argument of discrimination of some browsers/modes, let's have some statistics. As for today, the usage share of the browsers is as follows (roughly):

IE - ~76%
FF - >15%
Safari - ~6%
Opera - <1%

All others <2%, and this include following small screen device browsers:

Opera Mini - ~0.05% (most popular due to the traffic economy)
Playstation - ~0.03%
PocketIE - ~0.02%
NetFront - ~0.01%

I see no stats for the mobile Opera (8.x), but it's probably included with the total Opera's usage. Anyway, fraction would be not more that OperaMini.

Which all together stands for about 0.1-0.2% share for the small screen device browsers. This is about 5 times less then all the weird, outdated, limited and otherwise not supported browsers for PC (about 1%).
We aim for about 98% of the users. We can't double our developing efforts to add only 0.1% to this score. Right?

PS Since Opera is less that 1% (about 0.7% actually), and fraction of Opera users working in quirk modes is very small, it would be less than 0.01% overall. Consider this.

More detailed statistics can be found here: http://en.wikipedia.org/wiki/Usage_s...f_web_browsers