Italic

.github/workflows/build.yaml

@@ -1,6 +1,9 @@
 on:
   workflow_call:
     inputs:
+      download_url:
+        default: false
+        type: boolean
       check:
         default: false
         type: boolean
@@ -56,6 +59,7 @@ jobs:
       run: make build-preview
 
     - name: Upload build
+      id: build-upload-step
       uses: actions/upload-artifact@v4
       with:
         name: Lilex
@@ -74,3 +78,14 @@ jobs:
       with:
         name: Preview
         path: preview/dist
+
+    - name: Output download URL
+      if: inputs.download_url
+      run: echo "${{ steps.build-upload-step.outputs.artifact-url }}" > download_url.txt
+
+    - name: Upload URL
+      if: inputs.download_url
+      uses: actions/upload-artifact@v4
+      with:
+        name: URL
+        path: download_url.txt

CHANGELOG.md

@@ -1,6 +1,21 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## Next
+
+### Added
+
+* Italic variant.
+* Cyrillic yus (`ѫ`, `Ѫ`).
+* Spaces. (enspace, emspace, enquad, emquad, threeperemspace, fourperemspace, sixperemspace, figurespace, thinspace, mediumspace-math)
+* Replacement glyph. (`�`)
+* Cedi glyph. (`₵`)
+* Guarani glyph. (`₲`)
+
+### Fixed
+
+* Bar-hyphen alignment. (`||-`)
+
 ## [2.530] — July 27, 2024
 
 ### Added

Makefile

@@ -1,17 +1,22 @@
-# Project paths
-# BUNDLE_DIR = bundle
-BUILD_DIR = build
-REPORTS_DIR = reports
-SCRIPTS_DIR = scripts
-GLYPHS_FILE = sources/Lilex.glyphs
+# Project directories
+BUILD_DIR := build
+REPORTS_DIR := reports
+SCRIPTS_DIR := scripts
+SOURCES_DIR := sources
+
+# Font sources
+LILEX_ROMAN_SOURCE = $(SOURCES_DIR)/Lilex.glyphs
+LILEX_ITALIC_SOURCE = $(SOURCES_DIR)/Lilex-Italic.glyphs
 
 # Internal build variables
 OS := $(shell uname)
 VENV_DIR = ./venv
 VENV = . $(VENV_DIR)/bin/activate;
 
 define build-font
-	@$(VENV) python $(SCRIPTS_DIR)/lilex.py build $(1)
+	@$(VENV) python $(SCRIPTS_DIR)/font.py \
+		--config "sources/family_config.yaml" \
+		build $(1)
 endef
 
 define check-font
@@ -80,7 +85,9 @@ preview: ## show CLI special symbols preview
 
 .PHONY: generate
 generate: ## regenerate the font sources with classes and features
-	@$(VENV) python $(SCRIPTS_DIR)/lilex.py generate
+	@$(VENV) python $(SCRIPTS_DIR)/font.py \
+		--config "sources/family_config.yaml" \
+		generate
 
 .PHONY: build
 build: ## build the font
@@ -95,22 +102,6 @@ build-preview: ## build the preview
 run-preview: ## run the preview
 	cd preview; pnpm run dev
 
-# .PHONY: pack-bundle
-# pack-bundle: ## pack the bundle
-# 	rm -rf "$(BUNDLE_DIR)"
-# 	mkdir "$(BUNDLE_DIR)"
-# # Copy fonts
-# 	cp -r "$(BUILD_DIR)/"* "$(BUNDLE_DIR)/"
-# # Copy reports
-# 	cp "$(REPORTS_DIR)/"* "$(BUNDLE_DIR)/"
-# 	cd "$(BUNDLE_DIR)"; zip -r Lilex.zip ./*
-
-# .PHONY: bundle
-# bundle: ## build the bundle
-# 	@make build
-# 	@make check
-# 	@make pack-bundle
-
 .PHONY: release 
 release:
 	@make build

README.md

@@ -12,9 +12,9 @@
 <p>
 <hr>
 
-Lilex is the modern programming font containing a set of ligatures for common programming multi-character combinations.
+Lilex is an extended font on top of [IBM Plex Mono](https://github.com/IBM/plex) designed for developers. It contains ligatures, special characters (e.g. PowerLine), Greek and exists in a variable format.
 
-This is just a font rendering feature: underlying code remains ASCII-compatible. This makes it easier to read and understand the code. In some cases, the ligatures connect closely related characters (`==`, `---`), while in others they optically align the glyphs (`..`, `??`).
+Ligatures is just a font rendering feature: underlying code remains ASCII-compatible. This makes it easier to read and understand the code. In some cases, the ligatures connect closely related characters (`==`, `---`), while in others they optically align the glyphs (`..`, `??`).
 
 Compiled versions are available under [releases](https://github.com/mishamyrt/Lilex/releases). Bleeding edge builds can be downloaded in the [build](https://github.com/mishamyrt/Lilex/actions/workflows/build.yaml) workflow artifacts.
 
@@ -50,6 +50,12 @@ There are 6 font weights available in Lilex, ranging from Thin to Bold. In addit
 
 <img src="./images/[email protected]">
 
+## Italics
+
+Lilex comes with a full set of italics: all weights, ligatures, PowerLine. Lilex Italic can do everything that Lilex does.
+
+<img src="./images/[email protected]">
+
 ## Character Set
 
 The font has support for Latin, Cyrillic and Greek. It also includes ligatures and powerline symbols.

preview/src/app.css

@@ -1,6 +1,13 @@
 @font-face {
   font-family: "LilexVF";
   src: url('./variable/Lilex[wght].ttf');
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "LilexVF";
+  src: url('./variable/Lilex-Italic[wght].ttf');
+  font-style: italic;
 }
 
 :root {

preview/src/blocks/GlyphsTable/GlyphsTable.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { load, Font } from 'opentype.js'
-  import { RangeSlider, Block } from '$components'
+  import { RangeSlider, Block, SegmentSelect } from '$components'
   import { renderGlyphs } from './render'
   import Glyph from './Glyph.svelte'
+  import { loadFamily, FONT_STYLES, FONT_WEIGHTS, type FontMap, type FontWeight, type FontStyle } from './fonts'
 
-  const VARIANTS = ['Thin', 'Regular', 'Bold']
+  let fonts: FontMap = {} as FontMap
+  let selectedWeight: FontWeight = 'Regular'
+  let selectedStyle: FontStyle = 'Roman'
 
-  const fonts: Font[] = []
-  let selectedVariant = 1
   let loading = true
 
   let fontSize = 70
@@ -43,10 +43,9 @@
   }
 
   onMount(() => {
-    const requests = VARIANTS.map(v => load(`./ttf/Lilex-${v}.ttf`))
-    Promise.all(requests)
+    loadFamily('Lilex', './ttf')
       .then(masters => {
-        fonts.push(...masters)
+        fonts = masters
         loading = false
       })
 
@@ -56,27 +55,20 @@
     }
   })
 
-  $: glyphs = loading || !(selectedVariant in fonts)
+  $: glyphs = loading || !(selectedStyle in fonts && selectedWeight in fonts[selectedStyle])
     ? []
-    : renderGlyphs(fonts[selectedVariant])
+    : renderGlyphs(fonts[selectedStyle][selectedWeight])
 </script>
 
 
 {#if !loading}
 <Block title="Glyphs" dark={true}>
   <svelte:fragment slot="toolbar">
-    <RangeSlider bind:value={fontSize} min={50} max={150} />
-    <ul class="variants">
-      {#each VARIANTS as variant, i}
-        <li class="variants-item">
-          <button
-            class:active="{selectedVariant === i}"
-            on:click={() => { selectedVariant = i }}>
-            {variant}
-          </button>
-        </li>
-      {/each}
-    </ul>
+    <div class="accessor">
+      <RangeSlider bind:value={fontSize} min={50} max={150} />
+      <SegmentSelect options={FONT_STYLES} bind:value={selectedStyle} />
+    </div>
+    <SegmentSelect options={FONT_WEIGHTS} bind:value={selectedWeight} />
   </svelte:fragment>
   <div
     style:--glyph-width="{width}px"
@@ -93,25 +85,7 @@
 {/if}
 
 <style>
-  .variants-item button {
-    appearance: none;
-    font-size: 15px;
-    line-height: 15px;
-    background-color: transparent;
-    border: none;
-    background-color: transparent;
-    color: var(--color-content);
-    font-family: var(--font-family);
-    border-radius: 16px;
-    padding: 6px 15px 5px;
-    cursor: pointer;
-  }
 
-  .variants-item button.active {
-    pointer-events: none;
-    background-color: var(--color-content);
-    color: var(--color-background);
-  }
 
   .glyphs {
     --card-padding: 16px;
@@ -133,11 +107,8 @@
     transition: opacity 0s;
   }
 
-  ul {
-    list-style: none;
+  .accessor {
     display: flex;
-    padding: 0;
-    gap: 8px;
-    margin: 0;
+    gap: var(--space-2xl);
   }
 </style>

preview/src/blocks/GlyphsTable/fonts.ts

@@ -0,0 +1,60 @@
+import { load, Font } from 'opentype.js'
+
+export const FONT_WEIGHTS = ['Thin', 'Regular', 'Bold'] as const
+export const FONT_STYLES = ['Roman', 'Italic'] as const
+
+export type FontWeight = typeof FONT_WEIGHTS[number]
+export type FontStyle = typeof FONT_STYLES[number]
+export type FontMap = Record<FontStyle, Record<FontWeight, Font>>
+
+type FontVariant = {
+  font: Font
+  weight: FontWeight
+  style: FontStyle
+}
+
+function getFontName (
+  family: string,
+  style: FontStyle,
+  weight: FontWeight
+): string {
+  if (style !== 'Roman' && weight === 'Regular') {
+    return `${family}-${style}`
+  }
+  if (style === 'Roman') {
+    return `${family}-${weight}`
+  }
+  return `${family}-${weight}${style}`
+}
+
+function getFontUrl (name: string, path: string): string {
+  return `${path}/${name}.ttf`
+}
+
+async function loadVariant (
+  familyName: string,
+  weight: FontWeight,
+  style: FontStyle,
+  path: string
+): Promise<FontVariant> {
+  const name = getFontName(familyName, style, weight)
+  const url = getFontUrl(name, path)
+  const font = await load(url)
+  return { font, weight, style }
+}
+
+export async function loadFamily (name: string, path: string): Promise<FontMap> {
+  const requests = FONT_WEIGHTS.map(weight =>
+    FONT_STYLES.map(style =>
+      loadVariant(name, weight, style, path))
+  ).flat()
+  const fonts = await Promise.all(requests)
+  const map = fonts.reduce<FontMap>((map, variant) => {
+    if (!map[variant.style]) {
+      map[variant.style] = {} as Record<FontWeight, Font>
+    }
+    map[variant.style][variant.weight] = variant.font
+    return map
+  }, {} as FontMap)
+  return map
+}

preview/src/blocks/TypeTester/TypeTester.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { RangeSlider, SchemeSelect, FeatureSelector, FontPreview, Block } from '$components'
+  import { RangeSlider, SchemeSelect, FeatureSelector, FontPreview, Block, SegmentSelect } from '$components'
   import { isDark } from '$utils'
   import { INITIAL_TEXT, MAX_WEIGHT, MIN_WEIGHT } from './constants'
 
@@ -10,6 +10,7 @@
   let dark = isDark()
   let size = 70
   let features: string[] = []
+  let selectedStyle: string
 
   function handleMouseMove (e: MouseEvent) {
     const position = e.clientX
@@ -20,25 +21,27 @@
   function handleFeaturesChange (e: CustomEvent<string[]>) {
     features = e.detail
   }
+
+  $: italic = selectedStyle === 'Italic'
 </script>
 
 <Block on:mousemove={handleMouseMove} bind:dark>
   <svelte:fragment slot="toolbar">
     <div class="left-accessor">
       <RangeSlider bind:value={size} min={12} max={200} />
+      <SegmentSelect bind:value={selectedStyle} options={['Roman', 'Italic']} />
       <span class="weight">{weight.toFixed(0)}</span>
     </div>
     <SchemeSelect bind:dark />
   </svelte:fragment>
   <div class="layout">
     <div class="preview">
-      <FontPreview {weight} {size} {features} bind:value />
+      <FontPreview {italic} {weight} {size} {features} bind:value />
     </div>
     <div class="sidebar">
       <div class="feature-wrapper">
-        <FeatureSelector on:change={handleFeaturesChange} />
+        <FeatureSelector {italic} on:change={handleFeaturesChange} />
       </div>
-
     </div>
   </div>
 </Block>

preview/src/components/FeatureSelector/FeatureSelector.svelte

@@ -3,6 +3,8 @@
   import FeatureToggle from './FeatureToggle.svelte'
   import { createFeaturesContext } from './context'
 
+  export let italic: boolean
+
   let unsubscribeFeatures: () => void
 
   const dispatch = createEventDispatcher()
@@ -19,7 +21,7 @@
   })
 </script>
 
-<div class="container">
+<div class="container" style:--selector-font-style={italic ? 'italic' : 'normal' }>
   <FeatureToggle title="Alt g" symbols="g" variants={['cv02', 'cv03']} />
   <FeatureToggle title="Alt zero" symbols="0" variants={['zero', 'cv04']} />
   <FeatureToggle title="Barless units" symbols="$¢" variants={['cv09']} />
@@ -42,5 +44,6 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: var(--space-s) var(--space-m);
+    font-style: var(--selector-font-style);
   }
 </style>