search

adobe / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
http://brackets.io
MIT License
33.25k stars 7.63k forks source link

Dual-width monospace characters misaligned #9053

Open bloff opened 10 years ago

bloff commented 10 years ago

I have created a special font, based on Source Code Pro, for the purpose of making a custom-made programming language nice to read. The language uses unicode extensively, and some unicode characters are really not made to work in monospaced fonts.

So this font is almost a monospace font: every character has the same width except for a few characters that have twice that much width.

For instance the ellipsis character … takes twice the space as a letter.

On most editors, typing on this font will make it so that characters are still perfectly aligned. So that two lines with 10 … characters and 20 "a" characters will both have the same length. But in brackets this does not happen; for some reason, the line with 10 … characters is longer than the line with 20 "a" characters!

See the attached screenshot for a comparison of brackets vs kate (on Ubuntu Linux).

font alignment kate vs brackets

How can this be fixed?

The .ttf font can be found on this link. To test it, you need to install it in your system, set it as the main font of Brackets, and paste the text:

aa aa aa aa aa aa aa aa aa
… … … … … … … … …

(here you should be seeing it in some monospace font, where the ellipsis has only 1 char width).

I have verified that the problem is not with Code Mirror, because it doesn't happen on the Code Mirror demo when the font is changed. See this screenshot:

font alignment works on codemirror

Thank you, Bruno

peterflynn commented 10 years ago

@bloff Is the font installed on your OS locally, or are you loading it using webfonts? That can make a big difference.

It's also possible that the older Chromium version used by Brackets is buggy in some way. You could test that like this:

  1. In Brackets, select Debug > Show Developer Tools
  2. Go to the Console and type window.location = "http://codemirror.net/"
  3. The Brackets UI should now be replaced with the same CodeMirror demo page seen in your screenshot above. If you repeat the same test, does it behave correctly (matching your in-browser screenshot) or does it replicate the buggy Brackets rendering?
bloff commented 10 years ago

@peterflynn The font is installed on my OS locally (it is the .ttf I linked with the google drive previously).

I did exactly like you said, and there was a difference. Here is the image:

font align brackets vs chrome

On the left-hand side, you see the brackets instance with the codemirror page loaded. Oddly enough, there IS a misalignment, but it's not the same misalignment I saw earlier (the aa line is now bigger, instead of smaller).

By repeating the same experiment but varying font-sizes, I saw that: In my system's google chrome, fonts appeared always aligned in the CodeMirror site; In the Brackets instance, fonts appeared sometimes aligned, sometimes misaligned depending on the font-size property.

Maybe using a new Chromium version would fix this! Is it possible to test for that?

pthiess commented 10 years ago

@JeffryBooher We should test this with newer versions of CEF, also we should verify if this is a Linux only issue.