Readability

[DanMan 1]

On pages with longer text like on the glossary ones (https://pcgamingwiki.com/wiki/Glossary:Field_of_view_(FOV) for example), the readability could be improved. Two things come to mind in particular.

 

1. Paragraphs don't look like they should. There's currently no visible margin between them, so they look like line-breaks instead. There should be a margin of about 1em between paragraphs inside texts.

 

2. If you view the site in fullscreen, the lines of text stretch across the whole screen width, which makes reading hard. I suggest to put in a max-width of around 800px for at least p, ol and ul.

 

Those two points would already go a long way to improve readability. If you want explicit CSS rules that work across the whole site without breaking stuff, I can provide those.

[Andytizer 269]

Thanks for the feedback. This comes back to debatge for the site to be full-width vs fixed-width. There's a lot of outspoken community members who advocate full-width website. Part of the reason I made the 'fixbox' was to make it the text shorter width and make it more readable.

 

Can you help to suggest the explicit CSS I will experiment and see what works.

 

There also need to be some general improvement in the Glossary pages as they are fairly inconsistent and hard to read.

[DanMan 1]

Thanks for the reply. I don't mind the site being full-width at all, but that doesn't have to automatically apply to the text as well. The longer the text lines, the harder it gets to track which line is next, once you're at the end of the current one.

 

I mean, basically something like 

p, li, dd { max-width:800px; }

might already be enough. I shall take a closer look at it on the weekend and post my results here.

[Aemony 142]

Posting here as well based on my comments on Discord.

 

I've found great success with the various tweaks I'm using in my common.css. For this thread there's two main relevant sections:

 

The first, to fix the spacing between <p>'s in the articles:

/* ===== CHANGE : Some more spacing for paragraphs ================================================================================================================== */
p {
    margin: 0.5em 0;
}

/* ^- The above breaks margin on the P for the 'Editing guide', 'Support us on Patreon', 'What is PCGamingWiki?' buttons on the front page, so let's fix that */
div.subheader-button p {
    margin: 0;
}

Before: https://i.imgur.com/124cptI.png

After: https://i.imgur.com/rGS9oIz.png

 

 

The second, to convert the main content into a max-width design, to ease up on the insane width differences and spacing that occurs at wider resolutions, and overall bring the content closer together:

/* ===== CHANGE : Center the content ================================================================================================================================
 * 
 * This caps the max width of the content and aligns it all to the center. max-width 1600px because that seems like a good middle-ground.
 *
 */

/* Center stuff - Beautiful! */
#masthead {
    width: auto;
    max-width: 1600px;
}

body {
    justify-content: center;
    width: 100%;
}

/* Fixes the slightly off-putting ~70% width items in the Editing Guide. Let's have two items per row! */
/* Wrap it around a min width to not break mobile view */
@media only screen and (min-width : 801px) {
    .editing-guide-list-item-wrapper {
        max-width: 50%;
    }
}

Before: https://i.imgur.com/lW3yZi9.png

After: https://i.imgur.com/mln5YkX.png

 

This will limit the width of the articles themselves to around ~1400px, which looks good on both 1920x1080 and 2560x1440 monitors. I am heavily against setting it lower to target a 800px width for the content/paragraphs as this have the opposite effect of making everything too cluttered. Yes, shorter paragraphs will look more condensed and debatable "nicer", but the caveat is that we either end up with unpleasant spacing, or situations where the content can barely breathe. Honestly the site ends up looking like it targets a device in portrait mode more than anything else. For comparisons sake, here's those two last examples using the above CSS (aka content have about ~1400px to stretch to):

 

#1 - https://i.imgur.com/wkLlnL2.png

#2 - https://i.imgur.com/HYgEA0f.png