Viewport for man.openbsd.org -- readability on phones

classic Classic list List threaded Threaded
53 messages Options
123
xcv
Reply | Threaded
Open this post in threaded view
|

Viewport for man.openbsd.org -- readability on phones

xcv
The "viewport" meta tag significantly improves readability and
usability on my phone when I add it to http://man.openbsd.org pages:

[meta name="viewport" content="width=device-width, initial-scale=1.0"]

It was suggested to me by a Microsoft Edge engineer as a fix for
mobile-unfriendly web sites. It was apparently invented by Apple
however, and is also recommended by Mozilla.

Mozilla and Safari docs:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

My test results:
- Microsoft Edge on Windows 10 Mobile (phone): significant improvement

- Chrome on OpenBSD-current: unaffected
- Firefox on OpenBSD-current: unaffected
- Lynx on OpenBSD-current: unaffected
- Microsoft Edge on Windows 10: unaffected
- Internet Explorer on Windows 10: unaffected

My test site (with before/after html and screenshots):
https://viewports.github.io/

I hope and suspect that this will improve things for other small
screen devices too -- such as Android and iOS phones -- but I am
unable to test that.

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

lists-3
Tue, 15 May 2018 19:47:45 +0200 [hidden email]
> The "viewport" meta tag significantly improves readability and
> usability on my phone when I add it to http://man.openbsd.org pages:

Hi anonymous,

Could you please add it on some public space so I can check in Dillo too?

Kind regards,
Anton Lazarov

> [meta name="viewport" content="width=device-width, initial-scale=1.0"]
>
> It was suggested to me by a Microsoft Edge engineer as a fix for
> mobile-unfriendly web sites. It was apparently invented by Apple
> however, and is also recommended by Mozilla.
>
> Mozilla and Safari docs:
> https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
> https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
>
> My test results:
> - Microsoft Edge on Windows 10 Mobile (phone): significant improvement
>
> - Chrome on OpenBSD-current: unaffected
> - Firefox on OpenBSD-current: unaffected
> - Lynx on OpenBSD-current: unaffected
> - Microsoft Edge on Windows 10: unaffected
> - Internet Explorer on Windows 10: unaffected
>
> My test site (with before/after html and screenshots):
> https://viewports.github.io/
>
> I hope and suspect that this will improve things for other small
> screen devices too -- such as Android and iOS phones -- but I am
> unable to test that.
>

xcv
Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

xcv
> Tue, 15 May 2018 19:47:45 +0200 [hidden email]
> > The "viewport" meta tag significantly improves readability and
> > usability on my phone when I add it to http://man.openbsd.org pages:
>
> Hi anonymous,
>
> Could you please add it on some public space so I can check in Dillo too?
>
> Kind regards,
> Anton Lazarov

Hi Anton,

I actually did both. I forgot to mention it but I did test with Dillo,
and it's OK AFAICT.

The test content is available here:

https://viewports.github.io/
https://github.com/viewports/viewports.github.io

If the first link works you should see a table with rows like this:

afterboot-original | afterboot-viewport | afterboot-original-png | afterboot-viewport-png

The table links to html and screenshots. Are you able to access it?

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

lists-3
Tue, 15 May 2018 20:46:44 +0200 [hidden email]

> > Tue, 15 May 2018 19:47:45 +0200 [hidden email]  
> > > The "viewport" meta tag significantly improves readability and
> > > usability on my phone when I add it to http://man.openbsd.org pages:  
> >
> > Hi anonymous,
> >
> > Could you please add it on some public space so I can check in Dillo too?
> >
> > Kind regards,
> > Anton Lazarov  
>
> Hi Anton,
>
> I actually did both. I forgot to mention it but I did test with Dillo,
> and it's OK AFAICT.
>
> The test content is available here:
>
> https://viewports.github.io/
> https://github.com/viewports/viewports.github.io
>
> If the first link works you should see a table with rows like this:
>
> afterboot-original | afterboot-viewport | afterboot-original-png | afterboot-viewport-png
>
> The table links to html and screenshots. Are you able to access it?
>

Hi anonymous,

I replied before reading the rest of the message.  No visible changes, it
looks the same in Dillo I sometimes use to read a manual page on the web.

Kind regards,
Anton Lazarov

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Ingo Schwarze
In reply to this post by xcv
Hi,

[hidden email] wrote on Tue, May 15, 2018 at 07:47:45PM +0200:

> The "viewport" meta tag significantly improves readability and
> usability on my phone when I add it to http://man.openbsd.org pages:
>
> [meta name="viewport" content="width=device-width, initial-scale=1.0"]

There is no way i will use that.

It is not defined in any standard.

And i'm quite selective even with features defined in standards
because HTML and CSS standards are very badly proliferating.
In general, i stick to HTML 5.2 and CSS 2.1.

> My test results:
> - Microsoft Edge on Windows 10 Mobile (phone): significant improvement

I'm absolutely uninterested in test results.

I stick to (reasonably established) standards, and it's the job
of browsers to implement them.  If a browser failes to implement
a standard that has been in force for a long time, that's a bug
in the browser and not my problem.


But you fail to state what the actual problem is that you are
trying to solve.  You also fail to state whether you have any
idea what the root cause of the unstated problem might be.
For example, is it somehow related to the CSS rule

  html { max-width: 100ex; } ?

I'm not saying it is, i'm merely asking because i have no idea
what your problem is.

Yours,
  Ingo

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Mike Burns
On 2018-05-15 22.51.43 +0200, Ingo Schwarze wrote:
> [hidden email] wrote on Tue, May 15, 2018 at 07:47:45PM +0200:
> > [meta name="viewport" content="width=device-width, initial-scale=1.0"]
>
> It is not defined in any standard.

I have no objection to the rest of your email -- in fact, I agree that
"viewport" should not matter and that the Web page should not need to
change -- but I do want to clarify whether this is in a standard:

https://www.w3.org/TR/html51/document-metadata.html#other-meta

"""
Extensions to the predefined set of metadata names may be registered
in the WHATWG Wiki MetaExtensions page[1].
[ ... ]
Conformance checkers may use the information given on the WHATWG Wiki
MetaExtensions page to establish if a value is allowed or not: values
defined in this specification or marked as "proposed" or "ratified"
must be accepted
"""

[1] https://wiki.whatwg.org/wiki/MetaExtensions

Shows "viewport" with the "Proposal" status, with a link to:

https://drafts.csswg.org/css-device-adapt/#viewport-meta

xcv
Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

xcv
In reply to this post by Ingo Schwarze
"Ingo Schwarze" <[hidden email]> wrote:

> But you fail to state what the actual problem is that you are
> trying to solve.

The pages at http://man.openbsd.org/ don't use the screen real
estate of my phone in a sensible way. All pages are "zoomed out"
by default, causing a frustrating user experience for me, when I
read OpenBSD man pages on the phone.

Please look at the screenshots. Here they are side-by-side:

https://viewports.github.io/man/sidebyside.html

The pictures to the left show the problem I'm trying to solve.
The pictures to the right show the solution I want.

>  You also fail to state whether you have any
> idea what the root cause of the unstated problem might be.
>
> For example, is it somehow related to the CSS rule
>
>   html { max-width: 100ex; } ?
>
> I'm not saying it is, i'm merely asking because i have no idea
> what your problem is.

I don't know the cause of the problem. I'll see if I can find it.

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Solene Rapenne
In reply to this post by xcv

[hidden email] writes:

> The "viewport" meta tag significantly improves readability and
> usability on my phone when I add it to http://man.openbsd.org pages:

See no offence here, I wonder what is the context leading to read man
pages on a phone?

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Marc Espie
On Wed, May 16, 2018 at 12:26:10AM +0200, Solene Rapenne wrote:
>
> [hidden email] writes:
>
> > The "viewport" meta tag significantly improves readability and
> > usability on my phone when I add it to http://man.openbsd.org pages:
>
> See no offence here, I wonder what is the context leading to read man
> pages on a phone?

Happened just monday, got students checking some stuff about some system
functions and showing the documentation to me on their phone during recess.

In that specific case, it was more practical for them than lugging the laptop
outside.

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Base Pr1me
Also great for when you need reading material in the restroom.

On Tue, May 15, 2018 at 4:34 PM, Marc Espie <[hidden email]> wrote:

> On Wed, May 16, 2018 at 12:26:10AM +0200, Solene Rapenne wrote:
> >
> > [hidden email] writes:
> >
> > > The "viewport" meta tag significantly improves readability and
> > > usability on my phone when I add it to http://man.openbsd.org pages:
> >
> > See no offence here, I wonder what is the context leading to read man
> > pages on a phone?
>
> Happened just monday, got students checking some stuff about some system
> functions and showing the documentation to me on their phone during recess.
>
> In that specific case, it was more practical for them than lugging the
> laptop
> outside.
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Ingo Schwarze
In reply to this post by Solene Rapenne
Hi Solene,

Solene Rapenne wrote on Wed, May 16, 2018 at 12:26:10AM +0200:
> [hidden email] writes:

>> The "viewport" meta tag significantly improves readability and
>> usability on my phone when I add it to http://man.openbsd.org pages:

> See no offence here, I wonder what is the context leading to read man
> pages on a phone?

I can see some reasons for that:

 * Kernel freeze on your desktop computer, trying to figure out
   how to get into ddb (or whatever else to do).

 * Sitting next to your boyfriend on the train, who is using his
   laptop on his lap.  The poor guy is obviously struggling and
   apparently doesn't quite know what he is doing.  You quickly
   look it up on your phone to help him out and set him back on
   track.

 * Trying to do sh(1) scripting on your Android phone, which
   fails to have the required manual pages installed, and the
   OpenBSD manuals are easier to read and more precise than the
   Linux ones.

 * Remote support.  Your client calls you on your cell phone
   while you are travelling and starts asking questions that
   require a quick look into the manual for precise answers.

 * ...

 :-)

Salut,
  Ingo

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Marc Espie
In reply to this post by Ingo Schwarze
On Tue, May 15, 2018 at 10:51:43PM +0200, Ingo Schwarze wrote:

> Hi,
>
> [hidden email] wrote on Tue, May 15, 2018 at 07:47:45PM +0200:
>
> > The "viewport" meta tag significantly improves readability and
> > usability on my phone when I add it to http://man.openbsd.org pages:
> >
> > [meta name="viewport" content="width=device-width, initial-scale=1.0"]
>
> There is no way i will use that.
>
> It is not defined in any standard.

As someone pointed it out, it is in a proposal, improves things on several
devices, and is harmless on others.

You quite well know that the web evolves by practice first, and
standardization later.

We are talking about something that's currently already written, will
likely become a standard in some months, and helps using tools.

Why resist ?

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Consus-2
In reply to this post by Solene Rapenne
On 00:26 Wed 16 May, Solene Rapenne wrote:
> See no offence here, I wonder what is the context leading to read man
> pages on a phone?

Because OpenBSD distributes it's documentation in man pages. There is
no standalone documentation site.

xcv
Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

xcv
In reply to this post by Ingo Schwarze
"Ingo Schwarze" <[hidden email]> wrote:
> I'm absolutely uninterested in test results.

I understand that many times the designer of a web site may
have different priorities than I do.

Nevertheless, when a site performs poorly I can only:
- close the tab and open another site
- try to persuade the designer to modify the site
- report the site to the browser vendor, hoping they'll add it
  to the quirks list
- use browser extensions such as Adblock to rewrite the site
- make a wrapper app for the site

Most content on http://www.openbsd.org renders just fine and
some pages even use the particular tag. There is no need for
sites to perform poorly on small screen devices.

> I stick to (reasonably established) standards, and it's the job
> of browsers to implement them.  

In the case of "viewport"; Apple, Mozilla, Google, Microsoft
and Opera all happen to do it the same way. Isn't that a
"reasonably established" web industry standard?

BTW, Safari and Opera on iOS 4.2.1 also support the tag and are
helped by it. Same goes for IE on Windows Phone 8.1.

Furthermore, some "validators" have no issue with the tag:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fviewports.github.io%2Fman%2Fafterboot
https://html5.validator.nu/?doc=https%3A%2F%2Fviewports.github.io%2Fman%2Fafterboot 
https://checker.html5.org/?useragent=Validator.nu%2FLV&acceptlanguage=&doc=https%3A%2F%2Fviewports.github.io%2Fman%2Fafterboot

> ... If a browser failes to implement
> a standard that has been in force for a long time, that's a bug
> in the browser and not my problem

> ... You also fail to state whether you have any
> idea what the root cause of the unstated problem might be.
> For example, is it somehow related to the CSS rule
>
>   html { max-width: 100ex; } ?

I think it boils down to the site being optimized for common
PC screen sizes, causing problems on "phone" devices as they
have much smaller screens. If so, the bug is not in all (?)
mobile browsers but in the website. I'm assuming that W3C,
WHATWG and whatever do not mandate sites to be optimized for
common PC screen sizes only.

If I understand the "viewport" tag correctly, it basically
says that it is OK to let the viewable content fill the screen.

Of course, there are other possible fixes, however the ones I
can think of are far more complex.

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Ingo Schwarze
Hi,

[hidden email] wrote on Thu, May 17, 2018 at 05:04:12PM +0200:

> I think it boils down to the site being optimized
> for common PC screen sizes,

Absolutely not.
Mandoc output is not optimized for any device.

Which elements or rules in the current HTML or CSS code
make you think it is optimized or it discriminates against
any device?

> If I understand the "viewport" tag correctly, it basically
> says that it is OK to let the viewable content fill the screen.

That makes no sense at all.

The size of the viewport depends on the device and on how big the
user made the browser window.  How the browser uses the space that
happens to be available to it is *always* up to the browser, no
matter whether there is a viewport tag or not - except, of course,
if the author requests a specific viewport size with the viewport
tag, which i'm not doing, and which you do not propose either.

Note that mandoc is specifically *not* restricting the browser's
decision on how to use the available space, and it is *not* requiring
a large width or a large viewport size or anything.  So if the
browser sets an unreasonably large viewport size that doesn't match
the actual size of the device, i don't think you can blame that on
mandoc.

Yours,
  Ingo

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Ingo Schwarze
In reply to this post by Marc Espie
Hi Marc,

Marc Espie wrote on Wed, May 16, 2018 at 11:28:31AM +0200:
> On Tue, May 15, 2018 at 10:51:43PM +0200, Ingo Schwarze wrote:
>> [hidden email] wrote on Tue, May 15, 2018 at 07:47:45PM +0200:

>>> The "viewport" meta tag significantly improves readability and
>>> usability on my phone when I add it to http://man.openbsd.org pages:
>>>
>>> [meta name="viewport" content="width=device-width, initial-scale=1.0"]

>> There is no way i will use that.
>> It is not defined in any standard.

> As someone pointed it out, it is in a proposal, improves things on several
> devices, and is harmless on others.
>
> You quite well know that the web evolves by practice first, and
> standardization later.
>
> We are talking about something that's currently already written, will
> likely become a standard in some months, and helps using tools.
>
> Why resist ?

Because web design is full of cruft.

If i would put in every micro-optimization tweak that somebody
suggests for making something better in some situation, we would
soon end up with HTML code and a style sheet that are large and
unreadable.

For example, just last week, somebody requested that i change
  "font-family: monospace;"
to
  "font-family: monospace, monospace;"
for exactly the same reasons you are putting forward:  It (arguably)
looks better in some situations, it is (arguably) harmless in some
other situations, it is widespread practice in the industry, and
it is interpreted in similar ways by several popular browsers.

No.  The only way to stay sane is to restrict ourselves to elements
and rules that are really required.  Our HTML and CSS should only
contain elements and rules with respect to topics that we do want
to say something about.

I do *not* want to restrict what the browser does with the viewport,
so there is no reason to write code for fiddling with the browser's
viewport settings.

Yours,
  Ingo

xcv
Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

xcv
In reply to this post by Ingo Schwarze
"Ingo Schwarze" <[hidden email]> wrote:
> Absolutely not.
> Mandoc output is not optimized for any device.
>
> Which elements or rules in the current HTML or CSS code
> make you think it is optimized or it discriminates against
> any device?

I don't know which element or rule is the problem, however
if I delete mandoc.css the text does fill the screen.

I understand that what I am trying to do is not supported,
so I'll do something else instead.

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Aner Perez
On 05/17/2018 05:22 PM, [hidden email] wrote:

> "Ingo Schwarze" <[hidden email]> wrote:
>> Absolutely not.
>> Mandoc output is not optimized for any device.
>>
>> Which elements or rules in the current HTML or CSS code
>> make you think it is optimized or it discriminates against
>> any device?
>
> I don't know which element or rule is the problem, however
> if I delete mandoc.css the text does fill the screen.
>
> I understand that what I am trying to do is not supported,
> so I'll do something else instead.
>

First non-comment line of mandoc.css says:

html { max-width: 100ex; }

Removing this line allows the use of the full browser width.  I'm sure that it was put
there for a reason (maybe to approximate the width of a terminal?).

        - Aner

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Jack Burton
On Thu, 17 May 2018 18:32:44 -0400
Aner Perez <[hidden email]> wrote:
> First non-comment line of mandoc.css says:
>
> html { max-width: 100ex; }
>
> Removing this line allows the use of the full browser width.  I'm
> sure that it was put there for a reason (maybe to approximate the
> width of a terminal?).

Some browsers simply don't calculate lengths expressed in exes correctly
-- seen that in many other contexts. Last time I checked (about 3 years
ago, so it might well have changed since), two of the four most common
browsers still exhibited that fault.

As a quick experiment, try looking up the metrics of the font your
browser actually uses to render man pages, then convert 100ex into ems
for your font and put the result in the max-width attribute in your
local copy of mandoc.css.

If that fixes your width issue then you'll have clear evidence that the
bug lies in the browser (specifically in its routine for converting
exes to whatever its native display length unit is).

Reply | Threaded
Open this post in threaded view
|

Re: Viewport for man.openbsd.org -- readability on phones

Ingo Schwarze
In reply to this post by Aner Perez
Hi Aner,

Aner Perez wrote on Thu, May 17, 2018 at 06:32:44PM -0400:
> On 05/17/2018 05:22 PM, [hidden email] wrote:
>> "Ingo Schwarze" <[hidden email]> wrote:

>>> Absolutely not.
>>> Mandoc output is not optimized for any device.
>>>
>>> Which elements or rules in the current HTML or CSS code
>>> make you think it is optimized or it discriminates against
>>> any device?

>> I don't know which element or rule is the problem, however
>> if I delete mandoc.css the text does fill the screen.
>>
>> I understand that what I am trying to do is not supported,
>> so I'll do something else instead.

> First non-comment line of mandoc.css says:
>
> html { max-width: 100ex; }
>
> Removing this line allows the use of the full browser width.

That is a very useful bit of information.
Thanks for investigating and reporting it.

For testing purposes, i removed that line from
  https://man.openbsd.org/mandoc.css

xcv@, could you check with your phone whether this solves
your original issue?

> I'm sure that it was put there for a reason
> (maybe to approximate the width of a terminal?).

Correct.  The original reason was that for -T ascii and -T utf8
output, the default is -O width=78.  The reason for that is that
it's conventional wisom in typography that readability of text
suffers with excessive column width - even though some recent
research raises doubts whether that is really true.  Either way,
people tend to feel strongly about it.

I must say i never particularly liked that line in the CSS file.
It always felt like fiddling with details that it might be better
not to touch, given that display devices running browsers differ
more than terminal emulators.  And here we are with a suspicion
that it actually causes accessibility issues, even if the suspicion
is still unconfirmed...

Depending on the feedback i get here with respect to how
  https://man.openbsd.org/
now looks, i shall consider deleting the offending line for good.

In general, i like the idea of making things better by *removing*
harmful tweaks rather than adding new goo...

Yours,
  Ingo

123