5 votes

On post text in post listings

Posted by calvinb
Tags: suggestions

I'm going to keep it brief, because there's not a lot to talk about:

  • The font size and lightness makes it really hard to read the text for posts. It could be easier to read by changing these aspects.

  • Could disabling the inline text for posts be added? I wouldn't mind if I had to view the comments page for a post to read it as I'd read the post if it interested me, so currently I have to scroll past it instead. It makes the post listings harder to skim through, especially because it's hard to read the text on them.

  • It made me think of another point; maybe some kind of middle option where text can be associated with a topic, but there could be another field where a brief summary that's more descriptive than the title is placed, or just truncate the post text and explicitly show that there's more.

10 comments

  1. [3]
    Deimos
    Link
    Just to make sure: you do realize that if you click that text, it expands the whole post in larger and darker text, right? It's mostly intended as a quick preview and something to click on, not so...

    Just to make sure: you do realize that if you click that text, it expands the whole post in larger and darker text, right? It's mostly intended as a quick preview and something to click on, not so much to be actively read.

    4 votes
    1. [2]
      zaluzianskya
      Link Parent
      The expanded text is darker, but the contrast still isn't great. (I'm using the Solarized Light theme. The contrast on the default white theme is a lot better.)

      The expanded text is darker, but the contrast still isn't great. (I'm using the Solarized Light theme. The contrast on the default white theme is a lot better.)

      1 vote
      1. Deimos
        Link Parent
        Hmm yeah, I think some of the CSS rules might be applying in the wrong order and ending up with lighter text than I was intending. It's definitely not great on the ones with a darker background,...

        Hmm yeah, I think some of the CSS rules might be applying in the wrong order and ending up with lighter text than I was intending. It's definitely not great on the ones with a darker background, since it alternates.

        4 votes
  2. [5]
    bhrgunatha
    Link
    I use Stylus. It enables you to override the styling of web sites. I've had to change tildes.net styles because the low contrast and text size make is very hard to read e.g. on the front page the...

    I use Stylus. It enables you to override the styling of web sites.

    I've had to change tildes.net styles because the low contrast and text size make is very hard to read e.g. on the front page the summary text is #999999 on a #ffffff background.. The light blue text on white makes my eye strain trying to read.

    If you do choose to use it I'd be happy to share my settings for tildes with you :)

    Rant

    Web design has resulted in so many web pages having low-contrast, unreadable content.
    I have a fairly basic 1080 screen on a desktop PC and my eyesight is not the best.

    I've tried engaging with people about the design of their web sites and the response is invariably no concern. The majority of people who design their site with low contrast small text just don't seem to care.

    I'm not sure why people don't care that their content is unreadable. I guess because "it looks good to them" on their device(s) and they have no experience (or care) for people with poorer eye sight or other factors (like colour blindness.) Firefox having a Reader mode is a clear indicator that there is a problem.

    You can't fix everything but contrast and readability is one thing that's easy to fix. So very many sites these days ignore the WCAG accessibility guidelines for contrast it's a joke.

    2 votes
    1. [4]
      Deimos
      Link Parent
      I'm happy to fix things, it's generally just tricky to balance needing some way of de-emphasizing certain text without also introducing contrast/readability issues. If all the text is dark, you...

      I'm happy to fix things, it's generally just tricky to balance needing some way of de-emphasizing certain text without also introducing contrast/readability issues. If all the text is dark, you lose one tool for de-emphasizing and have to rely more on size, bold, etc. instead.

      The white and black themes especially were pretty quick hacks, and all the colors (blue, purple, etc.) are the same for them as they are in the Solarized themes. That's not great, since they weren't really intended to be used on white or black backgrounds in the first place.

      5 votes
      1. bhrgunatha
        Link Parent
        Thanks and to be clear, you're very responsive to most of the suggestions I've seen here - it wasn't meant as a poke at you. It was a combination of "I have trouble here too" and "I've given up...

        Thanks and to be clear, you're very responsive to most of the suggestions I've seen here - it wasn't meant as a poke at you.

        It was a combination of "I have trouble here too" and "I've given up reaching out to people because of the usual lack of response".

        3 votes
      2. bhrgunatha
        Link Parent
        These are the tweaks I have with some notes. (I'm using the White style option): /* Browser settings for font size as the base */ html, body { font-size:100% !important; } .topic .topic-title {...

        These are the tweaks I have with some notes. (I'm using the White style option):

        /* Browser settings for font size as the base */
html, body { font-size:100% !important; }
.topic .topic-title { font-size: 1rem !important; }

/* Increase contrast - I don't need to dim topic excerpt */
body .topic-text-excerpt, body .topic-content-metadata { color:#444 !important; }

/* Some UI elements are too light for white background */
a, a:focus, a:hover, a:active, a.active,
.nav .nav-item a:focus{ color: #03c !important; }
#sidebar .group-subscription button { color: #6c71c4 !important; }

/* Fix white hover getting overriden */ 
#sidebar .btn, btn-primary, btn-primary:focus, .btn.btn-primary:hover,
#sidebar .group-subscription button:hover { color: #fff !important; }
/* Fix drop down style selection */ 
.form-select { padding: 0.2rem 0.4rem;} 

/* Layout grid change*/ 
.topic {
  grid-template-areas:
    "voting title"
    "voting metadata"
    "voting content"
    "voting info";
  grid-template-columns: auto 1fr;
}

/* Personal preferences */
.topic-voting.btn, .topic-icon { border-style: none; }
article { border-bottom: solid 1px #aaa;}
        2 votes
      3. [2]
        Comment deleted by author
        Link Parent
        1. Deimos
          Link Parent
          No, the theme is fully client-side so I have no idea which themes people are using.

          No, the theme is fully client-side so I have no idea which themes people are using.

          2 votes
  3. zaluzianskya
    Link
    I agree so much with this. One of the first things I did after I set up my account was make a custom stylesheet for Tildes. Here's the code I'm using to darken the text if it would be helpful for...

    The font size and lightness makes it really hard to read the text for posts. It could be easier to read by changing these aspects.

    I agree so much with this. One of the first things I did after I set up my account was make a custom stylesheet for Tildes. Here's the code I'm using to darken the text if it would be helpful for you:

    @-moz-document domain("tildes.net") {

body, 
.topic-text-excerpt p, 
.topic-text-excerpt summary, 
.topic-full-text, 
.comment-text {
  color: #002B36;
  }
}

    (If you're using the white site skin rather than Solarized light, you should probably set the color as #000 instead.)

    Not saying that custom stylesheets are preferable to built-in accessibility, but it's at least a workaround for now.

    1 vote
  4. pseudolobster
    Link
    For the second point, you could do this with an adblocker if you wanted. For example, create a ublock filter for ##.topic-text-excerpt > summary, that seems to work.

    For the second point, you could do this with an adblocker if you wanted. For example, create a ublock filter for ##.topic-text-excerpt > summary, that seems to work.