Opera brings fondleslab-style reading to bog-standard web

App developers: collect your P45s


Oslo Opera has published a few simple CSS extensions that allow developers to create the “reading” experience found on contemporary newspaper, magazine and book tablet apps using web standards.

The extensions enable “page-like” spatial navigation and layout, and the Norwegian company has submitted them to the W3C standards committee, under the name 'CSS Generated Content for Paged Media'.

“Expensive app developers, your time is up,” Opera CTO Håkon Wium Lie told me – although I actually made that up, and asked him repeat it, for my convenience. (And yours.)

Lie is best known as the father of CSS, Cascading Style Sheets, and since 1999 has been Opera’s CTO.

Almost all web pages today are designed to be read vertically in one direction - from top to bottom - and have no sense of their spatial relationship to each other. That's fine when the only navigational aid is a scroll wheel. But the rise of multitouch interfaces, and tablets, has allowed designers to recreate paper magazine layouts, and users now expect to swipe a page to move forward or backwards.

And implementing this, in the absence of a standard, requires a lot of JavaScript code.

The New York Times has implemented something similar using web standards – but it requires masses of JavaScript. The beauty of the Opera-backed Paged Media extensions is the simplicity. There are just 10 new extensions to five attributes.

Technique 1:

html {
overflow:paged-x;
height: 100%;
columns:3;
}

"We want pages laid out on the horizontal axis, three-column view," explains Lie.

Technique 2:

img {
float:top-corner;
column-span:2;
}

"We need to float to the corner, extend the float property and add column-span."

Technique 3:

...
@navigation {
nav-right: link-rel(next);
nav-left: link-rel(previous);
nav-down: url (http://www.example.com);
}

Techniques found in sophisticated and expensive fondleslab apps become simple, bog-standard code. Publishers have spent small fortunes creating native apps for smartphones and tablets in recent years. These generate complex and buggy code that provides little more than a wrapper around some content. The process is duplicated for each native platform. It's all very expensive.

The Paged Media CSS standards are a much simple solution – but they need widespread browser support.

So is the party over for app developers?

Hardly, but if this becomes a standard, developers will have to move into commodity territory, where they’re still amply rewarded, or solve more complex technical challenges for clients, where no open web standards exist.

Or at least, you would think so. ®

Similar topics

Broader topics


Other stories you might like

  • Opera loses Touch with iOS app: Browser maker locks and loads the rebrandogun
    It's just 'Opera on iOS' now

    Opera has pushed out an update for its iOS browser, dropping the "Touch" in Opera Touch to become just plain old Opera on iOS.

    The company is approaching the third anniversary of Touch although it has a longer history of browsing on the move: Mobile editions turned up more than 20 years ago for Psion devices followed by updates for Symbian and eventually a Chromium edition for Android users. iDevice users must make do with the guts of Safari, as per Apple's rules.

    As with the iOS versions of Microsoft's Edge, Google's Chrome, Vivaldi and so on, Opera has attempted to differentiate itself via the bits around the core rendering engine (what the company refers to as "the personal browser experience"). As well as the ad and cookie blocking that has become common among browsers, Opera added its Flow technology to the mobile browser at its 2018 launch to facilitate the sharing of files between desktop and device.

    Continue reading
  • JavaScript-based address bar spoofing vulns patched in Safari, Yandex, Opera
    Are you where you think you are, or are you where I want you to think you are?

    Rapid7 found Apple’s Safari browser, as well as the Opera Mini and Yandex browsers, were vulnerable to JavaScript-based address bar spoofing.

    The infosec outfit, along with its “longtime mobile hacker friend Rafay Baloch,” discovered the software could be tricked into displaying the URL of one website while loading and displaying content from another. Such trickery is useful to, among others, thieves and fraudsters who might want to replace a bank’s online login page with one designed to harvest unwitting users’ login details.

    “Because we have very few ways to actually validate the source of data on our phones, the address bar is pretty much the only bit of screen real estate that developers (angelic and devilish alike) are prohibited from monkeying with,” wrote Rapid7’s Tod Beardsley in a blog post.

    Continue reading

Biting the hand that feeds IT © 1998–2022