From mboxrd@z Thu Jan 1 00:00:00 1970 Path: news.gmane.org!.POSTED.blaine.gmane.org!not-for-mail From: Jean-Christophe Helary Newsgroups: gmane.emacs.devel Subject: Re: html manual +css Date: Thu, 26 Dec 2019 23:09:14 +0900 Message-ID: <227383E4-BF11-4655-AFDD-CBE25D426A85@traduction-libre.org> References: <05A866DB-4211-476E-9107-14E5F9BE9232@gmail.com> <53DA475D-B063-470A-BB87-D3FFC9A7CF79@gmail.com> <834lvyct3t.fsf@gnu.org> <01B655FC-51F0-4A33-ADBF-3E1268E9E0EA@gmail.com> <3D282E00-27F3-451A-9895-5BCEEE0B7FA8@gmail.com> Mime-Version: 1.0 (Mac OS X Mail 13.0 \(3608.40.2.2.4\)) Content-Type: text/plain; charset=us-ascii Content-Transfer-Encoding: quoted-printable Injection-Info: blaine.gmane.org; posting-host="blaine.gmane.org:195.159.176.226"; logging-data="140989"; mail-complaints-to="usenet@blaine.gmane.org" To: emacs-devel Original-X-From: emacs-devel-bounces+ged-emacs-devel=m.gmane.org@gnu.org Thu Dec 26 15:10:18 2019 Return-path: Envelope-to: ged-emacs-devel@m.gmane.org Original-Received: from lists.gnu.org ([209.51.188.17]) by blaine.gmane.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_GCM_SHA384:256) (Exim 4.89) (envelope-from ) id 1ikTqE-000aZ7-D3 for ged-emacs-devel@m.gmane.org; Thu, 26 Dec 2019 15:10:18 +0100 Original-Received: from localhost ([::1]:53922 helo=lists1p.gnu.org) by lists.gnu.org with esmtp (Exim 4.90_1) (envelope-from ) id 1ikTqC-00088Q-R8 for ged-emacs-devel@m.gmane.org; Thu, 26 Dec 2019 09:10:16 -0500 Original-Received: from eggs.gnu.org ([2001:470:142:3::10]:58198) by lists.gnu.org with esmtp (Exim 4.90_1) (envelope-from ) id 1ikTpN-0007KG-Dk for emacs-devel@gnu.org; Thu, 26 Dec 2019 09:09:27 -0500 Original-Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1ikTpL-0004S4-DQ for emacs-devel@gnu.org; Thu, 26 Dec 2019 09:09:24 -0500 Original-Received: from relay3-d.mail.gandi.net ([217.70.183.195]:37035) by eggs.gnu.org with esmtps (TLS1.0:DHE_RSA_AES_256_CBC_SHA1:32) (Exim 4.71) (envelope-from ) id 1ikTpL-0004QP-4K for emacs-devel@gnu.org; Thu, 26 Dec 2019 09:09:23 -0500 X-Originating-IP: 182.251.133.105 Original-Received: from [172.20.10.3] (KD182251133105.au-net.ne.jp [182.251.133.105]) (Authenticated sender: jean.christophe.helary@traduction-libre.org) by relay3-d.mail.gandi.net (Postfix) with ESMTPSA id 01DF260003 for ; Thu, 26 Dec 2019 14:09:19 +0000 (UTC) In-Reply-To: X-Mailer: Apple Mail (2.3608.40.2.2.4) X-detected-operating-system: by eggs.gnu.org: GNU/Linux 2.2.x-3.x [generic] [fuzzy] X-Received-From: 217.70.183.195 X-BeenThere: emacs-devel@gnu.org X-Mailman-Version: 2.1.23 Precedence: list List-Id: "Emacs development discussions." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: emacs-devel-bounces+ged-emacs-devel=m.gmane.org@gnu.org Original-Sender: "Emacs-devel" Xref: news.gmane.org gmane.emacs.devel:243646 Archived-At: 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 tag to the that = contains a reference to the "viewport" of the display: = https://www.reddit.com/r/css/comments/eft71n/iphone_safari_does_not_respon= d_to_maxwidth_media/ 2) to add that to the texinfo output I had to tweak the makefile like = this: HTML_OPTS =3D --html --css-ref=3Demacs.css -c EXTRA_HEAD=3D"" 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-Functio= ns.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 = wrote: >=20 >=20 >=20 >> On Dec 26, 2019, at 7:03, Stefan Monnier = wrote: >>=20 >>> Ok, so I have something that works both ways: >>>=20 >>> 1) when the display is wide enough to have the full horizontal menu, = the >>> menu is displayed horizontally and follows the scrolling. >>>=20 >>> 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. >>=20 >> Looks great on my desktop, thanks, >>=20 >>> Would you mind checking if that works as you intended ? >>=20 >> It does. I just now tried to look at the page from a phone and it = looks >> identical, >=20 > 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. >=20 > You can see what I intended to do by reducing the width of your = desktop browser window until you see the modification. >=20 >> 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! >=20 > Indeed. >=20 >> 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. >=20 > :) And that's what I tried to avoid. >=20 >> [ 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! ] >=20 > 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. >=20 >> 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. >=20 > No, it is. Especially when you want to *read* the manual/reference. >=20 > I'll get back to the list with a useable proposal. Sorry for the = noise. >=20 >> Stefan "whose phone's browser has more pixels than his = desktop's" >=20 > 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... >=20 > Jean-Christophe Helary > ----------------------------------------------- > http://mac4translators.blogspot.com @brandelune Jean-Christophe Helary ----------------------------------------------- http://mac4translators.blogspot.com @brandelune