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

Request: connected underscores __ #87

Closed
piskov opened this issue Jul 12, 2019 · 9 comments
Closed

Request: connected underscores __ #87

piskov opened this issue Jul 12, 2019 · 9 comments

Comments

@piskov
Copy link

piskov commented Jul 12, 2019

BEM web naming convention uses a lot of double underscores.

As of now Operator shows a little gap between two undercores. Would be nice to have it eliminated as in 7.2 Stylistic Sets Operator Mono (see “connected underscore”).

@kiliman
Copy link
Owner

kiliman commented Jul 12, 2019

That is actually built into the font.

image

<!DOCTYPE html>
<html>
  <head>
    <style>
      pre {
        font-family: 'Operator Mono SSm';
      }
      .ss08 {
        font-feature-settings: 'ss08';
      }
    </style>
  </head>
  <body>
    <h2>Without Stylistic Set 08 Enabled</h2>
    <pre>
      .block__elem { color: #042; }
      .block__elem--modifier { color: #420; }
    </pre>
    <h2>With Stylistic Set 08 Enabled</h2>
    <pre class="ss08">
      .block__elem { color: #042; }
      .block__elem--modifier { color: #420; }
    </pre>
  </body>
</html>

The issue is that there isn't an easy to way to enable font-feature-settings directly in VS Code. There are some issues in GitHub asking for this feature.

microsoft/vscode#6918
microsoft/vscode#10435

The current workaround is to update the workbench.main.css file.

@piskov
Copy link
Author

piskov commented Jul 12, 2019

@kiliman could you please tell me what to add to worbench.main.css? I tried ↓ to no avail:
.monaco-editor { font-feature-settings:"ss08"; }

@kiliman
Copy link
Owner

kiliman commented Jul 12, 2019

I got it to work in VS Code. I also used the Custom CSS and Javascript Loader extension. https://github.com/be5invis/vscode-custom-css

This way I didn't need to modify the main css and can add a custom user file. Follow the instructions for the extension.

Make sure you add !important.

.monaco-editor {
font-feature-settings: "ss08" !important;
}

Looks really nice
image

@piskov
Copy link
Author

piskov commented Jul 12, 2019

You’re messing with me right? :-)

Your code strips any stylistic sets from the original file. "ss08" only works with the original file but is pointless with the “lig” version.

Or is there any other version of your code (unmerged branch maybe)?

@kiliman
Copy link
Owner

kiliman commented Jul 12, 2019

Ah, that could be. Try the features/contextsubst branch. I rewrote the entire table generation to support contextual substitution. It only supports Operator Mono SSm Book (and part of OM Light) currently. That's why I haven't merged to master yet, since I need to redo all the ligatures :(

@piskov
Copy link
Author

piskov commented Jul 12, 2019

Yep, that has done the trick, thanks. But maybe you could make this a default behaviour without the need of switching to stylistic set? That would be nice.

To avoid installing any extension: find every mention of the font-feature-settings: in the workbench.main.css and add after a comma "ss08". E. g.:

.monaco-editor {
  position:relative;
  overflow:visible;
  -webkit-text-size-adjust:100%;
  -webkit-font-feature-settings:"liga" off, "calt" off, "ss08";
  font-feature-settings:"liga" off, "calt" off, "ss08"
}

  .monaco-editor.enable-ligatures {
  -webkit-font-feature-settings:"liga" on, "calt" on, "ss08";
  font-feature-settings:"liga" on, "calt" on,  "ss08"
}

P. S. Please keep up with the good work. I’ve reached out guys from Hoeffler. The response was, basically, no current plans for an update:

We’ve had a few other people request these as well and while we don’t have any immediate plans to add them, it’s certainly on our radar.

@kiliman
Copy link
Owner

kiliman commented Jul 23, 2019

Added the __ ligature. Here's how it looks in VS Code. You no longer need to enable the stylistic set.

image

@kiliman
Copy link
Owner

kiliman commented Jul 23, 2019

Closed by 95503e2

@kiliman kiliman closed this as completed Jul 23, 2019
@kiliman
Copy link
Owner

kiliman commented Jul 24, 2019

Please use the develop branch. I've merged the feature branch and deleted it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants