Help - Search - Members - Calendar
Full Version: A little problem with Japanese text.
HTMLHelp Forums > Web Authoring > General Web Design
robhr
I'm not sure if this problem is even fixable but I figured I'd see if you guys have any advice.

On this site here: https://solanaceaecollective.com/projects.html On the fourth header down there is Japanese text and it causes a space between lines and I'm all OCD so I don't like it I need to fix it. I tried lowering the font size of the Japanese characters but that didn't do anything. I was just wondering if there's even anything I can do.
Christian J
QUOTE(robhr @ May 8 2024, 10:47 PM) *

I'm all OCD so I don't like it I need to fix it.

A bigger problem might be that 9px text is very small to read. Users can of course zoom the text, but it's an unnecessary extra step and some may not even know how to do it.

QUOTE
I tried lowering the font size of the Japanese characters but that didn't do anything. I was just wondering if there's even anything I can do.

Reducing the CSS line-height (or specify the same value for the English and Japanese text) might help, but I only tested in Firefox.
robhr
QUOTE(Christian J @ May 8 2024, 05:13 PM) *

QUOTE(robhr @ May 8 2024, 10:47 PM) *

I'm all OCD so I don't like it I need to fix it.

A bigger problem might be that 9px text is very small to read. Users can of course zoom the text, but it's an unnecessary extra step and some may not even know how to do it.

QUOTE
I tried lowering the font size of the Japanese characters but that didn't do anything. I was just wondering if there's even anything I can do.

Reducing the CSS line-height (or specify the same value for the English and Japanese text) might help, but I only tested in Firefox.


Line-height seems to have done the trick, it works in Chrome and Edge as well, thank you.
Jason Knight
QUOTE(Christian J @ May 8 2024, 06:13 PM) *

A bigger problem might be that 9px text is very small to read. Users can of course zoom the text, but it's an unnecessary extra step and some may not even know how to do it.

Which REALLY sucks since it's a fixed width layout with no wrapping, so if you zoom in you have to scroll sideways.

The whole thing is an accessibility disaster. Fixed width, absurdly undersized px metrics, px metrics for EVERYTHING telling large swaths of users to go F*** themselves, gibberish markup using tags like FONT that haven't been part of the HTML specification in almost 27 YEARS, horizontal rules where there's no topic change, font+BR doing numbered heading's job, DIV doing HEADER's job...

And honestly I'm shocked the non-English stuff works at all given the lack of DOCTYPE and the charset META being after the TITLE tag making the browser start over from the beginning and/or just flat out ignore it. (I've seen Safari doing that lately)

And even if we dialed the clock back to the 1990's when this type of rubbish HTML was commonplace, it's invalid nonsense since block-level tags like DIV cannot go inside inline-level tags like FONT.

See this:
{width: 900px;

yeah, don't do that. You're just telling large swaths of users where to stick it. In general anyone telling you to use PX and/or to declare a fixed width is so full of manure they could fill Biff Tanen's '48 Ford Super De Luxe twice over.

That just not how you build a website properly any time over the past two and a half decades.

Gimme a while and I might do you the favor or a rewrite of that page with full documentation to show you how things SHOULD be done. You've got a pretty simple page there so it should slap together pretty quickly.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.