Willemstad prioritizes "readable comfort" through sophisticated typography controls designed for extended reading and writing sessions. ## Variable Line Lengths Override Obsidian's default line length controls for custom reading widths via `Settings → Style Settings → Editor → Variable Line Lengths`. **Custom Line Length Setup:** 1. Enable "Override Line Lengths" 2. Set custom maximum width (accepts any CSS unit) - `700px` - Fixed pixel width - `60ch` - Character-based width - `80%` - Percentage of pane width - `50rem` - Relative to font size **Title Integration:** - Option to fit document titles to line length - Adjusts title bottom border accordingly - Maintains visual consistency with content ## Advanced Underline System Willemstad features a sophisticated underline system for enhanced readability: ### Underline Spacing Options **Normal Text:** - 🔴 **Standard** - Classic Obsidian/Shimmering Focus style - 🟡 **Additional** - Shimmering Focus hyperlink style - 🟢 **Maximum** - Willemstad style (doesn't cross descenders) **Hyperlinks:** - 🔴 **Standard** - Classic Obsidian style - 🟡 **Additional** - Shimmering Focus style - 🟢 **Maximum** - Willemstad style (doesn't cross descenders) ### Skip Ink Feature Control whether underlines have gaps for descenders (g, j, q, p, y): - **Default** - No gaps (continuous underlines) - **Skip Ink** - Gaps around descenders for traditional typography ## Headers & Structure ### Coloured Headers Willemstad's signature feature using the three-tier accent system: **Default Behaviour:** - H1, H4 use primary accent (`--colour-accent`) - H2, H5 use secondary accent (`--colour-accent-1`) - H3, H6 use tertiary accent (`--colour-accent-2`) **Customization Options:** **Legacy Colours:** - Original Willemstad palette - Willemstad-style Nord colours **Custom Colours:** - Individual colour control for each header level - Text colour customization for optimal contrast - Complete header colour control mode ### Header Enhancements **Header Numbering:** ``` # H1 This is a heading ``` Displays as: `1 This is a heading` **Header Hex Styling:** - Smaller hash symbols for visual hierarchy - Custom colour options (text-on-accent or text-faint). - *Research is ongoing for further customisations.* - Size control relative to header text (0.1em - 0.9em) ## Highlighting System Multi-colour highlighting using Markdown syntax combinations: ```markdown ==Default highlight== *==Italics + highlight (Colour 1)==* **==Bold + highlight (Colour 2)==** ***==Bold + italics + highlight (Colour 3)==*** ``` **Colour Controls:** - Individual colour customization for each combination - Text colour override (defaults to black for contrast) - Box shadow effects (can be disabled for plugin compatibility) - Option to revert to original Obsidian colours **Default Willemstad Palette:** - **Default:** Bright yellow (`hsl(46, 100%, 50%)`) — ==text== - **Italics:** Lime green (`hsl(76, 100%, 50%)`) — *==text==* - **Bold:** Cyan (`hsl(166, 100%, 50%)`) — **==text==** - **Bold+Italics:** Light purple (`hsl(262, 44%, 82%)`) — ***==text==*** ## Codeblock Enhancements ### Language Display Options **Default:** UI font, bottom-right position ```css /* Language indicator appears here */ .code-block { /* Code content */ } ``` **Old-Style:** Monospace font, top-right position **None:** No language indicator Willemstad imports the list of supported languages from [Prism.js's own website](https://prismjs.com/#supported-languages), allowing for the correct language to be displayed at any time. ## Reading Optimization ### Empty State Customization By default, Willemstad's custom design is applied to the default empty editor screen. Options in Style Settings allow you to revert to Obsidian's default. ![[Pasted image 20250618000729.png]] ### Document Titlebar **File Header Justification:** - Left, center, or right alignment - Consistent with content alignment preferences **Stacked Tabs:** - Text direction control (left-facing or right-facing) - Text alignment options - Optimized for vertical tab arrangements