HTML5 Canvas vs Raphaël, what should I use?

During October last year, I had the opportunity to test out and experiment with a lot of HTML5 Canvas stuff. I were to design a super simple play/pause button for a voicemail player that had to work in as many browsers as possible, including mobile browsers. I was kind of new to the entire Canvas element, having never done anything with it before, so this was a great learning experience, and also a lot of fun! Here is a quick summary of the comparison between the native HTML Canvas object, and the javascript lib Raphaël.

See the code at jsFiddle

<canvas>

Advantages: No extra lib needed, PNG exports possible, wider version support in desktop FF, Chrome and Opera, and wider version support in native Android Browser.

Disadvantages: Isn’t supported in IE8, more complex than Raphaël.

Desktop support: Firefox 2.0+, Safari 3.1+, Chrome 4.0+, Opera 9.0+ and Internet Explorer 9.0+

Mobile support: iOS Safari 3.2+ (iPad, iPhone 3G, and up), Android Browser 2.1+ (Éclair and up), Chrome 18.0+, Firefox 15.0+, Blackberry Browser 7.0+, Opera Mobile 10.0+

Raphaël

Advantages: Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach javascript event handlers or modify them later.

Disadvantages: The lib is quite big (89 Kb, 31 Kb if Gzipped), no native Android Browser support for SVG in versions 2.1 (Éclair) to 2.3 (Gingerbread) – (needs a shim)

Desktop support: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Mobile support: iOS Safari 3.2+ (iPad, iPhone 3G and up), Android Browser 3.0+ (Honeycomb and up), Chrome 18.0+, Firefox 15.0+, Blackberry Browser 7.0+, Opera Mobile 10.0+

Sweden decides not to sign the ITRs!

Good news! Sweden has decided not to sign the ITRs (International Telecommunication Regulations) I’ve spoken about earlier. This would mean, at least to some extent, that the massive response to Google‘s and Fight for the Future‘s campaigns worked!

Today, I received an e-mail from Per G Andersson at the swedish Ministry of Enterprise, Energy and Communications, stating the following:

Swedish:

Internationella teleunionens konferens WCIT-12 i Dubai, Förenade Arabemiraten, avslutades fredagen den 14 december 2012. Sverige har beslutat att inte skriva på konferensens slutakter. Det innebär att Sverige inte godkänner det omförhandlade Internationella Telereglementet (ITR). It- och energiminister Anna-Karin Hatts kommentar till det ställningstagandet finns här:

http://www.regeringen.se/sb/d/16659/a/205960

Bl.a. USA, Kanada, Japan och övriga EU-medlemsstater har beslutat att inte skriva på slutakterna vid konferensen. En översikt över de stater som skrivit på respektive inte skrivit på slutakterna finns här:

http://www.itu.int/osg/wcit-12/highlights/signatories.html

Vänliga hälsningar

Per G Andersson
Departementssekreterare
IT-politik
Näringsdepartementet

English:

The International Telecommunications Union’s conference WCIT-12 in Dubai, United Arab Emirates, ended on friday the 14th of December 2012. Sweden has decided to not sign the conference’s final acts. This means that Sweden does not approve the renegotiated International Telecommunication Regulations (ITR). Deputy Director Anna-Karin Hatt of the Division of IT Policies has released the following statement:

http://www.regeringen.se/sb/d/16659/a/205960

Among others, USA, Canada, Japan and other EU member states has also decided not to sign the final acts at the conference. An overview of the countries who has and hasn’t signed the final acts is available at:

http://www.itu.int/osg/wcit-12/highlights/signatories.html

Sincerely,

Per G Andersson
Desk Officer
Division of IT Policies
Ministry of Enterprise, Energy and Communications

Further reading (in Swedish) is available at http://www.regeringen.se/sb/d/16659/a/205960.

”A free and open world depends on a free and open Internet. Governments alone, working behind closed doors, should not direct its future. The billions of people around the globe who use the Internet should have a voice.”

To quote Vint Cerf, VP and Chief Internet Evangelist, from the Google Blog:

At the conclusion of the ITU meeting in Dubai on Friday, 89 countries signed the treaty, while 55 countries said they would not sign or that additional review was needed. We stand with the countries who refused to sign, and with the millions of you who have voiced your support for a free and open web.

Keep signing and show the world that the Internet belongs to us, the users!

Thoughts about ITU, and Swedens position in the question

It seems like new attacks keep happening several times per year against our beloved Internet. Last year was all about SOPA, and PIPA (which combined led to the Wikipedia Blackout), and ACTA, defined below.

SOPA – Stop Online Piracy Act

”To promote prosperity, creativity, entrepreneurship, and innovation by combating the theft of U.S. property, and for other purposes.” —H.R. 3261

PIPA – PROTECT IP Act

”Preventing Real Online Threats to Economic Creativity and Theft of Intellectual Property Act of 2011” —Senate Bill 968

ACTA – Anti-Counterfeiting Trade Agreement

”A multinational treaty for the purpose of establishing international standards for intellectual property rights enforcement.” 

The lesser known threats we’ve seen so far is, among others, the Combating Online Infringement and Counterfeits Act (COICA), and the Commercial Felony Streaming Act (Bill S.978). As of today, we might be facing the largest threat so far, which by the looks of it is far worse than all these previous acts.

ITU – International Telecommunication Union

At the upcoming WCIT in Dubai (World Conference on International Telecommunications, organized by a government-controlled UN agency called the International Telecommunication Union), governments will consider proposals to update the ITU’s underlying treaty. Some proposals would expand the ITU’s mandate in ways that could threaten Internet openness and innovation, increase access costs, and erode human rights online.

The internet is powerful tool for communication, driving economic development, and expanding human rights. Discussions about the future of the internet should involve as many stakeholders as possible including government officials, technology experts, businesses leaders, civil society, and human rights organizations.

If some proposals at WCIT are approved, decisions about the internet would be made by a top-down, old-school government-centric agency behind closed doors. Some proposals allow for access to be cut off more easily, threaten privacy, legitimize monitoring and blocking online traffic. Others seek to impose new fees for accessing content, not to mention slowing down connection speeds. If the delicate balance of the internet is upset, it could have grave consequences for businesses and human rights.

This must be stopped.

Only governments get a vote at WCIT, so we need people from all around the world to demand that our leaders keep the internet open.

Sweden has taken a stand against this, with the deputy director of the Division of IT Policies Lena Hägglöf reassuring us with a mass e-mail today (for the concerned people who’ve e-mailed her and asked them to take a stand against the ITU changes).

Swedish:

Hej!

Tack för ditt meddelande. Regeringskansliet har fått en stark respons på frågan om hur internet ska styras, vilket återigen visar hur angelägen frågan är. Sverige anser att den nuvarande multistakeholder-modellen inte ska förändras och har ingen avsikt att verka för att internets förvaltning ska föras in under FN eller ITU. Alla bestämmelser i internationella avtal om telekommunikation som Sverige ingår ska vara förenliga med de mänskliga rättigheterna, och då särskilt yttrande- och informationsfrihet.

Se gärna it-minister Anna-Karin Hatts tal från Södertörns Högskola där hon utvecklar sina åsikter om den här frågan (och några andra frågor):
http://annakarinhatt.se/blogg/om-ett-oppet-internet-pa-sodertorns-hogskola/

Hälsningar

Lena Hägglöf
Departementsråd
Enheten för IT-politik
Näringsdepartementet

English:

Hi!

Thank you for your message. The Government Offices has received a strong response to the question of how the Internet should be governed, which yet again shows how important this issue is. Sweden reckon that the current multi-stakeholder model not should be changed, and has no intention to work for the Internets management to be brought under the UN or ITU. All regulations in international agreements regarding telecommunications that Sweden is a part of shall be consistent with human rights, especially regarding the freedom of expression and of information.

Please see Minister for Information Technology and Energy Anna-Karin Hatt’s speech from Södertörns Högskola, where she elaborates her views on this issue (and some other issues):
http://annakarinhatt.se/blogg/om-ett-oppet-internet-pa-sodertorns-hogskola/

Sincerely,

Lena Hägglöf
Deputy Director
Division of IT Policies
Ministry of Enterprise, Energy and Communications

The Swedish Ministry of Enterprise, Energy and Communications have even published a report, called ”ICT for Everyone – A Digital Agenda for Sweden”, promoting the open usage of information and communication technologies (ICT) to our benefit.

Google Asks People to Speak Out Against ITU’s Attempt to Take Over Internet Governance

“A free and open world depends on a free and open Internet. Governments alone, working behind closed doors, should not direct its future. The billions of people around the globe who use the Internet should have a voice.”

http://www.google.com/intl/en/takeaction/

This is happening as we speak! The conference is taking place in Dubai between the 3rd and 14th of December, 2012. I urge you to sign every petition you can find, starting with Google‘s and Fight for the Future‘s. Tell your governments you don’t accept this — together we can stop it!

SOPA and PIPA might be postponed, but there’s still a bad guy in the game

Now that Fight for the Future has announced victory in the fight against SOPA and PIPA – which turned out to be the largest online protest in history, with over 75 000 sites blacking out – people are celebrating. But there’s still a less known bill that has to get our attention, and quite fast too.

ACTA is a threat to fundamental rights and access to knowledge!

The Anti-Counterfeiting Trade Agreement (ACTA) is a proposed plurilateral agreement for the purpose of establishing international standards on intellectual property rights enforcement. It would establish an international legal framework for countries to join voluntarily, and would create a governing body outside international institutions such as the World Trade Organization (WTO), the World Intellectual Property Organization (WIPO) or the United Nations. Negotiating countries have described it as a response ”to the increase in global trade of counterfeit goods and pirated copyright protected works.” The scope of ACTA includes counterfeit goods, generic medicines and copyright infringement on the Internet. Groups such as the Electronic Frontier Foundation (EFF) oppose ACTA, stating that civil society groups and developing countries were excluded from discussion during ACTA’s development in an example of policy laundering.

Source: http://en.wikipedia.org/wiki/Anti-Counterfeiting_Trade_Agreement

This Anti-Counterfeiting Trade Agreement, negotiated in secret, would:

• turn Internet operators into a private copyright police.
• impose harsh and unfair penalties on users and consumers.
• harm access to medicines and to essential knowledge in poor countries.
• inhibit innovation.
• establish new anti-democratic policy-making that bypass parliaments.

Let’s stop ACTA!

Revamp project: Font sizes in mobile Safari

Today I found this odd little bugger in mobile Safari. I was writing the mobile-specific CSS sheet for the website I’m revamping, and it was all going smooth until I stumbled upon this annoying little <p> tag. The problem? I had specified the font size and properties for this little paragraph tag earlier in my document, which looked like this:

#my-short-paragraph { 
	font: bold italic 16px Georgia, serif; 
	text-align: left; 
	color: #3a8ede; 
	cursor: pointer; 
	margin: 25px 0 30px 10px; 
	-webkit-transition: color 0.2s ease-in; 
	-moz-transition: color 0.2s ease-in; 
	-o-transition: color 0.2s ease-in; 
	transition: color 0.2s ease-in; 
}

Nothing tricky going on here, right? A bold, italic Georgia font at 16px, with a blue color. Simple as that. But when I wrote the following CSS to make the layout for mobile browsers, I noticed that the font size did not change at all in mobile Safari. Not in iOS 4.0.2, not in iOS 4.1, nor in iOS 4.2.

@media screen and (max-device-width: 480px) {
	#my-short-paragraph { 
		font: bold italic 10px Georgia, serif !important;
	}
}

I’m getting very used to adding !important rules while writing for mobile, since you kind of have to override the ”normal” style rules, but this didn’t matter. I tried lots of different variations, like font-size: 10px !important;, font: 10px Georgia, serif !important; and font-size: small;, but neither worked. It didn’t even work when I tried it this way:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	#my-short-paragraph { 
		font: bold italic 10px Georgia, serif !important;
		font-size: 10px !important;
	}
}

At last, I was starting to get a bit frustrated, and cursed this paragraph’s font size sorcery. Then I thought, ”Let’s try declaring it with two different methods, then maybe Safari will take the hint and make the font smaller!”, and this is what I finally came up with:

@media screen and (max-device-width: 480px) {
	#my-short-paragraph { 
		font: bold italic 10px Georgia, serif;
		font-size: small;
	}
}

It worked! It baffled me, but it worked! I didn’t need the !important rule any longer, but I had to declare the font size twice with two different methods – one time with px and one time with small. If I removed either declaration it wouldn’t work, regardless of any !important rules.

This problem might be very specific, but it was weird enough for me wanting to post it. I don’t know why this problem occurred, but here’s the solution either way.