• Stars
    star
    3,191
  • Rank 14,067 (Top 0.3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Add ligatures to Operator Mono similar to Fira Code

Operator Mono Ligatures

All Contributors

This project will generate new OpenType fonts for Operator Mono that includes ligatures similar to those found in the popular Fira Code font.

These ligatures were custom created using Glyphs. There are even italic versions of the ligatures.

🎉 What's New in Version 2

All new redesigned ligatures with better hinting. Updated font generation to support advanced OpenType features like those found in Fira Code. For example, the cursor now moves inside the ligature. It also handles repeating characters properly.

👀 Click here to see preview images of all ligatures

With the awesome help from Mark Skelton, we now have the full set of ligatures for the following fonts. Thanks Mark, and thanks to all of you who have been patiently waiting for these ligatures to be completed.

  • Operator Mono SSm Light/Light Italic
  • Operator Mono SSm Book/Book Italic
  • Operator Mono SSm Medium/Medium Italic
  • Operator Mono SSm Bold/Bold Italic
  • Operator Mono Light/Light Italic
  • Operator Mono Book/Book Italic

🙏 Help Wanted

As noted above, v2 does not include all weights for Operator Mono. In order to update the other fonts, all the ligatures need to be redone. Unfortunately I just don't have the time to do that at the moment. If you have a Mac and are interested in helping, please let me know. I will even purchase a license to Gylphs Mini for you.

You can reach me at [email protected].

☑️ Take the poll

Which font weight of Operator Mono do you use? Also note difference between Screen Smart (SSm) and regular version. This will help prioritize the order of development.

NOTE: Because Operator Mono is not a free font, you must have the original font files. This utility will merge the ligature definitions into a copy of the original font. The new font family is named Operator Mono Lig so you can install it side-by-side with the original font.

Prerequisites

  • The original Operator Mono font... of course.
  • Python (v2.7+)
    • NOTE: For Mac, the default system Python v2.7 doesn't work. Make sure you install Python 3.
  • Node.js
  • Install fonttools from https://github.com/fonttools/fonttools
    • Windows/Linux: pip install fonttools
      • NOTE: For Windows you should use a console with administrative permissions if your Python sit under C:\PythonX
      • NOTE: For Linux in WSL/WSL2, ensure that fonttools is added to PATH after install. Alternatively, consider installing via sudo apt install fonttools.
    • Mac: pip3 install fonttools (from Python 3)

Installation

Once all the prerequisites have been installed, clone this repo or download latest release from Releases and unzip.

Next, copy your Operator Mono OpenType files into the original folder. NOTE: Filenames must not include spaces. It should look like:

  • OperatorMonoSSm-Book.otf
  • OperatorMonoSSm-BookItalic.otf
  • OperatorMono-Light.otf
  • OperatorMono-LightItalic.otf
  • etc.

Finally, run the following commands to install npm dependencies and build the font files. The new font files will be placed in the build folder. You can now install these fonts on your system.

npm install

# Windows
build

# Linux/Mac
./build.sh

Docker

If you use Docker, you can also use the executable Docker image here. It handles all the prerequisite installation for you, you just need to:

  1. Clone the repo located here.
  2. Copy your Operator Mono OpenType files into the input folder.
  3. From the command line run:
    docker-compose run --rm operator-mono-lig

The image will build and execute the conversion. The new font files will be generated into the build folder.

Configure Your Code Editor

You can now select the newly generated font in your code editor. Make sure you enable font ligatures and set the desired font weight if using Windows. The code block below shows what this might look like if using VS Code.

  "editor.fontFamily": "OperatorMonoSSmLig-Book",
  "editor.fontLigatures": true,
  // for Windows
  "editor.fontFamily": "Operator Mono SSm Lig",
  "editor.fontLigatures": true,
  "editor.fontWeight": "500",   // adjust for desired weight

🔧 Customize the generated font

By default, all available ligatures will be added to the generated font. However, if you don't like a particular ligature, or would prefer to use an alternate glyph, you can create a profiles.ini file in the ./original folder to configure how the font should be built.

You can create one or more profiles. Each profile will have a set of directives. You can specify alternate glyphs for a given ligature. You can also prevent a ligature from being added.

Each profile will be listed with [profile name] (the first profile should be named default). The generated font will include the profile name. For example [Go] would generate the font: Operator Mono Lig Go. This way you can configure a different set of ligatures for each language in your favorite code editor.

# name of profile (one or more sections, first should be name default)
[default]
# glyph=altglyph
greater_equal.liga=greater_equal.2.liga

# do not include glyph (add ! prefix)
!equal_equal.liga

# another optional section (will create a font named Operator Mono Lig Go)
[Go]
... add custom directives for this font ...

😍 Thank You

Thanks to Hoefler&Co for making such an amazing font. It makes writing code truly pleasurable.

Thanks also to all of you for your kinds words of encouragement and feedback. I really appreciate it.

Contributors

Thanks goes to these wonderful people (emoji key):


Kiliman

💻 📖 🎨

Mark Skelton

🎨

Derick Rodriguez

📖

Amit Parekh

📖 🎨

NikSun

🎨

Jakob Pearson

💻

Luigi

📖

Reland Boyle

📖

This project follows the all-contributors specification. Contributions of any kind welcome!

More Repositories

1

tailwindui-crawler

tailwindui-crawler downloads the component HTML files locally
JavaScript
758
star
2

remix-flat-routes

Remix package to define routes using the flat-routes convention
TypeScript
659
star
3

remix-typedjson

This package is a replacement for superjson to use in your Remix app. It handles a subset of types that `superjson` supports, but is faster and smaller.
TypeScript
432
star
4

remix-params-helper

This package makes it simple to use Zod with standard URLSearchParams and FormData which are typically used in Remix apps.
TypeScript
238
star
5

rmx-cli

A CLI tool for Remix applications
TypeScript
178
star
6

remix-vite-template

Remix template with Vite, Tailwind CSS, and Fly.io support
TypeScript
134
star
7

shadcn-custom-theme

This tool generate a custom theme similar to the ones created by the [shadcn/ui Themes website](https://ui.shadcn.com/themes). You can specify the primary, secondary, accent, and gray colors. The color name should be one of the default Tailwind color names (e.g. red, green, blue, indigo, etc.)
JavaScript
122
star
8

remix-hydration-fix

Sample app that shows how to fix React hydration issues in a Remix app
TypeScript
112
star
9

remix-express-vite-plugin

This package includes a Vite plugin to use in your Remix app. It configures an Express server for both development and production using TypeScript.
TypeScript
101
star
10

remix-component-data

This is a proof of concept for showing how you can expose loader functions from your components to use in your routes.
TypeScript
81
star
11

remix-superjson

Sample showing how to use superjson in your Remix app and full fidelity types with inference
TypeScript
39
star
12

remix-mount-routes

Package for mounting Remix app to non-root routes
TypeScript
37
star
13

remix-scoped-params

Project showing how to track params across multiple routes by scope
TypeScript
36
star
14

remix-global-data

Example showing how to use global data in your Remix app
TypeScript
35
star
15

remix-ecommerce

Remix sample wth product catalog and shopping cart
TypeScript
32
star
16

remix-error-logging

Patch to add server side error logging support to Remix
TypeScript
23
star
17

remix-single-fetch

Remix example showing how to use new Single Data Fetch feature
TypeScript
21
star
18

remix-esbuild-analysis

Includes patch to add --metafile and bundle anaysis support to Remix compiler
15
star
19

remix-workshop

Projects used for the Remix Conf Europe Workshop
TypeScript
15
star
20

epic-stack-with-svg-sprites

Epic Stack example that shows how to use SVG sprites for your React icons
TypeScript
15
star
21

remix-server-folders

Patch to add .server extension to folder in Remix
TypeScript
14
star
22

boron-files

This app is inspired by the Carbon source-code image generator. It enables you to create and share beautiful images of your file list.
TypeScript
13
star
23

remix-vite-express

TypeScript
13
star
24

express-auth-example

TypeScript
13
star
25

epic-stack-time-zone

Epic Stack example with Time Zone client hint
TypeScript
12
star
26

kiliman-dev

TypeScript
12
star
27

remix-component-errorboundary

Example showing how to use `ComponentErrorBoundary`
TypeScript
10
star
28

strip-sourcemaps

CLI to strip server-code from sourcemaps
JavaScript
10
star
29

remix-fastify-app

Test app showing Fastify and Remix integration
JavaScript
10
star
30

remix-walletconnect

Remix example showing how to use WalletConnect with Remix
TypeScript
9
star
31

remix-suspense

Remix example showing how to ensure the Suspense fallback is rendered on route change
TypeScript
9
star
32

remix-blog-mongodb

Remix example that updates the blog tutorial to use MongoDB and Quill
JavaScript
9
star
33

remix-ras-server-example

Sample Remix App Server with custom server file
TypeScript
8
star
34

mono-symbolicate-helper

Helper service to convert obfuscated stack traces to meaningful ones using mono-symbolicate
C#
8
star
35

remix-build-error

A sample app with patches to display build errors in the browser
TypeScript
8
star
36

MvxCommandToMessage

Sample showing how to use a value converter to convert a command into a message
C#
6
star
37

remix-vite-mui

Remix+VIte+MUI example
TypeScript
6
star
38

remix-playground

TypeScript
6
star
39

remix-streams

TypeScript
4
star
40

remix-ftp-deploy

Example to show how to bundle and FTP your Remix app to a host that doesn't let you build
TypeScript
4
star
41

remix-json-fetcher

TypeScript
4
star
42

NuForVS

Nu for Visual Studio
C#
4
star
43

mvx-samples

Some sample apps for MvvmCross
C#
3
star
44

remix-upload

TypeScript
3
star
45

remix-typedjson-example

TypeScript
3
star
46

remix-flat-routes-example

Example site showing the Remix flat routes routing convention
TypeScript
2
star
47

remix-1.15.0-vercel

Remix v1.15.0 Vercel Template
TypeScript
2
star
48

remix-root-errorboundary

Remix example showing root ErrorBoundary
TypeScript
2
star
49

MicrowDB

A mini PCL version of RavenDB client for mobile. Uses SQLite.
C#
2
star
50

epic-stack-theme

Epic Stack example showing how to customize the theme using shadcn-custom-theme tool
TypeScript
2
star
51

remix-js-cookie

Sample showing how to use client-side cookies in Remix
TypeScript
2
star
52

remix-vite-2.2.0

Sample repo using unstable Vite support in Remix
TypeScript
2
star
53

remix-drawer

Example app showing Drawer navigation UI
TypeScript
2
star
54

remix-mount-routes-example

Example showing remix app mounted to non-root URL
TypeScript
1
star
55

epic-stack-kiliman

1
star
56

remix-indie-typedjson

TypeScript
1
star
57

MvxEventsSample

Sample on how to use MvvmCross MvxMessenger plugin with typed Events class
C#
1
star
58

remix-vscode-themes

1
star
59

remix-dnd

JavaScript
1
star
60

remix-docker-test

JavaScript
1
star
61

remix-vite-params

Test repo using Vite and remix-params-helper
TypeScript
1
star
62

remix-vite-2.4.1-pre.2

JavaScript
1
star
63

remix-mapbox

TypeScript
1
star
64

remix-vite-basic

Basic Remix+Vite template with React Canary
TypeScript
1
star
65

remix-custom-domain

Remix example showing how to map custom domain to route param
TypeScript
1
star