Please limit the line width to improve readability of the website

[jaxvanyang]

Hi, I found this tutorial very suitable for GTK beginer. But it's not very confortable to read this on the website. Because the line width is beyond 163 characters on a 1080p screen. I use a simple UserCSS to limit the line width:

@-moz-document url-prefix("https://toshiocp.github.io/Gtk4-tutorial") {
    .container {
        max-width: 100ch;
    }
}

Now it looks good to me. Could you please consider limiting the line width to improve the readability?

[ToshioCP]

Hi, Jax.

There are two ways to see the tutorial.

• GitHub repository https://github.com/ToshioCP/Gtk4-tutorial
• GitHub Page https://toshiocp.github.io/Gtk4-tutorial/

I think your issue is about GitHub Page and its CSS. The CSS codes refers to the Bootstrap v. 5.0.2 by the following code.

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

And the bootstrap code manages the page width like this:

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

Therefore, if your screen is 1080px, then the width of the website will be 960px. It is usually fit the screen. And most of the common browsers support the CSS code above. If the CSS codes above don't work, you might need to upgrade your web browser.

At this point, I can't find the solution. If you give me more information about your PC environmnt, it may help me to find the solution.

Toshio Sekiya

[jaxvanyang]

Sorry for the confusion, the 1080p screen I said is actually 1920x1080. So the min-width: 1400px applies. The calculated width of the .container box is around 1300px wide. The first line of GTK 4 tutorial is like:

This tutorial illustrates how to write C programs with the GTK 4 library. It focuses on beginners so the contents are limited to the basics. The table of contents 

is at the end of this abstract.

While on the GitHub repo, it's like:

This tutorial illustrates how to write C programs with the GTK 4 library. It focuses on beginners so the contents are

limited to the basics. The table of contents is at the end of this abstract.

162 vs 117 approximately. I was reading on GitHub at first, then tried to read on the website. But I find it is a little more difficult to follow the text than on GitHub. In my opinion, that .container CSS code is for the overall webpage. So I think it may be better to use a smaller width for text.

I know it's just a small problem, and people has different devices and preference. You may close this issue if no other people consider this as a problem. I can use Stylus anyway.

And thanks for your tutorial, I have learned a lot.

[ToshioCP]

I changed the file lib/lib_mk_html_template.rb so that the width becomes shorter than before. Please check it by accessing https://toshiocp.github.io/Gtk4-tutorial/. If it is not enough for you, I will change it more. Thanks,

Toshio Sekiya

[jaxvanyang]

Thank you, this is great!