Adventures in Tech Land, Season 2
2019/12/27, day 12
In 2017 I started to work on a CSS for the emacs manual. The online and "home made" stykes were different. That sparked a thin thread on emacs-devel. A few days ago I decided to resume work on that part of my emacs activity... And since I have a mobile phone with a quite impressive screen now, I was very happy to try the design there, too. First, I discovered a big discrepency between the way the various browsers "responsive mode" display the files and the way they are actually displayed on the device. After being super proud of my first media query I ended up realizing that nothing was happening on the device...
But as I was looking for a reason or a way to debug that, I could not find anything but endless references to media queries, and however the way I looked at my code I could not find any glitch. I am not scared of searching the internet for answers even if that drives me down a rabbit hole. Eventually, I decided to ask. First I asked the BBEdit user list, where the question was obviously off-topic but with a caveat that I would first appreciate any pointer to places where the question was not off-topic. The second the mail was sent, I thought of reddit, and then I remembered that freecodecamp had started similar forum a short while ago.
reddit quickly gave me a useful answer: reddit: iPhone Safari does not respond to max-width media query ?.
I just needed to add a <meta name="viewport" content="width=device-width, initial-scale=1.0"> line in <head>. That was it.
According to the Mozilla Developper Network's Using the viewport meta tag to control layout on mobile browsers, viewport is a technology created by Apple to support proper display of full web pages on smaller screens that have a higher pixel density than desktop displays.
A decade later, the viewport property is adopted by vendors and designers alike and even if there is a feeble attempt on the CSS front to port that to CSS in the CSS Device Adaptation Module Level 1, the specification has not evolved from draft status since 2016 and neither Safari nor Firefox support it.
I still need to understand what the meaning of the values is, but my most urgent issue was to include that <meta> code into the texinfo HTML output of the emacs lisp reference.
All of the GNU project documentation is based on Texinfo and creating the HTML documentation is just a make html command away.
Default HTML output for the texinfo commands is, as what triggered this whole endeavor in the first place, very plain HTML but also simply not visually attractive, which tends to make it harder to read. To add CSS data is easy enough. It is possible to include style information into the HTML or to add a link to an external file by using either --css- include=file or --css-ref=url. When that is done, to have proper mobile support, the extra viewport information can be included with the configuration option -c to produce the following configuration:
HTML_OPTS = --no-split --html --css-include=emacs.css -c EXTRA_HEAD="<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
Now that the thing was online and properly set for mobile access, I needed to adapt the queries to various settings. I chose 3. One for portrait, one for low height landscape and the default for "normal" landscape:
viewport parameter, and move on to flex and other things...
Oh, and the files are here, if you missed yesterday's write-up: