| Message ID | 20161001012824.89772-1-josh@itanimul.li |
|---|---|
| State | Changes Requested |
| Headers | show |
On 01/10/2016 02:28, Josh de Kock wrote: > Full width text is really difficult to read, this just makes it > slightly more legible on larger (widescreen) screens. > > Signed-off-by: Josh de Kock <josh@itanimul.li> > --- > See http://screenshotcomparison.com/comparison/186256 for a comparison of before/after. > > doc/t2h.init | 2 +- > doc/t2h.pm | 2 +- > 2 files changed, 2 insertions(+), 2 deletions(-) > > diff --git a/doc/t2h.init b/doc/t2h.init > index c41be2e..994e276 100644 > --- a/doc/t2h.init > +++ b/doc/t2h.init > @@ -22,7 +22,7 @@ EOT > my $TEMPLATE_HEADER2 = $ENV{"FFMPEG_HEADER2"} || <<EOT; > </head> > <body> > - <div style="width: 95%; margin: auto"> > + <div style="width: 95%; max-width: 960px; margin: auto"> > EOT > > my $TEMPLATE_FOOTER = $ENV{"FFMPEG_FOOTER"} || <<EOT; > diff --git a/doc/t2h.pm b/doc/t2h.pm > index 5efb2da..a3b7c6b 100644 > --- a/doc/t2h.pm > +++ b/doc/t2h.pm > @@ -174,7 +174,7 @@ EOT > <link rel="stylesheet" type="text/css" href="style.min.css"> > </head> > <body> > - <div style="width: 95%; margin: auto"> > + <div style="width: 95%; max-width: 960px; margin: auto"> > <h1> > EOT > > Also note that I'm not sure how the website itself would look with these changes, how would I be able to view the changes to the ffmpeg.org website? (Would there be any, how is the ffmpeg.org/developer.html generated?) -- Josh
On Fri, Sep 30, 2016 at 6:28 PM Josh de Kock <josh@itanimul.li> wrote: > Full width text is really difficult to read, this just makes it > slightly more legible on larger (widescreen) screens. > > Signed-off-by: Josh de Kock <josh@itanimul.li> > --- > See http://screenshotcomparison.com/comparison/186256 for a comparison of > before/after. > > doc/t2h.init | 2 +- > doc/t2h.pm | 2 +- > 2 files changed, 2 insertions(+), 2 deletions(-) > > diff --git a/doc/t2h.init b/doc/t2h.init > index c41be2e..994e276 100644 > --- a/doc/t2h.init > +++ b/doc/t2h.init > @@ -22,7 +22,7 @@ EOT > my $TEMPLATE_HEADER2 = $ENV{"FFMPEG_HEADER2"} || <<EOT; > </head> > <body> > - <div style="width: 95%; margin: auto"> > + <div style="width: 95%; max-width: 960px; margin: auto"> > EOT > > my $TEMPLATE_FOOTER = $ENV{"FFMPEG_FOOTER"} || <<EOT; > diff --git a/doc/t2h.pm b/doc/t2h.pm > index 5efb2da..a3b7c6b 100644 > --- a/doc/t2h.pm > +++ b/doc/t2h.pm > @@ -174,7 +174,7 @@ EOT > <link rel="stylesheet" type="text/css" href="style.min.css"> > </head> > <body> > - <div style="width: 95%; margin: auto"> > + <div style="width: 95%; max-width: 960px; margin: auto"> > <h1> > EOT > Perhaps, using the Bootstrap "container" class would be better as it provides responsive equivalents for other screen sizes. Timothy
Le decadi 10 vendémiaire, an CCXXV, Josh de Kock a écrit : > Full width text is really difficult to read, this just makes it > slightly more legible on larger (widescreen) screens. > > Signed-off-by: Josh de Kock <josh@itanimul.li> > --- > See http://screenshotcomparison.com/comparison/186256 for a comparison of before/after. > > doc/t2h.init | 2 +- > doc/t2h.pm | 2 +- > 2 files changed, 2 insertions(+), 2 deletions(-) > > diff --git a/doc/t2h.init b/doc/t2h.init > index c41be2e..994e276 100644 > --- a/doc/t2h.init > +++ b/doc/t2h.init > @@ -22,7 +22,7 @@ EOT > my $TEMPLATE_HEADER2 = $ENV{"FFMPEG_HEADER2"} || <<EOT; > </head> > <body> > - <div style="width: 95%; margin: auto"> > + <div style="width: 95%; max-width: 960px; margin: auto"> > EOT > > my $TEMPLATE_FOOTER = $ENV{"FFMPEG_FOOTER"} || <<EOT; > diff --git a/doc/t2h.pm b/doc/t2h.pm > index 5efb2da..a3b7c6b 100644 > --- a/doc/t2h.pm > +++ b/doc/t2h.pm > @@ -174,7 +174,7 @@ EOT > <link rel="stylesheet" type="text/css" href="style.min.css"> > </head> > <body> > - <div style="width: 95%; margin: auto"> > + <div style="width: 95%; max-width: 960px; margin: auto"> > <h1> Text-related dimensions given in pixels seem bogus. Ems would be the correct unit for this kind of case. Regards,
On 02/10/2016 08:24, Nicolas George wrote: > Le decadi 10 vendémiaire, an CCXXV, Josh de Kock a écrit : >> Full width text is really difficult to read, this just makes it >> slightly more legible on larger (widescreen) screens. >> >> Signed-off-by: Josh de Kock <josh@itanimul.li> >> --- >> See http://screenshotcomparison.com/comparison/186256 for a comparison of before/after. >> >> doc/t2h.init | 2 +- >> doc/t2h.pm | 2 +- >> 2 files changed, 2 insertions(+), 2 deletions(-) >> >> diff --git a/doc/t2h.init b/doc/t2h.init >> index c41be2e..994e276 100644 >> --- a/doc/t2h.init >> +++ b/doc/t2h.init >> @@ -22,7 +22,7 @@ EOT >> my $TEMPLATE_HEADER2 = $ENV{"FFMPEG_HEADER2"} || <<EOT; >> </head> >> <body> >> - <div style="width: 95%; margin: auto"> >> + <div style="width: 95%; max-width: 960px; margin: auto"> >> EOT >> >> my $TEMPLATE_FOOTER = $ENV{"FFMPEG_FOOTER"} || <<EOT; >> diff --git a/doc/t2h.pm b/doc/t2h.pm >> index 5efb2da..a3b7c6b 100644 >> --- a/doc/t2h.pm >> +++ b/doc/t2h.pm >> @@ -174,7 +174,7 @@ EOT >> <link rel="stylesheet" type="text/css" href="style.min.css"> >> </head> >> <body> >> - <div style="width: 95%; margin: auto"> >> + <div style="width: 95%; max-width: 960px; margin: auto"> >> <h1> > > Text-related dimensions given in pixels seem bogus. Ems would be the correct > unit for this kind of case. > > Regards, > Using max-width: 960px is common practice, and since pixels are generally not 1:1 but scaled with regards to DPI, rather than text-size it results in a more constant layout across environments. Timothy's suggestion probably makes sense, I just haven't had time to update the patch.
Le primidi 11 vendémiaire, an CCXXV, Josh de Kock a écrit : > Using max-width: 960px is common practice, Yet still bad practice. > and since pixels are generally > not 1:1 but scaled with regards to DPI, rather than text-size it results in > a more constant layout across environments. Indeed: most web designers are idiots, they used pixels all over the place, forcing browsers authors to step in and work around their bad design. As a consequence, the few web designers who are not idiots and have a good reason to use pixels at some place have a hard time. And it does not address the problem of user-mandated font sizes. CSS did include from the start a mechanism to make design independent from the resolution and font size: expressing length in ems. It still works, still better than the workaround. Since you are not an idiot, you will use it. Regards,
On 02/10/2016 13:52, Nicolas George wrote: > Le primidi 11 vendémiaire, an CCXXV, Josh de Kock a écrit : >> Using max-width: 960px is common practice, > > Yet still bad practice. Not really. > >> and since pixels are generally >> not 1:1 but scaled with regards to DPI, rather than text-size it results in >> a more constant layout across environments. > > Indeed: most web designers are idiots, they used pixels all over the place, Using such a sweeping negative statement is not a good way to proceed. > forcing browsers authors to step in and work around their bad design.As a > consequence, the few web designers who are not idiots and have a good reason > to use pixels at some place have a hard time. > And it does not address the problem of user-mandated font sizes. > > CSS did include from the start a mechanism to make design independent from > the resolution and font size: expressing length in ems. It still works, > still better than the workaround. The containers should not change size depending on the font size. It results in really ugly, fairly undefined behavior. I made an example to illustrate this: https://codepen.io/anon/pen/ozGqEj > Since you are not an idiot, you will use it. I don't appreciate what this implies. May I direct you to: https://www.ffmpeg.org/developer.html#Code-of-conduct
Le primidi 11 vendémiaire, an CCXXV, Josh de Kock a écrit : > Not really. Absolutely. > The containers should not change size depending on the font size. The issue at hand is not about "containers" or whatever, it is about the max-width property, in order, quoting yourself, to make things "more legible on larger (widescreen) screens". The problem with long lines and readability is that the eye loses alignment when scanning the text, especially when going from the end of a ling to the beginning of the next. This is caused by the length of the line in terms of words and characters, not by its number of pixels nor its size in physical units. Can you tell how many characters fit in 960 pixels? Definitely not, since it depends on users settings that you have no control over. Therefore, using pixels for max-width is wrong. Furthermore, designs that do not respect these user settings or misbehave when they have a non-default value are incorrect. > It results > in really ugly, fairly undefined behavior. I made an example to illustrate > this: https://codepen.io/anon/pen/ozGqEj Relying on WYSIWYG tools for web design usually result in bogus stylesheets that look nice on your particular settings and misbehave badly with unusual settings. Regards,
diff --git a/doc/t2h.init b/doc/t2h.init index c41be2e..994e276 100644 --- a/doc/t2h.init +++ b/doc/t2h.init @@ -22,7 +22,7 @@ EOT my $TEMPLATE_HEADER2 = $ENV{"FFMPEG_HEADER2"} || <<EOT; </head> <body> - <div style="width: 95%; margin: auto"> + <div style="width: 95%; max-width: 960px; margin: auto"> EOT my $TEMPLATE_FOOTER = $ENV{"FFMPEG_FOOTER"} || <<EOT; diff --git a/doc/t2h.pm b/doc/t2h.pm index 5efb2da..a3b7c6b 100644 --- a/doc/t2h.pm +++ b/doc/t2h.pm @@ -174,7 +174,7 @@ EOT <link rel="stylesheet" type="text/css" href="style.min.css"> </head> <body> - <div style="width: 95%; margin: auto"> + <div style="width: 95%; max-width: 960px; margin: auto"> <h1> EOT
Full width text is really difficult to read, this just makes it slightly more legible on larger (widescreen) screens. Signed-off-by: Josh de Kock <josh@itanimul.li> --- See http://screenshotcomparison.com/comparison/186256 for a comparison of before/after. doc/t2h.init | 2 +- doc/t2h.pm | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-)