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

Ligatures aren't spaced correctly #3821

Closed
YawarRaza7349 opened this Issue Oct 14, 2014 · 58 comments

Comments

Projects
None yet
@YawarRaza7349

YawarRaza7349 commented Oct 14, 2014

I'm using the Atom for Windows Alpha from the Atom website (not Chocolatey), version 0.136.0 (as viewed in the Help menu and with --version in the command line, the version file in the Atom folder says v0.17.1; it was downloaded around 12:30AM US Eastern on October 14, 2014 if that helps) on Windows 8.1. I set text-rendering: optimizeLegibility; for .editor in styles.less (because otherwise the ligatures aren't in effect and I get each individual character). This happens regardless of whether hardware acceleration is enabled. It also happens in --safe mode, and the developer tools console shows no errors.

temp

(<*>)::Functor f=>(a->b)->(f a->f b)
fmap::Functor f=>(a->b)->(f a->f b)

in Hasklig, which has ligatures for <*>, ::, =>, and ->.

temp

fifififififififififi

in Calibri, using the ligature for fi. The cursor is at the end of the line, and the misspell underline only leads up to that point as well. The ligature for ff in Calibri has the opposite effect; the cursor and underline extend farther than text on the screen if you put enough f's on a line.

I can provide more details if you need them.

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 9, 2015

body {
    -webkit-font-feature-settings: "liga" 1;
    font-feature-settings: "liga" 1;
    text-rendering: optimizeLegibility;
}

makes little bit better, but not enough

ai commented Jan 9, 2015

body {
    -webkit-font-feature-settings: "liga" 1;
    font-feature-settings: "liga" 1;
    text-rendering: optimizeLegibility;
}

makes little bit better, but not enough

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 9, 2015

Also same problems are with Fire Code

ai commented Jan 9, 2015

Also same problems are with Fire Code

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai commented Jan 9, 2015

@benogle

This comment has been minimized.

Show comment
Hide comment
@benogle

benogle Jan 9, 2015

Contributor

Try disabling Use hardware acceleration in the settings. Does that help?

Contributor

benogle commented Jan 9, 2015

Try disabling Use hardware acceleration in the settings. Does that help?

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 10, 2015

@benogle thanks for advice. But it really not help. LIgatures behaviour is totally same without “Use hardware acceleration”.

ai commented Jan 10, 2015

@benogle thanks for advice. But it really not help. LIgatures behaviour is totally same without “Use hardware acceleration”.

@50Wliu

This comment has been minimized.

Show comment
Hide comment
@50Wliu

50Wliu Jan 10, 2015

Member

Refs #2880 (possible duplicate).

Member

50Wliu commented Jan 10, 2015

Refs #2880 (possible duplicate).

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 10, 2015

@50Wliu nope. #2880 is about disabled rendering ligatures (two symbols instead of one) and this issue is about wrong caret position on font with ligatures.

ai commented Jan 10, 2015

@50Wliu nope. #2880 is about disabled rendering ligatures (two symbols instead of one) and this issue is about wrong caret position on font with ligatures.

@50Wliu

This comment has been minimized.

Show comment
Hide comment
@50Wliu

50Wliu Jan 10, 2015

Member

Oh, whoops.

Member

50Wliu commented Jan 10, 2015

Oh, whoops.

@killercup

This comment has been minimized.

Show comment
Hide comment
@killercup

killercup Feb 5, 2015

Is there any progress on this? A recent update (I guess it was 0.177) made this much worse for me.

Compare the position of colons and semicolons, for example:

styles_less_-_users_pascal_documents_uni_2014ws-pg-web_episodefever-ausarbeitung-_atom

styles_less_-_users_pascal_documents_uni_2014ws-pg-web_episodefever-ausarbeitung-_atom

killercup commented Feb 5, 2015

Is there any progress on this? A recent update (I guess it was 0.177) made this much worse for me.

Compare the position of colons and semicolons, for example:

styles_less_-_users_pascal_documents_uni_2014ws-pg-web_episodefever-ausarbeitung-_atom

styles_less_-_users_pascal_documents_uni_2014ws-pg-web_episodefever-ausarbeitung-_atom

@benogle

This comment has been minimized.

Show comment
Hide comment
@benogle

benogle Feb 5, 2015

Contributor

@killercup what font are you using?

Contributor

benogle commented Feb 5, 2015

@killercup what font are you using?

@killercup

This comment has been minimized.

Show comment
Hide comment
@killercup

killercup Feb 5, 2015

That's Hasklig (same as a previous commenter IIRC).

On Thu, Feb 5, 2015 at 7:51 PM, Ben Ogle notifications@github.com wrote:

@killercup what font are you using?

Reply to this email directly or view it on GitHub:
#3821 (comment)

killercup commented Feb 5, 2015

That's Hasklig (same as a previous commenter IIRC).

On Thu, Feb 5, 2015 at 7:51 PM, Ben Ogle notifications@github.com wrote:

@killercup what font are you using?

Reply to this email directly or view it on GitHub:
#3821 (comment)

@asamiam

This comment has been minimized.

Show comment
Hide comment
@asamiam

asamiam Feb 7, 2015

I'm having the same issue and it makes it impossible to use - the cursor shows up far left of where it actually is on the page; I switched to Atom for its support of ligatures (Hasklig). (OSX - and I've disabled hardware acceleration as well)

asamiam commented Feb 7, 2015

I'm having the same issue and it makes it impossible to use - the cursor shows up far left of where it actually is on the page; I switched to Atom for its support of ligatures (Hasklig). (OSX - and I've disabled hardware acceleration as well)

@jutaro

This comment has been minimized.

Show comment
Hide comment
@jutaro

jutaro Feb 7, 2015

I would like to use Hasklig with ligatures as well. Unusable on Linux (tried with all kind of options). Please fix!

jutaro commented Feb 7, 2015

I would like to use Hasklig with ligatures as well. Unusable on Linux (tried with all kind of options). Please fix!

@braver

This comment has been minimized.

Show comment
Hide comment
@braver

braver Feb 14, 2015

optimizeLegibility seems to be giving issues: https://discuss.atom.io/t/wrong-font-rendering/14725.

braver commented Feb 14, 2015

optimizeLegibility seems to be giving issues: https://discuss.atom.io/t/wrong-font-rendering/14725.

@frabert

This comment has been minimized.

Show comment
Hide comment
@frabert

frabert Feb 15, 2015

I tried to make a html file with this style in its head

textarea {
    -webkit-font-feature-settings: "liga" 1;
    font-feature-settings: "liga" 1;
    text-rendering: optimizeLegibility;

    font-family: "Hasklig";
}

And writing in a textarea within such file with Chrome works perfectly fine, no misplaced carets nor problems deleting characters...

EDIT: Test performed on Chromium 42 too, works as expected.

frabert commented Feb 15, 2015

I tried to make a html file with this style in its head

textarea {
    -webkit-font-feature-settings: "liga" 1;
    font-feature-settings: "liga" 1;
    text-rendering: optimizeLegibility;

    font-family: "Hasklig";
}

And writing in a textarea within such file with Chrome works perfectly fine, no misplaced carets nor problems deleting characters...

EDIT: Test performed on Chromium 42 too, works as expected.

@postcasio

This comment has been minimized.

Show comment
Hide comment
@postcasio

postcasio Feb 18, 2015

Contributor

@frabert The problem is caused by Atom using a custom editor control, not a <textarea>. It performs its own character measurements to find out where the cursor should be rendered on screen - enabling ligatures throws the measurements off because the character widths can change depending on surrounding characters, which Atom doesn't account for.

Contributor

postcasio commented Feb 18, 2015

@frabert The problem is caused by Atom using a custom editor control, not a <textarea>. It performs its own character measurements to find out where the cursor should be rendered on screen - enabling ligatures throws the measurements off because the character widths can change depending on surrounding characters, which Atom doesn't account for.

@frabert

This comment has been minimized.

Show comment
Hide comment
@frabert

frabert Feb 18, 2015

I see, sorry for the misleading results. Out of curiosity, how does Atom calculate text metrics? Something like a Freetype wrapper?

frabert commented Feb 18, 2015

I see, sorry for the misleading results. Out of curiosity, how does Atom calculate text metrics? Something like a Freetype wrapper?

@postcasio

This comment has been minimized.

Show comment
Hide comment
@postcasio

postcasio Feb 18, 2015

Contributor

From my understanding it copies lines into an invisible dummy node, then it iterates over each character. For each character It creates a selection and asks the browser for the width of the selection.

Contributor

postcasio commented Feb 18, 2015

From my understanding it copies lines into an invisible dummy node, then it iterates over each character. For each character It creates a selection and asks the browser for the width of the selection.

@frabert

This comment has been minimized.

Show comment
Hide comment
@frabert

frabert Feb 18, 2015

So the browser is incorrectly calculating the width of such a selection? Is it because the characters making up the ligatures are stored in different elements, tricking the algorithm?

frabert commented Feb 18, 2015

So the browser is incorrectly calculating the width of such a selection? Is it because the characters making up the ligatures are stored in different elements, tricking the algorithm?

@kumarrishav

This comment has been minimized.

Show comment
Hide comment
@kumarrishav

kumarrishav Mar 17, 2015

@postcasio @benogle I am unable to reproduce this issue (on Linux). Can you help in reproducing it?

kumarrishav commented Mar 17, 2015

@postcasio @benogle I am unable to reproduce this issue (on Linux). Can you help in reproducing it?

@jutaro

This comment has been minimized.

Show comment
Hide comment
@jutaro

jutaro Mar 17, 2015

Try to install the Hasklig font and then edit a Haskell file. The problem
sometimes doesn't appear immediately, but for me it never took long before
it gets a mess (The cursor and the point you are editing differ).
Hope very much you can fix it.
Jürgen
Am 17.03.2015 14:48 schrieb "Kumar Rishav" notifications@github.com:

@postcasio https://github.com/postcasio @benogle
https://github.com/benogle I am unable to reproduce this issue (on
Linux). Can you help in reproducing it?


Reply to this email directly or view it on GitHub
#3821 (comment).

jutaro commented Mar 17, 2015

Try to install the Hasklig font and then edit a Haskell file. The problem
sometimes doesn't appear immediately, but for me it never took long before
it gets a mess (The cursor and the point you are editing differ).
Hope very much you can fix it.
Jürgen
Am 17.03.2015 14:48 schrieb "Kumar Rishav" notifications@github.com:

@postcasio https://github.com/postcasio @benogle
https://github.com/benogle I am unable to reproduce this issue (on
Linux). Can you help in reproducing it?


Reply to this email directly or view it on GitHub
#3821 (comment).

@sudodoki

This comment has been minimized.

Show comment
Hide comment
@sudodoki

sudodoki May 27, 2015

Using FiraCode with addition of

.editor {
  text-rendering: optimizeLegibility;
}

in my styles.
Had issue with horizontal spacing & selection boundary box not matching the last letter, but extending beyond that which also affect the correctness of selection functionality.
Here's recording of the screen - top is sublime, bottom is atom. Will be glad to add any other info regarding my setup and why it's broken.

sudodoki commented May 27, 2015

Using FiraCode with addition of

.editor {
  text-rendering: optimizeLegibility;
}

in my styles.
Had issue with horizontal spacing & selection boundary box not matching the last letter, but extending beyond that which also affect the correctness of selection functionality.
Here's recording of the screen - top is sublime, bottom is atom. Will be glad to add any other info regarding my setup and why it's broken.

@iamstarkov

This comment has been minimized.

Show comment
Hide comment
@iamstarkov

iamstarkov May 27, 2015

faced same issue =(

iamstarkov commented May 27, 2015

faced same issue =(

@sqd

This comment has been minimized.

Show comment
Hide comment
@sqd

sqd Jun 2, 2015

please fix it. I switched from Sublime to Atom for ligatures supports :-(

sqd commented Jun 2, 2015

please fix it. I switched from Sublime to Atom for ligatures supports :-(

@kubetz

This comment has been minimized.

Show comment
Hide comment
@kubetz

kubetz Jul 1, 2015

@Fresheyeball There is an ongoing PR reworking char measurement so I would look there 👍 .

kubetz commented Jul 1, 2015

@Fresheyeball There is an ongoing PR reworking char measurement so I would look there 👍 .

@richardwooding

This comment has been minimized.

Show comment
Hide comment
@richardwooding

richardwooding Jul 28, 2015

Would love this to work so I can use http://larsenwork.com/monoid/ ligature support

richardwooding commented Jul 28, 2015

Would love this to work so I can use http://larsenwork.com/monoid/ ligature support

@larsenwork

This comment has been minimized.

Show comment
Hide comment
@larsenwork

larsenwork Jul 29, 2015

@richardwooding everything but the icons should work? If not then please add an issue on https://github.com/larsenwork/monoid/issues

larsenwork commented Jul 29, 2015

@richardwooding everything but the icons should work? If not then please add an issue on https://github.com/larsenwork/monoid/issues

@larsenwork

This comment has been minimized.

Show comment
Hide comment
@larsenwork

larsenwork Jul 30, 2015

@as-cii does #7945 also address the ligatures or is it "only" the measurement?

larsenwork commented Jul 30, 2015

@as-cii does #7945 also address the ligatures or is it "only" the measurement?

@richardwooding

This comment has been minimized.

Show comment
Hide comment
@richardwooding

richardwooding Jul 30, 2015

@larsenwork

I seem to have everything working with this styles.less

* {
   -webkit-font-smoothing: antialiased;
   -webkit-font-feature-settings: "liga" on, "calt" on;
 }

 atom-text-editor::shadow {
   .cursor-line {
     -webkit-font-feature-settings: "liga" off, "calt" off;
   }
 }

.tree-view {

}

atom-text-editor {
  font-family: 'monoid';
  font-size: 15px;
}

atom-text-editor .cursor {

}

Let me know if there is a better way of doing this. Keep up the great work.

richardwooding commented Jul 30, 2015

@larsenwork

I seem to have everything working with this styles.less

* {
   -webkit-font-smoothing: antialiased;
   -webkit-font-feature-settings: "liga" on, "calt" on;
 }

 atom-text-editor::shadow {
   .cursor-line {
     -webkit-font-feature-settings: "liga" off, "calt" off;
   }
 }

.tree-view {

}

atom-text-editor {
  font-family: 'monoid';
  font-size: 15px;
}

atom-text-editor .cursor {

}

Let me know if there is a better way of doing this. Keep up the great work.

@Rydgel

This comment has been minimized.

Show comment
Hide comment
@Rydgel

Rydgel Aug 7, 2015

@richardwooding not working here.

Rydgel commented Aug 7, 2015

@richardwooding not working here.

@Fresheyeball

This comment has been minimized.

Show comment
Hide comment
@Fresheyeball

Fresheyeball Aug 14, 2015

Weirdly, that css code works well for me on windows, but not on osx or linux

Fresheyeball commented Aug 14, 2015

Weirdly, that css code works well for me on windows, but not on osx or linux

@nadavwr

This comment has been minimized.

Show comment
Hide comment
@nadavwr

nadavwr Aug 16, 2015

Using @richardwooding's configuration I was able to see ligatures on osx.
Works like a charm for plain text files, and when using 'language-scala'.
Strangely enough, it didn't work as well in Java: => would present as double right arrow when inside a string literal, but as plain '=' and '>' in code.

nadavwr commented Aug 16, 2015

Using @richardwooding's configuration I was able to see ligatures on osx.
Works like a charm for plain text files, and when using 'language-scala'.
Strangely enough, it didn't work as well in Java: => would present as double right arrow when inside a string literal, but as plain '=' and '>' in code.

@andrewdcato

This comment has been minimized.

Show comment
Hide comment
@andrewdcato

andrewdcato Sep 21, 2015

@richardwooding's workaround was successful for me in OS X (tested mainly in PHP), but the ligatures would never display on the active line.

andrewdcato commented Sep 21, 2015

@richardwooding's workaround was successful for me in OS X (tested mainly in PHP), but the ligatures would never display on the active line.

@as-cii as-cii referenced this issue Sep 30, 2015

Merged

DOM-based measurements #8811

11 of 11 tasks complete
@50Wliu

This comment has been minimized.

Show comment
Hide comment
@50Wliu

50Wliu Oct 7, 2015

Member

@as-cii This is fixed now, right?

Member

50Wliu commented Oct 7, 2015

@as-cii This is fixed now, right?

@as-cii

This comment has been minimized.

Show comment
Hide comment
@as-cii

as-cii Oct 8, 2015

Member

I think so, as on master Atom now behaves exactly as Chrome <textarea>. This is how Monoid support looks like without any particular configuration (except for text-rendering: optimizeLegibility):

monoid

Unfortunately, Hasklig/Fira Code are not 100% supported as Chrome won't report the exact space between characters when there is a ligature (e.g. they seem to be considered as a single character), so the cursor won't be positioned "inside" it:

hasklig

However, we now degrade gracefully and allow the cursor to be positioned correctly even on subsequent characters without any special configuration. So, you shouldn't see stuff like the following happening anymore:

master

Ideally I'd love to put a break in between characters when some kind of edit action is happening, but that comes with a performance overhead because we'd have to change the line every time e.g. a cursor is moved.

I am going to close this for now, as Atom should now be usable regardless of the font configuration and behaves exactly like Chrome text area does. Please, let me know if we should reopen this because of some issue I am not taking into account.

Thanks everyone! 🙏

Member

as-cii commented Oct 8, 2015

I think so, as on master Atom now behaves exactly as Chrome <textarea>. This is how Monoid support looks like without any particular configuration (except for text-rendering: optimizeLegibility):

monoid

Unfortunately, Hasklig/Fira Code are not 100% supported as Chrome won't report the exact space between characters when there is a ligature (e.g. they seem to be considered as a single character), so the cursor won't be positioned "inside" it:

hasklig

However, we now degrade gracefully and allow the cursor to be positioned correctly even on subsequent characters without any special configuration. So, you shouldn't see stuff like the following happening anymore:

master

Ideally I'd love to put a break in between characters when some kind of edit action is happening, but that comes with a performance overhead because we'd have to change the line every time e.g. a cursor is moved.

I am going to close this for now, as Atom should now be usable regardless of the font configuration and behaves exactly like Chrome text area does. Please, let me know if we should reopen this because of some issue I am not taking into account.

Thanks everyone! 🙏

@as-cii as-cii closed this Oct 8, 2015

@Rydgel

This comment has been minimized.

Show comment
Hide comment
@Rydgel

Rydgel Oct 8, 2015

@as-cii This looks much better indeed, thank you. Is this patch scheduled on the next stable release?

Rydgel commented Oct 8, 2015

@as-cii This looks much better indeed, thank you. Is this patch scheduled on the next stable release?

@MrLoh

This comment has been minimized.

Show comment
Hide comment
@MrLoh

MrLoh Oct 8, 2015

When will this be active? In the current Atom the ligatures work mostly fine (no rendering of != though) but there are a bunch of spacing issues with text when text-rendering: optimizeLegibility is on.

MrLoh commented Oct 8, 2015

When will this be active? In the current Atom the ligatures work mostly fine (no rendering of != though) but there are a bunch of spacing issues with text when text-rendering: optimizeLegibility is on.

@thomasjo

This comment has been minimized.

Show comment
Hide comment
@thomasjo

thomasjo Oct 8, 2015

Member

When will this be active?

Most likely in the v1.2.0 release I believe (unless some serious regressions are discovered). If you want it immediately, consider building the master branch yourself. It's fairly straight forward.

Member

thomasjo commented Oct 8, 2015

When will this be active?

Most likely in the v1.2.0 release I believe (unless some serious regressions are discovered). If you want it immediately, consider building the master branch yourself. It's fairly straight forward.

@alexandernst

This comment has been minimized.

Show comment
Hide comment
@alexandernst

alexandernst Oct 8, 2015

@thomasjo WIll text-rendering: optimizeLegibility be enabled by default? aka, will ligatures work out of the box?

alexandernst commented Oct 8, 2015

@thomasjo WIll text-rendering: optimizeLegibility be enabled by default? aka, will ligatures work out of the box?

@thomasjo

This comment has been minimized.

Show comment
Hide comment
@thomasjo

thomasjo Oct 8, 2015

Member

WIll text-rendering: optimizeLegibility be enabled by default?

No, that hasn't changed. I could see that being introduced as a configuration option though... I'm pretty sure such a PR would be accepted 😏

Member

thomasjo commented Oct 8, 2015

WIll text-rendering: optimizeLegibility be enabled by default?

No, that hasn't changed. I could see that being introduced as a configuration option though... I'm pretty sure such a PR would be accepted 😏

@altaic

This comment has been minimized.

Show comment
Hide comment
@altaic

altaic Oct 9, 2015

This is great; thank you so much.

altaic commented Oct 9, 2015

This is great; thank you so much.

@gusaiani

This comment has been minimized.

Show comment
Hide comment
@gusaiani

gusaiani Oct 9, 2015

Thanks to everyone who made this happen.

gusaiani commented Oct 9, 2015

Thanks to everyone who made this happen.

@Fresheyeball

This comment has been minimized.

Show comment
Hide comment
@Fresheyeball

Fresheyeball Oct 9, 2015

This made my day. Thank you so much for making this happen.

Fresheyeball commented Oct 9, 2015

This made my day. Thank you so much for making this happen.

rajadain added a commit to rajadain/Hasklig that referenced this issue Oct 15, 2015

Add Atom support
atom/atom#3821 was just closed, v1.0.19 has the fix.
@hyiltiz

This comment has been minimized.

Show comment
Hide comment
@hyiltiz

hyiltiz Oct 26, 2015

Cheers for making this happen!

hyiltiz commented Oct 26, 2015

Cheers for making this happen!

@ngeor

This comment has been minimized.

Show comment
Hide comment
@ngeor

ngeor Sep 25, 2016

I stumbled upon this post trying to understand why the "Space Mono" font renders the characters "fi" funny (and converts html closing tags into arrows). Linux with Atom 1.9.9 and Mac OS X with Atom 1.10.2, for me a fine workaround is to shut down this feature completely by adding this to the stylesheet:

atom-text-editor {
  -webkit-font-feature-settings: "liga" off, "calt" off;
}

after that the font works fine.

ngeor commented Sep 25, 2016

I stumbled upon this post trying to understand why the "Space Mono" font renders the characters "fi" funny (and converts html closing tags into arrows). Linux with Atom 1.9.9 and Mac OS X with Atom 1.10.2, for me a fine workaround is to shut down this feature completely by adding this to the stylesheet:

atom-text-editor {
  -webkit-font-feature-settings: "liga" off, "calt" off;
}

after that the font works fine.

@lock

This comment has been minimized.

Show comment
Hide comment
@lock

lock bot Apr 5, 2018

This issue has been automatically locked since there has not been any recent activity after it was closed. If you can still reproduce this issue in Safe Mode then please open a new issue and fill out the entire issue template to ensure that we have enough information to address your issue. Thanks!

lock bot commented Apr 5, 2018

This issue has been automatically locked since there has not been any recent activity after it was closed. If you can still reproduce this issue in Safe Mode then please open a new issue and fill out the entire issue template to ensure that we have enough information to address your issue. Thanks!

@lock lock bot locked and limited conversation to collaborators Apr 5, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.