[Top][All Lists]

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: mac os x page: example block is cut off

From: Federico Bruni
Subject: Re: mac os x page: example block is cut off
Date: Sat, 07 Jul 2018 14:42:33 +0200

Here's the (forgot) attachment

Il giorno sab 7 lug 2018 alle 14:33, Federico Bruni <address@hidden> ha scritto:
Hi all

See this page: http://lilypond.org/macos-x.html

In the second column, second item of the ordered list, there's a quite long line of code block. Same for the last code block in that column.

The width of the code block is too short. This happens on all browsers, of course. But you can scroll horizontally using the scrollbar. The problem is that certain browsers hide the horizontal bar, for example Epiphany on Linux, Safari on Mac and Adblock Browser on Android (see attached screenshot). This is annoying because Mac Os X users will likely visit that page using Safari and feel confused about that short line. This just occurred to me (I happened to use a Mac laptop).

The width is fixed and set to 250px in the class `.h-scroll-auto` of lilypond-website.css
The class is used only in that page:

$ git grep .h-scroll-auto Documentation/web

I think we can safely remove it.

The fixed width was introduced with below commit by Trevor in 2010.
I don't know how browsers behaved 8 years ago, but I can see now that Firefox and Chrome will add a scrollbar automatically if the example doesn't fit the space available. If there's no objection and I'm not missing anything, I would send a patch to remove the width from that CSS class.

Author: Trevor Daniels <address@hidden>
Date:   Fri Aug 6 12:51:03 2010 +0100

   Web: Issue 958 (partial) Scroll wide examples

    - Examples on web pages which are divided into two columns
      run off the right-hand edge when the width of the browser
      window is reduced.  This patch adds a horizontal scroll
      bar to examples which do this.

diff --git a/Documentation/css/lilypond-web.css b/Documentation/css/lilypond-web.css
index fd883b5b51..c101fd15ee 100644
--- a/Documentation/css/lilypond-web.css
+++ b/Documentation/css/lilypond-web.css
@@ -891,6 +891,18 @@ div.color4 h3 {
  line-height: 0.8;

+.example {
+  position: relative;
+  left: -3em;
+.h-scroll-auto {
+  position: relative;
+  left: 1em;
+  width: 240px;
+  overflow: auto;

bug-lilypond mailing list

Attachment: android-adblock-browser.png
Description: PNG image

reply via email to

[Prev in Thread] Current Thread [Next in Thread]