Goodbye HTML. Hello Canvas!
Part 1: Getting real control over your web application
EDIT: This article series is NOT about building the COMMON web page.
EDIT2: In case you have little time, below are 3 links copied from the seventh article of the series.
- complete demo to play (NOT for smartphone)
- GitHub — complete demo
- GitHub — GoodbyeHtml library
I must confess that I find HTML and CSS too much complicated, especially when it comes to the fine-tuning of the elements of the page. There are too many rules, counter-intuitive and colliding with each other. Sometimes we need to use tricks (!) to achieve simple things. The definition of an element may be spread in many places: HTML, CSS (inline, embedded, and external file), and JavaScript. It is very easy to get lost in the cascade system.
And there is the browser & device problem because what works fine for some browsers may behave badly for another browser, and even on the same browser on a different device.
I gave up dealing with HTML and CSS; not because it is complicated (for me). I gave up because it doesn’t work (as it should do).
Browser/Device Idiosyncrasies
Once I became very upset because some text in a table was taking more space than I planned when the page was loaded on an iPhone (although also using Chrome), thus breaking the layout. I revised and changed the CSS and even the HTML many times without results.
You cannot blame the font because I was using a special font (not a browser standard font), so every device should use the same font. I went deeper and served the font myself, using a different name for it (maybe the iPhone had cached a different version). Still not better. I made screenshots and started to analyze the different results, pixel by pixel, and realized that the problem happened with the space between characters of the text. The space was bigger on iPhone. So, I quickly started editing letter-spacing CSS property. Still not better!
Then I understood: one cannot rely on HTML and CSS to really control the presentation of a web page (everywhere). Forget about using sophisticated CSS to design a fancy table: throw an image into the web page!
Font Size Configuration
There is another important reason why you cannot control the presentation of your web page. Even if the world had only one kind of device and one kind of browser, because of the accessibility issue, the browser lets the user choose the minimum font size, overriding your definitions for font size, messing terribly the web page design.
Translation
We can go further, there is another thing that the browser can do, not only to break your design but also to break the application: translation! I had a very bad experience with this. I am not just talking about overwhelming and nonsense texts on buttons. I am talking about Google Chrome showing 12 menu buttons where it should be only 6. None of them working. Let me say again: because the translation feature was active in the user’s browser, Chrome *invented* 6 menu buttons and broke my web app!!!
Maybe this happened because the page elements were created in JavaScript, not in HTML, so the browser wasn’t smart enough to figure it out.
The browser wants to offer translation to its user. Maybe you can fool one browser for some time to not offer translation, but it is not reliable. Browsers are different and change often.
EDIT: I tested again that old (2017) version of the app. Chrome translated the page smoothly. Cheers!
EDIT 2: It seems that folks at React had similar problems in 2017:
Make React resilient to DOM mutations from Google Translate #11538
Zooming
Also, the zoom level changed by the user may break the design.
So, what now?
If you are creating a simple(*) web page, you can go ahead with HTML and CSS, pushing images instead of constructing tables with HTML tags and CSS properties. So, your tables will keep beautiful and OK on any browser, any device, any zoom, any language, and any font size configured by the user. Also, only use old, traditional, universal stuff (beware of the hype).
EDIT: About simple(*): “simple” in this case means a page that is OK with the fluid layout of the browsers. Sorry for delaying explaining.
But, if you are creating some complex application like this drawing tool (only for PCs at the moment), then I recommend you to stop using HTML and CSS and embrace the canvas and JavaScript.
Just to make myself clear, the code (.html file) above has all the HTML and CSS that you need.
Printing Text
Printing text on canvas is straightforward, using its standard function fillText; but the result is visually poor.
var canvas = document.createElement("canvas")
var context = canvas.getContext("2d")
document.body.appendChild(canvas)context.font = "20px arial"
context.fillText("xyz", 50, 50)
Printing text directly on the web page produces a much better result.
document.body.style.fontFamily = "arial"
document.body.style.fontSize = "20px"
document.write("xyz")
The two images above correspond to the true pixels resulting from printing “xyz” with black color over a white background, using font Arial and font size of 20 pixels.
When we print on canvas with its standard function, we have only greyscale pixels.
When we print text directly on the page we have an amazing amount of varied colored pixels; although to the naked eye, the characters look pure black (or dark grey). Also, they look MUCH nicer than the printing in the former way.
We are not getting into this to end up showing ugly characters in our application. And we will not!
Because there is a lot to cover, including real code, this subject must be divided into a few articles:
- how to print nice characters on canvas
- how to create buttons and panels (layers)
- how to create sliders and checkboxes
- how to handle mouse events on your gadgets
- how to handle keyboard events (control of the focus)
We will be creating a browser inside a browser! It is easy, pleasant, and instructive!
This is the the next article of the series.
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.
