Back in high school when I was writing essays, my teacher always demanded to use justified text, because simple left aligned or right aligned text looked ugly. Even back then as a totally rebellious teenager, I agreed with her. Print has used it for hundreds of years, why shouldn't we?

The web has always resisted this development because it was difficult. Yes, the css property text-align: justify exists, but browser were always missing the crucial functionality of hyphenating words. That led to very ugly justified texts and so called "rivers" of whitespace because the spaces got so large. Begrudingly, I got used to it.

I was surprised to learn that all major browsers support the new hyphens css property since late 2023. This one adds exactly that crucial functionality. I was stunned and immediately tried it out and oh look, the web is so much more beautiful now.

You can try out yourself here on Tildes! Just right click a comment, click "Inspect" and then when the dev console pops up, add

text-align: justify;
hyphens: auto:

to p, which stands for the paragraph html tag and in which all text posts are rendered on Tildes.

It looks so much better! But I do wonder why it hasn't spread around more in the web. Am I the only one? Am I nitpicky? I feel like the improvement is stark and very good for functionally no extra work. I even installed a browser extension which augments a website's css so I could automatically do it on most websites.

Since I know quite a few tilderinos use Kagi (far higher percentage than the standard population) I figured this might interest some of you.

Kagi pushed out a new Dark theme that is not dark. It's possibly even worse than Googles non-dark official Dark mode.

Here is a CSS fix you can throw in your custom css section in settings that I whipped up for some people in the Discord, should be useful.

    :root {  
  --custom-bg-color: #090c10;

  --search-result-gap: 20px;
  --search-result-gap-mobile: 10px;
  --app-bg: var(--custom-bg-color);
  --search-result-title: #fff;
  --primary-visited: #aaa;
  /*! --quick-search-bg: #000; */
  --color-search-input: var(--custom-bg-color);
  --result-item-title-border: rgba(255,255,255,0.25);
  --search-result-date-bg: rgba(255,255,255,0.15);
}

.__sri-time {
  font-size: 12px;
  border-radius: 2px;
  margin-right: 3px
}

.__sri-desc {
  padding-top: 3px;
}

.__sri-title {
  margin-bottom: 5px;
}

.__sri-url .__sri_url_path_box {
  margin-top: 0px;
}

@media screen and (max-width: 1300px) {
  .search-result, .sri-group {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-bottom: var(--search-result-gap-mobile) !important;
  }
}  

This fixes the colors, padding, and some other general weirdness they introduced. They also don't follow their own variable specs so I introduced two new ones in there so you can modify to your liking (namely padding between links on mobile and desktop).