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: Fri, 27 Dec 2019 00:22:41 +0900 Message-ID: <77EFA561-E2F9-4BFB-831F-F83B6F05964E@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> <227383E4-BF11-4655-AFDD-CBE25D426A85@traduction-libre.org> <29E540AC-0DE4-40A5-AAD6-58FE0178B830@traduction-libre.org> 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="159872"; 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 16:23:19 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 1ikUyt-000fQn-DY for ged-emacs-devel@m.gmane.org; Thu, 26 Dec 2019 16:23:19 +0100 Original-Received: from localhost ([::1]:54380 helo=lists1p.gnu.org) by lists.gnu.org with esmtp (Exim 4.90_1) (envelope-from ) id 1ikUyr-0002ty-Hc for ged-emacs-devel@m.gmane.org; Thu, 26 Dec 2019 10:23:17 -0500 Original-Received: from eggs.gnu.org ([2001:470:142:3::10]:46583) by lists.gnu.org with esmtp (Exim 4.90_1) (envelope-from ) id 1ikUyQ-0002Rd-0n for emacs-devel@gnu.org; Thu, 26 Dec 2019 10:22:51 -0500 Original-Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1ikUyO-0001im-Cc for emacs-devel@gnu.org; Thu, 26 Dec 2019 10:22:49 -0500 Original-Received: from relay9-d.mail.gandi.net ([217.70.183.199]:40603) by eggs.gnu.org with esmtps (TLS1.0:DHE_RSA_AES_256_CBC_SHA1:32) (Exim 4.71) (envelope-from ) id 1ikUyO-0001iP-3c for emacs-devel@gnu.org; Thu, 26 Dec 2019 10:22:48 -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 relay9-d.mail.gandi.net (Postfix) with ESMTPSA id 8D367FF807 for ; Thu, 26 Dec 2019 15:22:45 +0000 (UTC) In-Reply-To: <29E540AC-0DE4-40A5-AAD6-58FE0178B830@traduction-libre.org> 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.199 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:243649 Archived-At: > On Dec 27, 2019, at 0:08, Jean-Christophe Helary = wrote: >=20 >=20 >=20 >> On Dec 26, 2019, at 23:45, Stefan Monnier = wrote: >>=20 >>> 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: >>>=20 >>> = https://www.reddit.com/r/css/comments/eft71n/iphone_safari_does_not_respon= d_to_maxwidth_media/ >>=20 >> I wonder why the HTML needs this and what it really means. >> [ E.g. the name "device-width" makes it sound like it intends to = reflect >> the physical size of the screen, whereas people watch their phone >> screen from a much shorter distance than their desktop screen, so we >> should pay attention to the "apparent size" rather than the physical >> size. ] >=20 > The MDN doc on viewport is here: > = https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag >=20 > The W3C is trying to port that directly to CSS but the spec is only a = draft: > https://drafts.csswg.org/css-device-adapt/#the-viewport >=20 > My understanding is that as you noticed, pixel numbers on mobile are = equivalent or superior to desk/laptops but pixel density is much higher = on mobile, so there is a need to tell the browser not to consider how = many pixels are required to display a given content but on which = viewport is actually is displayed. >=20 > = https://medium.com/@elad/understanding-the-difference-between-css-resoluti= on-and-device-resolution-28acae23da0b >=20 > and >=20 > https://www.quirksmode.org/mobile/viewports2.html >=20 > I still need to wrap my mind around all that but it will make sense = eventually :) I'm going to spend a few days reading all that and = practicing... >=20 >>> 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. >>=20 >> Portrait mode now looks great, indeed, thanks. >>=20 >> In landscape mode, tho, the browser is wide enough that the = top-header >> fits on a single line and hence "sticks around" when you scroll, thus >> eating up a lot of screen real estate (especially since phones = nowadays >> have an appalling aspect ratio, very far from the beloved 4:3). >=20 > Ooops. Ok, I'm working on that... Ok, it should work now, with the extra bonus that if your desktop = browser window is not high enough, the behavior will be the same as = landscape mobile: the menu will stay at the top of the page in = "summarized" mode. @media (max-width: 40em), (max-height: 40em) and (orientation:landscape) = { The ", " stands for "OR". I'm regenerating the whole html set to see how that looks with other = manuals. To reproduce what I did locally: Change the Makefile files for the various manuals to add HTML_OPTS =3D --no-split --html --css-ref=3Demacs.css -c = EXTRA_HEAD=3D"" or HTML_OPTS =3D --html --css-ref=3Demacs.css -c EXTRA_HEAD=3D"" if you want to have a split manual. Generate the doc as usual and put your own "emacs.css" responsive design = css in the package (mine is here: = https://github.com/brandelune/brandelune.github.io/blob/gh-pages/code/emac= s.css) Jean-Christophe Helary ----------------------------------------------- http://mac4translators.blogspot.com @brandelune