Improve readability with some minor style adjustments for images

ericdrobinson commented 1 year ago

General overview of your idea.

Images in the book include title text to provide a description of the content. Readability of this title text in the HTML version of the book can be greatly enhanced with a few very minor adjustments to the book's styling.

Specifically, applying this CSS to the book in browser dev tools:

div.title {
    padding-bottom: 1rem;   /* Separate from main text */
    text-align: center;     /* Center the text */
    font-style: italic;     /* Italic styling */
}

is all that was necessary to take the page rendering from this:

to this:

Such adjustments would bring the HTML version of the book closer to the PDF one (which has much better readability for image titles already):

What problem will this solve?

When reading the HTML version of the book today, I found that I was continuously getting thrown off by the image title text. The text is currently rendered in such a way that it appears inline with normal paragraph text. I manually adjusted it so that I could stop getting distracted by it and found that my reading experience was dramatically improved with such a small change.

Have you thought about other solutions?

No response

Do you want to help with this enhancement idea?

No

ben commented 1 year ago

I think you'll have to file this over at https://github.com/git/git-scm.com. That site's CSS isn't generated from this repo, only the HTML content is.

ericdrobinson commented 1 year ago

I think you'll have to file this over at https://github.com/git/git-scm.com. That site's CSS isn't generated from this repo, only the HTML content is.

@ben Are you sure about that? I took a look at the bundled CSS used by on that site and found that the HTML theme CSS appears to be included in the CSS bundle directly.

With this in mind, is it still appropriate to open a similar Issue over on the main site's repository?

progit / progit2