Nintendo DSi browser

Nintendo DSi is a portable gaming console with two screens. Bottom screen is a resistive touchscreen, the top one isn’t. Console’s UI and touchscreen qualities assume that you use it with a stylus.

It’s pretty underpowered, with a 133 MHz processor and just 16 Mb of RAM. Internet connection is done via WiFi. Console’s browser is based on Opera (not Opera Mini, i. e. it doesn’t proxy its traffic through Opera’s serverside thingy).

There are two ways the browser can display a page. The first is for regular, not mobile-optimized sites. One of the screens is used to display a whole zoomed-out page, the other shows a zoomed-in highlighted area:

You can swap the screen functions and drag the selection rectangle on the bottom screen:

The second mode is for mobile-optimized websites. It uses the top screen as an extension of the bottom one. The page starts on the bottom screen, the top screen starts blank and fills up as you scroll:

As expected, the browser’s support for fancy new features isn’t huge: it supports Media queries, opacity, box-sizing and text-shadow without blur. Modernizr’s box-sizing test returns a false negative result. Turns out, the browser understands the CSS-property, but doesn’t react in any way to the style.boxSizing javascript property (including the Opera-prefixed variant).

Fonts

The browser uses a single font for everything. It’s a sans-serif font, it has a couple of icons in its private use unicode area, which seem to be used somewhere in the console’s UI.

Moreover, the browser only uses three font sizes and transforms any other font size to one of those: small for 0px – 11pxComputedStyle size, medium for 12px – 14px and big for 15px and above.

Despite this font-size transformation, other metrics remain the same, e. g. a paragraph with margin: 0 0 1.5em 0 will have a margin calculated relatively to the specified font-size value, not the resulting one.

The font’s most annoying bug, though, is its weird letter-spacing for cyrillic characters:

Compare the letter-spacing of latin and cyrillic characters

Scrolling

Pages can be scrolled with the D-pad, using dragscroll or with a constantly visible scrollbar. Overflowed blocks also have a constantly visible scrollbar. Dragscroll doesn’t work for them.

Forms

Surprisingly enough, the browser’s support for new input types is reasonable. It supports url, email, datetime, date, month, week, time, datetime-local, number and range:

All the fields are validated according to their types when the form is submitted, pattern validation also works. Datepicker is buggy:

In an attempt to fit into available space, the datepicker becomes a mess

jQuery

jQuery doesn’t work starting from version 1.9.1 and above. No idea why.

Conclusion

It’s totally possible to adapt a simple mobile website for this thingy pretty effortlessly. You just have to use proper fallbacks and consider the font problems. Twitter’s mobile site, for instance, is looking pretty good.