emacs-devel
[Top][All Lists]
Advanced
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: html manual +css

From: Jean-Christophe Helary
Subject: Re: html manual +css
Date: Thu, 26 Dec 2019 23:09:14 +0900 
Stefan,

Ok, I've done it :)

1) to have mobile browsers recognize media queries related to the display size 
it is necessary to add a <meta> tag to the <head> that contains a reference to 
the "viewport" of the display:

https://www.reddit.com/r/css/comments/eft71n/iphone_safari_does_not_respond_to_maxwidth_media/

2) to add that to the texinfo output I had to tweak the makefile like this:

HTML_OPTS = --html --css-ref=emacs.css -c EXTRA_HEAD="<meta name=\"viewport\" 
content=\"width=device-width, initial-scale=1.0\">"

3) then I put all that online and now the sample that I presented yesterday 
works perfectly well on a small mobile device, as you wanted.

The modification I added to the CSS for displays that have a maximum width of 
40 ems is visible in the @media part:

https://brandelune.github.io/code/emacs.css

Anyway, here are the links again:

Original:
https://www.gnu.org/software/emacs/manual/html_node/elisp/Visiting-Functions.html

Sample:
https://brandelune.github.io/code/Visiting-Functions.html

It should look tremendously better on small displays now, and I'm sure there is 
ample room for improvements (add different break points to target different 
displays) but that sample should be enough to get the ball rolling, hopefully 
somewhere :)

Let me know what you think.

JC


> On Dec 26, 2019, at 9:08, Jean-Christophe Helary <address@hidden> wrote:
> 
> 
> 
>> On Dec 26, 2019, at 7:03, Stefan Monnier <address@hidden> wrote:
>> 
>>> Ok, so I have something that works both ways:
>>> 
>>> 1) when the display is wide enough to have the full horizontal menu, the
>>> menu is displayed horizontally and follows the scrolling.
>>> 
>>> 2) when the display is not wide enough to have the full horizontal menu, the
>>> menu is displayed on the right side of the screen, as a list of links, with
>>> "icons" before the link names to hint at their use, and the menu sticks to
>>> its original position.
>> 
>> Looks great on my desktop, thanks,
>> 
>>> Would you mind checking if that works as you intended ?
>> 
>> It does.  I just now tried to look at the page from a phone and it looks
>> identical,
> 
> Well that was not intended. The result was good when looking at the page from 
> a "phone" developer mode in Firefox/Safari but on a real phone it was not the 
> intended result.
> 
> You can see what I intended to do by reducing the width of your desktop 
> browser window until you see the modification.
> 
>> which I guess is good (indeed in pixels, my desktop's browser
>> and my phone's browser (when the phone is in portrait position) have
>> about the same number of pixels), but it makes the site difficult to
>> read on my phone (I have to zoom on the various parts to read them ;-)
>> It's definitely no worse than what we currently have on gnu.org, tho!
> 
> Indeed.
> 
>> It's more readable when I put my phone in landscape, but then this first
>> line menu ends up using a large fraction of my screen real estate so
>> I wouldn't want it to always stay on-screen.
> 
> :) And that's what I tried to avoid.
> 
>> [ I guess this is the only part which I could consider a regression
>> compared to what we currently have on gnu.org.  And it's a result of
>> what I asked for (and like) when reading on a desktop.  Oh well!  ]
> 
> But that is something we can achieve. I'm just brushing up the CSS skills 
> that I had 20 years ago and the technology has evolved a huge lot to answer 
> the needs of mobile browsers. Maybe you've heard the term already, it is 
> called "responsive design" and it aims at making a page flow better when the 
> form is constrained by smaller displays.
> 
>> To clarify: it's never occurred to me to look at such docs on my phone,
>> so it's probably not an important use case.
> 
> No, it is. Especially when you want to *read* the manual/reference.
> 
> I'll get back to the list with a useable proposal. Sorry for the noise.
> 
>>       Stefan "whose phone's browser has more pixels than his desktop's"
> 
> Same here. It's my first mobile phone in about 10 years. I'm shocked at how 
> fast things have changed. Although I was just thinking that the maximum 1kb 
> offset of the charset declaration from the beginning of an HTML file is the 
> same amount of useable memory my ZX81 had when I bought it about 40 years 
> ago...
> 
> Jean-Christophe Helary
> -----------------------------------------------
> http://mac4translators.blogspot.com @brandelune

Jean-Christophe Helary
-----------------------------------------------
http://mac4translators.blogspot.com @brandelune
reply via email to
[Prev in Thread] Current Thread [Next in Thread]