SI26 3DS-Zine

the nerds LOVE the 3DS

Why

This SI fundamentally focuses on web-making as a craft, which is something that clearly emerged in the selected texts of the Reader.

Media archeology is also another big part of it, going back in time to explore forgotten devices and their workings (the plotters and the dot matrix printers)

From these two topics we decided to make something exclusive for one device, against the idea to make websites to accomodate all.

Shortly after we started looking into the Nintendo 3DS, and its unique individual peculiarities.

Specs

On the browser's side there is an official customer support page, though some information is maked loosely (ex. CSS3 some) so it is not completely reliable. In any case, the 3DS and the 3DSXL use the Netfront Browser NX v1.0 based on the WebKit engine.

Upper screen:

• LCD screen
• 5:3
• 400 x 240 pixels (2 layered screens -> 3D effect using MPO)

Bottom screen:

• LCD screen
• 4:3
• 320 x 240 pixels
• resistive touchscreen (pressure sensitive)

☻ 3D Effect

The upper screen has two superimposed LCD screens. When 3D-effect is active, the two screens slightly shift to the left and right respectively, which creates a 3-dimensional effect. 400 x 240 pixels per screen. The 3D view can be adjusted using the depth slider.

☻ Cameras

The 3DS has 3 camera lenses. One inner camera, and two outside camera lenses able to take 3D pictures.

Regular pictures are in the JPG format. 3D pictures are in the MPO (Multi-Picture Object Bitmap file) format.

☻ MPO

An MPO file contains two JPG images. By reading a MPO file with a supporting device, the 2D JPGS create a 3D image.

A device which does not support MPO cannot open and display the 3D image and may only display a JPG image version.

Further info and research on MPOs!!!

First tests

Initially we tried to see what worked and what didn't by browsing a bit (checking if the wiki, the hub, the previous SI website and so on, worked).

Then we made our own pages to test further.

10/02/25

Our first little experiments were mostly about creating websites and seeing how they work on the 3DS. We made a website with text, a website using images and Gifs and one website to load a 3D image (.mpo).

• 
• 
• 
• 
• 
• 
• 

After these first experiments, we decided to start doing Acid Tests. And purposefully document what works and what does not on the Nintendo 3DS and the Kindle. Additionally, we decided to use this research to come up with strategies, to exploit the differences in the different browser capabilities to create webpages for the specific devices' browser.

14/03/25

The 3DS XL is way faster than a regular 3DS!

The h1, h2, [...] hierarchy will always prevail over the font-size we try to define by using /vh/ and /vw/ units. That stops when we use pixels though??

More organized tests

Doriane introduced us to Acid3, a test web page that checks a browser's compatibility with various web standards.

From there we made our own Acid-esque page to check which properties in CSS2 were working in a visual way.

HTML + CSS + JavaScript	3DS Browser	Kindle Browser	Note	Counter Strategy
<audio>	☒	☒
<b>	✓	✓
<blockquote>
<br>	✓	✓
<button>
<code>
<h1> to <h6>	✓	✓
<iframe>
<link>
<object>
<p>	✓	✓
<picture>
<small>
<span>
<svg>	☒	✓
<table>
<title>
.jpg	☒	✓	works on 3DS but loads really slow
.png	☒	✓	works on 3DS but loads really slow
.gif	✓	✓	fastest loading 'image' format & animations work but are slowed	could use high fps -> slowed on 3DS
.mpo	✓	☒	3D image -> opens the image in new tab	we should take fun pictures with the 3DS
background-color:	✓		☹ Gradients do not work ☹	could try gradients that obscure the text on the browser
font-family:	☒	✓	3DS: default font RodinNTLG only Kindle: Embedded font possible	dingbat font (symbols) to 'encrypt' the text
font-style: normal;	☒	✓
font-style: italic;	✓	✓
font-style: oblique;	☒	?
font-weight: normal;	✓	✓
font-weight: bold;	✓	✓
font-size:	✓	✓
margin:	✓		3DS: not super reliable! Sometimes puts extra margins between divs	we could exploit the 'unwanted' margins
text-align: left;	✓	✓
text-align: right;	✓	✓
text-align: center;	✓	✓
text-align: justify;	☒
color:	✓	☒
line-height:	☒? ✓	✓	Only works with px, not vw or vh or em/rem
border:	✓	✓
border-radius:	⍰	✓	for 3DS, works with fixed units, not ratios
-webkit-text-stroke:	☒	✓
text-indent:	✓	✓
text-shadow:	☒	✓	works on kindle but without colors obviously
text-decoration-line: underline;	✓	✓
text-decoration-line: overline;	✓	✓
text-decoration-line: line-through;	✓	✓
text-decoration-line: overline underline;	☒	✓
text-decoration-style: solid;	⍰	✓
text-decoration-style: double;	☒	☒
text-decoration-style: dashed;	☒	☒
text-decoration-style: dotted;	☒	☒
text-decoration-style: wavy;	☒	☒
text-decoration-thickness:	☒	☒
text-transform: uppercase;	✓	✓
text-transform: lowercase;	✓	✓
text-transform: capitalize;	☒	✓
letter-spacing:	✓	✓
word-spacing:	✓	✓
white-space: wrap;	✓	✓
white-space: nowrap;	✓	✓
@media only screen and (max-width: 400px)	✓	?		We can make a page visible only on 3DS using its exact measurements
position: static;	☒
position: relative;	✓
position: fixed;	☒		imma cry.
position: absolute;	✓
position: sticky;	☒

This actually changed when we realised we can use some vanilla javascript....

UNITS

Unit	Laptop	3DS/XL	3DS/XL Comments	Kindle	Kindle Comments
px	✓	✓		✓
vh	✓	☒ (✓)	works for objects and divs, not for text with h1, h2 etc	✓
vw	✓	☒		✓
em
%	✓	☒

Strategies

Since CSS does not break the whole page when something is not supported. From what we learned during our tests we came up with the following strategies:

• empty or custom fonts are not recognized on the 3DS.
• opacity 0% becomes opacity 100% on the 3DS. sidenote: opacity 0-1 works.
• making faster gifs to counter the way the 3DS processes them (it plays them half the speed).
• using imagemagick to compress image sizes and to make graphics that use fonts, since the 3DS does not support the usage of any.

Scope

The question of scope came up multiple times while working on this project, in the end we agreed that we would like to convey mainly curiosity and exploration for now.

We could go deeper, making our own cartridges, going into brewing and emulation are interesting topics, but for now we believe that at this stage, this is not the main point of this project.

We also used a Kindle during our main tests, the reason was that it uses the same browser that the Nintendo 3DS uses, but we will not include it in the scope of the final project, to avoid doubling the work of creating webpages that take into consideration the way the Kindle renders them.

Webzine Concept

Storyline meeting

During our meetings in week(?) and (?), we decide to construct the 3DS webzine like a dungeon escape game through which the reader navigates and explores the 3DS browser properties.

Each dungeon room and pathway showing different aspects of our research and the strategies we came up with through the acid tests and experiments. Including small clues and simple visual puzzles hidden by exploiting the browser's properties. At the same time, the desktop browser version would be designed in a way that makes it virtually impossible to view the zine properly. Hence, creating a 3DS ONLY webzine.

These strategic narrative bits would be for example: MPOs with hidden passwords and maps, goblins that are only click-able on the 3DS, ancient scrolls that are only deciphered by the 3DS font reset, etc.

Webzine Room Structure

Page title	Link	Type	Description	Made by	Assets ✓	Page ✓
Comic	Room 1	Intro	4-panel comic	Tessa	✓	assets in, in need of styling
Spiral	Room 2	Intro	Spiral animation	Tessa	✓	DONE✓
Startscreen	Room 3	Intro	Start screen	Tessa	✓	DONE✓
Entrance	Room 4	Entrance	Door	Charlie	✓	DONE✓
Instruction	Room 4.2	Scroll	Scroll w/ play instruction	Charlie	✓ missing final text	DONE✓
Goblin 1	Room 5	Goblin		Claudio
Corridor 1	Room 6	Corridor		Charlie	✓	DONE✓
Opacity	Room 7	Strategy		Charlie		DONE✓
Password	Room 8	MPO		Charlie
Trapdoor	Room 9	Trap		Eleni	✓	DONE✓
Corridor 2	Room 10	Corridor		Charlie	✓ fixed	DONE✓
Map	Room 11	Strategy		Eleni		DONE✓
Runes	Room 12	MPO		Eleni		DONE✓
Goblin 2	Room 13	Goblin		Claudio
Password	Room 14	Password	typed in pass	Eleni		DONE✓
Font?	Room 15	Strategy	Riddle through text	Charlie + Claudio?		DONE✓
Library	Room 16	Room		Tessa	✓	DONE
Manifesto	Room 17	Text		Tessa + Claudio	✓	DOOOONE
Doorway	Room 18	Strategy		Charlie	breaks too much, doors might need to be compressed
Rune Door	Room 19	Password	rune pass	Eleni		DONE✓
EXIT	Room 20	Credits		Everyone sorta
Death		R.I.P.		Charlie	✓

Special Issue Event

Mock set-up for the special issue event at Page Not Found

Presentation

At the event at Page Not Found, we want to build a pillow fort in which the audience can sit down and look at the 3DS zine.

To set this up, we need:

• Multiple pillows
• Blankets
• 2 to 3 small tables
• Desktop Monitor (to view to 'regular' browser version of the zine)
• Canopy
• Space: 2,5m X 2,5m corner

Preparation/Advertisement

1. Make a "call for devices", to ask people to bring their own 3DS to the event.
2. Make some mock advertisement that is the opposite of today's marketing slogans (f.ex: "works on all devices" web banners).

Post-SI26-Event

Feedback & Observations

• The game seemed much harder to the audience than expected

References

https://pad.xpub.nl/p/3DS_Browser_Investigation

https://www.copetti.org/writings/consoles

https://en.wikipedia.org/wiki/Nintendo_3DS#Internet_browser

https://en.wikipedia.org/wiki/Nintendo_3DS#Hardware

https://en-americas-support.nintendo.com/app/answers/detail/a_id/13802/~/nintendo-3ds-internet-browser-specs

https://en.wikipedia-on-ipfs.org/wiki/Access_(company)

https://pzwiki.wdka.nl/mediadesign/ImageMagick