Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with Chromium browsers displaying Unicode-blocks poorly #9

Open
hermanTenuki opened this issue Oct 9, 2020 · 0 comments
Open
Labels
help wanted Extra attention is needed invalid This doesn't seem right

Comments

@hermanTenuki
Copy link
Owner

For some reason, chromium rendering Unicode-blocks poorly regardless of what font is used.

If we try to create art with Unicode-blocks in a monospace font, chromium will always leave some weird lines between symbols.

For example, let's compare Google Chrome and Firefox browsers:

Screenshot_4
Google Chrome

Screenshot_5
Firefox Browser

I improved this issue by detecting Chromium in JavaScript and applying some styling:

if (window.chrome) {
    art_div.css({
        'letter-spacing': '-0.1em',
        'line-height': '1.2em',
        'transform': 'scale(1.2, 1) translateX(8%)'
    });
}

Let's look again at the examples:

Screenshot_6
Google Chrome (with styling fixes)

Screenshot_5
Firefox Browser again

Now you can see that situation is a lot better, but Chromium still displaying art differently. If you look at the letters in both arts (especially "b"), Chromium's blocks are blurring or, like, floating to the upper side.

@hermanTenuki hermanTenuki added help wanted Extra attention is needed invalid This doesn't seem right labels Oct 9, 2020
@hermanTenuki hermanTenuki changed the title Issues with Chromium browsers displaying Unicode-blocks poorly Issue with Chromium browsers displaying Unicode-blocks poorly Oct 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed invalid This doesn't seem right
Projects
None yet
Development

No branches or pull requests

1 participant