This document does not refer to standards / quirks mode rendering. That is covered well enough by Opera's own documentation.
This page describes the various rendering modes that Opera uses, how these are triggered, and what CSS media types apply in each mode.
Note that style declarations not within any specific media group are treated as being in @media all.
View screenshot. This is the normal rendering that Opera uses for (X)HTML, and is similar to the rendering used by other browsers, such as Mozilla/Firefox, Safari/Konqueror and Internet Explorer (assuming the page is not too advanced for IE). Opera's own internal styles are applied to provide defaults, such as margins for paragraphs, larger fonts for headings, bullet points for lists, etc. These can be overriden using stylesheets.
Doctype switches will trigger standards / quirks mode.
CSS media types 'all' and 'screen' are applied.
View screenshot. In this mode, Opera ignores the screen CSS media type, and uses the projection media type instead. The page becomes paged media, meaning it can have page breaks. If CSS applies any page breaks, Page Up and Page Down will jump to the next page break instead of scrolling as normal. This mode is useful for making the most of available screen space, for kiosks, and for presentations.
Doctype switches will trigger standards / quirks mode.
CSS media types 'all' and 'projection' are applied.
View screenshot. This mode is like normal viewing mode, but with MSR, Opera will try its best to avoid a horizontal scrollbar. It will automatically apply a combination of scaling and size and position readjustments, and in extremes, it will also apply forced word-breaks. Essentially, the original style of the page is retained, but it is readjusted to fit smaller screens. This is useful for Televisions, PDAs and low resolution computer monitors.
There are two versions of MSR, standard MSR and Aggressive MSR. Standard MSR prefers to scale page content and will not apply much restructuring. AMSR prefers to restructure page content and will not apply so much scaling. Aggressive MSR doesn't retain the page layout so well at lower resolutions (but the text is easier to read since it does not use so much scaling), and when the window is made very narrow (241 pixels or less), it disables nested table structures.
Opera also makes one important change. If it feels the colour of text does not contrast strongly enough with the background colour, it changes the text colour to either black or white in order to make it contrast more strongly. This is important because of the smaller font sizes that Opera uses in this mode and because during the re-arranging, any background images may no longer be behind the text This does not take background images into account, so pages with a dark background, a light background image and dark text will suffer badly here, as the text will be changed to white, and will become invisible against the light image. This is in fact due to poor page design, as if images are disabled (commonly done for low bandwidth or accessibility), the text would become invisible, even without MSR technology. Still, an unfortunate side effect.
According to my experiments, Opera will consider the contrast to be too low if (using 0-255 decimal colour notation):
( (1/47) x Absolute( textRed - bgRed ) ) + ( (1/24) x Absolute( textGreen - bgGreen ) ) + ( (5/612) x Absolute( textBlue - bgBlue ) ) < 5
Opera then chooses to use white instead of black for the text colour if:
( (255/30997) x bgRed ) + ( (1/223) x bgGreen ) + ( (255/13175) x bgBlue ) < 1
Doctype switches will trigger standards / quirks mode.
CSS media types 'all' and 'screen' are applied.
View screenshot. This mode is used for displaying web pages on Television screens and as far as I can tell is not currently available in the desktop client. TVR is essentially the same as normal viewing mode, but apparently Opera uses the tv CSS media type instead of screen if it is available. If the page contains any CSS specifically targetting tv media, Opera should ignore the screen CSS media type, and use the tv media type instead. Some installs may offer the ability to use MSR with tv media. If tv media is not available, Opera should revert back to screen media (see 'Normal (visual) Rendering' above), and may also offer MSR. TV installs also support many other TV specific technologies (such as DVB-HTML and TV: protocol images). For more details, see their white paper.
Enabling MSR in this mode may be provided as an option.
Doctype switches will probably trigger standards / quirks mode.
As far as I can tell, CSS media types 'all' and 'tv' are applied if available, and 'all' and 'screen' if not.
View screenshot. In this mode, Opera ignores all stylesheets for all media types (with the exception of a few styles as shown below), and applies a special stylesheet of its own. The stylesheet attempts to reformat the page so that it can fit on very small screens. It disables certain HTML features; Small tables are rendered as tables, but with larger tables, table cells are set to display:block;. Embed, applet, object and iframe are all set to display:none;. This rendering mode (and its monochrome predecessor) was an important step for handheld devices (PDAs or smartphones), as it allows them to view real websites, opening virtually the entire existing web to them, without the need for specially constructed WML (or equivalent) pages.
Fonts are scaled but unlike simple (monochrome) SSR, colours are not lost. Page structure is retained. The page is styled with colours taken from the main stylesheet as shown below (normally screen media, but it will use projection media if full-screen mode is also enabled). Small images - but smaller than with simple SSR (typically spacers or corner images) are ignored, and other images are scaled to fit. Typically, the page will use a maximum of 140 pixels width.
In this mode, Opera will respect all CSS selectors that it normally understands, with the exception of :hover and :active, which are ignored. ::before and ::after pseudo elements are not generated. The only page styles that Opera will respect in this mode are:
Opera also makes one important change. If it feels the colour of text does not contrast strongly enough
with the background colour, it changes the text colour to either black or white in order to make it contrast more strongly.
This is important because of the smaller font sizes that Opera uses in this mode.
According to my experiments, Opera will consider the contrast to be too low if (using 0-255 decimal colour notation):
( (1/47) x Absolute( textRed - bgRed ) ) + ( (1/24) x Absolute( textGreen - bgGreen ) ) + ( (5/612) x Absolute( textBlue - bgBlue ) ) < 5
Opera then chooses to use white instead of black for the text colour if:
( (255/30997) x bgRed ) + ( (1/223) x bgGreen ) + ( (255/13175) x bgBlue ) < 1
Assuming the page does not have any handheld media stylesheets:
Doctype switches will trigger standards / quirks mode, and will affect Opera's interpretation of its own stylesheet. However this will only result in minor changes to the layout.
CSS media types 'all' and 'screen' or 'projection' are partially applied, but adapted by Opera's own stylesheet.
View screenshot. In this mode, Opera ignores all stylesheets for all media types (see 'Handheld Media Rendering' for more details). Instead, it applies a special stylesheet of its own. The stylesheet attempts to reformat the page so that it can fit on very small screens. It disables certain HTML features; Table cells are set to display:inline; and embed, applet, object and iframe are all set to display:none;.
Fonts are scaled and all colours are lost, but page structure is retained. The page is styled with a simple greyscale scheme. Small images (typically spacers or corner images) are ignored, and other images are scaled to fit. Typically, the page will use a maximum of 140 pixels width. This rendering mode was an important step for handheld devices (PDAs or smartphones), as it allows them to view real websites, opening virtually the entire existing web to them, without the need for specially constructed WML (or equivalent) pages.
Assuming the page does not have any handheld media stylesheets:
This mode will be used for all handheld or small screen modes if page stylesheets are disabled.
Doctype switches will trigger standards / quirks mode, and will affect Opera's interpretation of its own stylesheet. However this will only result in minor changes to the layout.
No CSS media types are applied.
View screenshot. This mode is essentially the same as normal viewing mode, but Opera uses the handheld CSS media type instead. If the page contains any CSS specifically targetting handheld media (this media type must be at the top level; within the <link> tag itself, or within a @media section of the (all media) stylesheet), Opera will use this mode instead of the other two SSR modes. Note: in all current Opera releases, media="all" will not be enough to trigger this mode. The handheld media type must be explicitly used.
Assuming the page has some handheld media stylesheets:
Doctype switches will trigger standards / quirks mode.
CSS media types 'all' and 'handheld' are applied.
View screenshot. This is the mode Opera uses to print. Largely it ignores all colour related styles and backgrounds, but most structural styles are retained, as well as generated content, and images. Opera 7.6+ will also print borders. Print media is also applied, allowing page breaks and margins to be controlled. Opera 7.6+ also offers the 'Fit To Width' option when printing. The 'Fit To Width' option will apply either MSR or CSSR (depending on the available width - as described above), in order to reformat the page to fit onto the width of one printed page.
You must have a printer (or print driver) installed.
Doctype switches will trigger standards / quirks mode.
CSS media types 'all' and 'print' are applied, but most styles relating to colours and backgrounds are ignored.
View screenshot. This is the mode Opera uses to waste your printer ink. Unlike normal printing mode, all styles are retained, including colours and backgrounds, as well as structural styles, generated content, and images. Print media is also applied, allowing page breaks and margins to be controlled. (Note: page HTML/body backgrounds from screen media are incorrectly applied instead of those specified in print media. Backgrounds for other elements are correctly applied from print media.)
You must have a printer (or print driver) installed.
Doctype switches will trigger standards / quirks mode.
CSS media types 'all' and 'print' are applied.
Updated with details of Opera 8 beta 2 which now supports speech media
View screenshot. Opera uses this mode to speak whatever text is selected. It applies speech media CSS, and will speak whatever the speech media CSS tells it to speak, according to the text selection. (Opera 7.6 preview 1 to 8 beta 1 did not use speech media, and would speak whtever text was selected, according to the current rendering mode.) This mode is useful for interactive voice powered pages such as automated ordering systems, or as a screen reader, especially when coupled with my Spoken Page and Table stylesheets.
This currently only works on Windows 2000 or Windows XP.
Doctype switches will trigger standards / quirks mode, but there are very few changes that will affect voice - only format of id and class attributes and selectors.
CSS media types 'all' and 'speech' are applied. (In 7.6 preview 1 to 8 beta 1, CSS media types for the current rendering mode are applied.)
View screenshot. When Opera renders generic XML, all unknown elements get the default values for all properties. For example, for every unknown element the 'display' property will be set to 'inline', and all font and line-height settings will revert to the default values. All styles must be applied with stylesheets. Opera will apply styles for the the media type of the current rendering mode.
Only standards mode is used.
CSS media types for the current rendering mode are applied.
View screenshot. This is the rendering mode that Opera uses to render WML pages. It uses its own internal stylesheet that lays out the page in an appropriate format. This is combined with any stylesheets provided by the page according to the relevant media types of the current rendering mode. WAP/WML is intended for handheld devices but since it requires that authors make a WML and HTML version of each page, most authors do not bother, and it is technology like SSR that hopefully will provide the answer.
Only standards mode is used.
CSS media types for the current rendering mode are applied, combined with Opera's internal WML stylesheet.
