Skip to main content
SimilarExport ZIP
100%

Testing to see if I can build an Opentype Panel

✓ Published0🌍 Public
KKevinGutowski
Last edited Dec 19, 2018
Created on Dec 18, 2018

This example demonstrates how to programmatically enable OpenType font features—small caps for lowercase and uppercase letters, and old-style (lowercase) numerals—on a selected text layer in Sketch. It uses the Sketch JavaScript API via `require("sketch")` to access the selected document and text layer, then constructs a new font descriptor with `NSFontFeatureSettingsAttribute` and feature selectors like `kLowerCaseSmallCapsSelector`. The code applies the modified font at size 20 with `NSFont.fontWithDescriptor_size` and refreshes the inspector via `document.sketchObject.inspectorController().reload()`. The script relies on the `CoreText` framework and `FontSpike.js` as its execution environment.

AI-generated description

Similar vizzes

Loading thumbnail…

Attempting to set font attributes during selection

This example demonstrates how to modify font attributes of selected text within a Sketch document. It uses the Sketch JavaScript API and the CoreText framework to apply small-caps styling to the first five characters of a text layer. The script accesses the document's selected text layer, checks if it is in editing mode, then retrieves the text storage and font descriptor to construct a modified font with the small-caps feature enabled. It applies the new font attribute to the specified range and finalizes the changes with the text storage editing methods.

KKevinGutowski
75% match
Loading thumbnail…

Gist 9d6f5a0980393c12aca5243aae8947e0

This example demonstrates how to modify font attributes for a selected range of text within a Sketch document using the Sketch JavaScript API. It applies small-caps styling by accessing the text layer’s editing delegate and text storage, then constructs an `NSFontFeatureSettingsAttribute` dictionary to adjust the font descriptor. The code specifically uses `NSFontFeatureTypeIdentifierKey` and `NSFontFeatureSelectorIdentifierKey` for the `kLowerCaseType` and `kLowerCaseSmallCapsSelector` settings, then creates a new `NSFont` with `NSFontDescriptor` and applies it to the selected range via `addAttributes:range:`.

KKevinGutowski
75% match
Loading thumbnail…

Gist d491c1b772929648bf84c486fc5a745c

This sketch plugin example demonstrates modifying font attributes, specifically applying small-caps settings, to text within a selected layer in Sketch. It shows how to retrieve font information for each character range in a text layer using the Sketch API, apply a new font descriptor with the desired attribute via `NSFontDescriptor` and `NSDictionary`, and update the text storage with the modified attributes. The code relies on the `sketch` library and Sketch’s internal `NSFont` and `TextStorage` classes to perform the attribute substitution.

KKevinGutowski
72% match
Loading thumbnail…

Change font size programmatically

This example demonstrates how to programmatically change the font size of a selected text layer within a Sketch document. It shows the direct manipulation of a text layer’s typographic properties through the Sketch JavaScript API. The code uses the `sketch` library to access the document, retrieves the first selected layer, and applies a new font size using `NSFont.fontWithDescriptor_size` with a value of 12. After modifying the layer’s `_object`, it calls the inspector controller’s `reload()` method to refresh the UI and reflect the change.

KKevinGutowski
69% match
Loading thumbnail…

Insertion Blinker turned White

A Sketch plugin script demonstrates converting selected text in a text layer to small caps by modifying its font. It accesses the text layer through Sketch's DOM API and checks if the layer is in editing mode using `sketchObject.isEditingText()`. When active, it applies the new font via `textView.setFont()` and calls `didChangeText()` to refresh the view. The script builds a font descriptor with `NSFontFeatureSettingsAttribute` for lowercase small caps, using CoreText APIs like `kLowerCaseType` and `kLowerCaseSmallCapsSelector`, then creates the font with `NSFont.fontWithDescriptor_size()`.

KKevinGutowski
69% match
Loading thumbnail…

Attempting to Highlight First Letter

This Sketch plugin example demonstrates how to highlight the first letter of a selected text layer. The script calculates the bounding box of the first glyph using Sketch’s text layout APIs, including `NSTextContainer`, `NSLayoutManager`, and `boundingRectForGlyphRange`, then draws a red rectangle behind that letter. The gist creates a reusable highlight shape and removes any previous version, making it easy to re-run the code. The plugin relies on the Sketch.js library to access and manipulate the document’s layers and shapes.

KKevinGutowski
60% match
Loading thumbnail…

Creating a Sketch NSPanel

This example demonstrates how to create a custom, frameless floating panel with a vibrant, translucent background using the Sketch JavaScript API. The script creates an `NSPanel` with a titled, closable, and resizable window, and applies a `NSVisualEffectView` with a vibrant light appearance to achieve a frosted-glass effect. It uses `NSLayoutConstraint` objects to anchor the visual effect to the panel’s content view. The panel’s close button is handled via `setCOSJSTargetFunction`, which cleans up the panel reference and stops the script’s keep-alive loop.

KKevinGutowski
58% match
Loading thumbnail…

Add a dashed underline to a text layer

This example demonstrates how to apply a dashed underline to text layers in a Sketch document using the `sketch` JavaScript library. It first retrieves the selected document and filters the selected layers to only include those of type "Text". For each text layer, the script uses the `addAttribute_value` method to set the underline style to a combination of single and dot pattern, referencing the `NSUnderlineStyleSingle` and `NSUnderlineStylePatternDot` constants. The code comments list alternative underline styles and patterns available for modification.

KKevinGutowski
58% match