Simple Memo for Wear OS keeps your essential information just a glance away on your smartwatch. Perfect for remembering gym locker combinations, parking spot numbers, temporary door codes, room numbers, or meeting PINs.

This lightweight app lets you quickly note down and edit a single piece of important information right on your Wear OS watch. Access your memo instantly through the app, a customizable watch face complication, or a convenient Wear OS tile.

Key Features

• Flexible keyboard options: Choose between number pad, full text, email, and more input methods
• Quick access tile: View your memo directly from your watch face swipe
• Watch face complications: Keep your note visible at all times
• Edit history: Track your last 10 changes

The perfect companion for those moments when you need to remember just one crucial detail.

If you have any bug report or feedback, feel free to share it on GitHub.

Simple Memo appeared first on 1A23 Studio.

oare n. [o.ˈa.ɾɛ] moon

Oare Sans is a condensed geometric display sans-serif typeface with variable axes for weight and slant. This typeface is an expansion of the custom logotype created for PSCTF from a limited set of letters to cover the GF Latin Core character set, and with variable expansion from Thin to Black and Regular to Oblique. This design was initiated from the desire to create a typeface that would match the initial design of the unconventional letter shapes of S and C. The name “Oare” is also named after the Luna CTFd theme commissioned by the same team.

OpenType Features

• Kerning kern, Ligautures liga, Ordinals ordn, Glyph Composition/Decomposition ccmp
• Localized Forms locl: Moldavian MOL, Romanian ROU, Turkish TUR, Dutch NLD, and Catalan CAT
• Stylistic Sets
  • ss01: Alternative J
  • ss02: Single story a
  • ss03: Alternative S and 5 (Symmetrical S)
  • ss04: Alternative S and 5 (Asymmetrical S)

Preview

Copyright (c) 2026 Eana Hufwe, 1A23 Studio (https://1A23.studio)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is in this repo LICENSE.md, and is also available with a FAQ at:
https://openfontlicense.org

Oare Sans appeared first on 1A23 Studio.

mìkam adp. [mɪ.ˈkam] between.

みっかん 3⃞ 〔mìkam〕（両者）の間に。

Mìkam Kana is a Japanese Kana font built from a patchwork of Inter, to design Japanese Hiragana and Katakana characters that resemble the appearance of Latin-Cyrillic-Greek letters in a Neo-Grotesque Sans-Serif style. The inspiration of the font is to develop a reverse font of Electroharmonix, a font that designs Latin letters in a style that resembles the appearance of Japanese Hiragana and Katakana characters. It is known as the font that “only Japanese people can’t read”. Despite the fact that Mìkam Kana is conceptually a reverse font of Electroharmonix, due to the fact that most Japanese speakers can also read Latin alphabets, Mìkam Kana has ended up being an “exotic and cryptic” font.

The name Mìkam, which means “between”, is both a reference to the fact that the font is designed to be a “between” of Latin and Japanese characters, and also a reference to the name of the base font Inter.

『みっかん』は、Inter のもとにつぎはぎして作られた、ローマ字ゴシック体風の仮名フォントである。インスピレーションは、カタカナに見えるローマ字フォントで、かの有名な「日本人だけが読めないフォント」として知られている Electroharmonix の逆バージョンのようなフォントを作りたかったのですが、いかんせん日本語話者は皆おおむねローマ字も読めるため、普通に暗号フォントのようなものを作ってしまいました。

フォント名の「みっかん」は、「両者の間に」（between）という意味で、フォントがローマ字と仮名の「間」に位置することを表すとともに、ベースフォントである Inter へのオマージュでもあります。

Glyph Coverage 収録範囲

This font covers most hiragana, katakana, and selected punctuation characters.
Recommended pairing fonts: Inter, Gen Interface JP, Source Han Sans.

このフォントは、ひらがな、カタカナ、および一部の約物を収録しています。
推奨の混植フォント：Inter、Gen Interface JP、源ノ角ゴシック。

Preview

License ライセンス

Copyright (c) 2026 Eana Hufwe, 1A23 Studio (https://1A23.studio)
Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is in this repo LICENSE.md, and is also available with a FAQ at:
https://openfontlicense.org

このフォントソフトウェアは、SIL Open Font License, Version 1.1 のもとでライセンスされています。
このライセンスはこのリポジトリの LICENSE.md に記載されており、FAQ とともに https://openfontlicense.org にも公開されています。

Mìkam Kana みっかん appeared first on 1A23 Studio.

A notepad calculator where math just works. Type expressions, see results instantly.

Features

Arithmetic & Numbers

• Basic math with +, -, *, /, ^, !, mod, and parentheses
• Alternative operators: ×, ·, ÷
• Percentages (50%, 200 * 15%), scientific notation, underscore separators
• Hex (0xFF), binary (0b1010), octal (0o777), arbitrary bases (ABC base 16)
• Built-in constants (pi, e, phi) and functions (sin, cos, sqrt, log, round, abs, random, …)

Units & Conversions

• 200+ built-in units across length, mass, time, temperature, data, energy, power, pressure, frequency, angle, and more
• Automatic cross-unit arithmetic: 5 km + 500 m, 100 ft^2 + 5 m^2
• Derived units: 60 km/h, 9.8 m/s^2, 50 watts per square meter
• Composite values: 5 ft 7 in, 2 hr 30 min 15 sec
• Flexible conversion syntax: to, in, as, ->, →
• Composite conversion targets: 171 cm to ft in
• User-defined units: 150 apples / 30 apples/day

Date & Time

• Date literals, relative dates (today, 3 days ago, 2 weeks from now)
• Time values in 12h/24h format
• Date arithmetic: now + 100 days, 2038 Jan 19 - today
• Timezone conversions: 18:30 Tokyo, now in London, UTC offsets
• Unix timestamps: 1700000000 unix
• Property extraction: today to weekday, now to hour

Currency

• ISO codes, symbols, and names with live exchange rates
• Arithmetic and conversion: 100 USD + 50 EUR, 100 USD to JPY
• Derived currency units: 150 USD/person * 4 person

Variables & Conditionals

• Variable assignment: price = 49.99
• Boolean expressions: comparisons, &&, ||, !
• Conditionals: if 5 > 3 then 100 else 200
• Bitwise operations: &, |, xor, ~, <<, >>

Output Formats

• Number bases (to hex, to binary), fractions, scientific notation, percentages, ordinals
• Precision control: pi to 2 decimals, 12345 to 3 sig figs
• Date/time formats: ISO 8601, RFC 2822, RFC 9557, unix timestamps

Editor

• Markdown headings and inline comments (#)
• GFM syntax highlighting alongside live calculations
• Customizable themes, fonts, number/date formatting, and more

Holpxay Calculator appeared first on 1A23 Studio.

A web tool to check codepoint / glyph coverages of a font. Capable of checking coverage of the following collections:

• Codepoints
  • Unicode Blocks
  • Unicode Script Extensions
  • China Encodings (GB/T 2312, GB/T 12345, GBK)
  • China Foundries (方正字库, 汉仪字库)
  • China Standards (《通用规范汉字表》, 《义务教育语文课程常用字表》, 《现代汉语常用字表》, 《现代汉语通用字表》, 《古籍印刷通用字規範字形表》)
  • Japan Encodings (JIS X 0208, JIS X 0212, JIS X 0213:2004, Shift-JIS)
  • Japan JIS (JIS 第一水準, JIS 第二水準, JIS 第三水準, JIS 第四水準)
  • Japan Kyoiku Kanji (学年別漢字配当表)
  • Japan Kanken (日本漢字能力検定 級別漢字表)
  • Japan Joyo Kanji (常用漢字, 人名用漢字)
  • Taiwan Encodings (Big5)
  • Taiwan Standards (《常用國字標準字體表》, 《次常用國字標準字體表》, 《臺灣客家語常用詞辭典》, 《臺灣閩南語常用詞辭典》)
  • Hong Kong (《常用字字形表》, 《香港小學學習字詞表》, 《香港增補字符集》, 《常用香港外字表》)
  • Korean Encodings (Code page 949, KS X 1001)
• Glyphs (unstable)
  • Adobe Latin
  • Adobe Greek
  • Adobe Cyrillic
  • Adobe Arabic
  • Adobe CMAP (Adobe CNS1-7, Adobe GB1-6, Adobe Japan1-7, Adobe KR-9, Adobe Manga1-0)
  • GF Latin
  • GF Greek
  • GF Cyrillic
  • GF Arabic
  • GF Phonetics
  • GF TransLatin
  • JF (jf 7000 當務字集)

Font coverage analyzer appeared first on 1A23 Studio.

Photo by Pascal Debrunner on Unsplash
Typefaces: Birthstone Bounce, The Nautigal

Have a wonderful 2026! appeared first on 1A23 Studio.

Here’s a small but fun use case for CSS Anchor Positioning, using it to keep multiple labels around a progress bar readable, without touching JavaScript.

The goal is simple: we have a horizontal progress bar with three labels: one on the left, one on the right, and one that should follow the progress “tip”. We want that center label to sit as close as possible to the current progress, but never overlap with either side label.

To make things easier, we’ll assume:

• Only the center label needs to move dynamically, the side labels stay at their ends.
• The progress bar is wide enough to fit all three labels with some spacing.

Describing the layout as rules

Instead of hard-coding coordinates, it helps to think in terms of a small set of layout rules the browser can try in order.

For the center label, the logic can be written as:

1. Try placing the center label to the left of the progress tip, with a margin.
2. If that would overlap something, try placing it to the right of the progress tip, also with a margin.
3. If the tip is already too close to another label, place the center label next to that label instead, with a wider margin to keep everything readable.

CSS Anchor Positioning is very good at this style of “try a few positions until one fits” layout. The @position-try at-rules let us declare those strategies explicitly and let the browser pick whichever one does not collide with the container or other constraints.

In this example, I use three named anchors:

• --prog-bar: the progress bar itself (specifically, its right edge as the “tip”)
• --left-label: the fixed label on the left
• --right-label: the fixed label on the right.

The moving center label is then positioned relative to these anchors.

Defining @position-try strategies

Here are the two position-try rules that implement the logic above:

1
@position-try --bar-left {
2
  position-area: none;
3
  right: max(
4
    calc(anchor(--prog-bar right) + var(--container-padding)),
5
    calc(anchor(--right-label left) + var(--label-gap))
6
  );
7
  margin-left: calc(
8
    var(--container-padding) + anchor-size(--left-label width) +
9
      var(--label-gap)
10
  );
11
}
12

13
@position-try --bar-right {
14
  position-area: none;
15
  left: max(
16
    calc(anchor(--prog-bar right) + var(--container-padding)),
17
    calc(anchor(--left-label right) + var(--label-gap))
18
  );
19
  margin-right: calc(
20
    var(--label-gap) + anchor-size(--right-label width) +
21
      var(--container-padding)
22
  );
23
}

Conceptually:

• --bar-left corresponds to “try to sit just to the left of the progress tip”.
• --bar-right corresponds to “otherwise, sit just to the right of the progress tip”.

The “third rule” (move next to whichever label is closer) is effectively folded into the max() expressions:

• For right / left we take the maximum of:
  • the tip position plus container padding, and
  • the neighbouring label plus a label gap.

This means:

• If there’s plenty of room, the center label hugs the progress tip.
• If the tip is about to collide with a side label, the center label gets pushed away so that it sits beside that label instead, maintaining at least var(--label-gap) of space.

Avoiding overlap with anchor-size()

The margins are where the overlap-avoidance really happens.

Take this line as an example:

1
margin-left: calc(
2
  var(--container-padding) + anchor-size(--left-label width) +
3
    var(--label-gap)
4
);

Here we:

• Read the actual width of the left label via anchor-size(--left-label width).
• Add the container’s padding and a label gap.
• Use that as the center label’s margin, so its text always clears the left label by at least that gap.

In other words, instead of guessing spacing with hard-coded numbers, we attach the spacing directly to the real measured size of the anchors. That’s exactly the kind of thing anchor-size() is designed for.

The same idea is used for margin-right with the right label.

Putting it together

Once the @position-try rules are defined, the center label simply opts in to them, for example:

1
.label.center {
2
  position: absolute;
3
  top: var(--container-padding);
4
  position-try: --bar-left, --bar-right;
5
  position-anchor: --prog-bar;
6
  position-area: left;
7
}

The browser will then:

1. Try --bar-left.
2. If that would cause an overlap or violate constraints, fall back to --bar-right.

Combined with the max() insets and anchor-size()-based margins, that’s enough to:

• Keep the center label near the progress tip,
• Prevent it from overlapping either side label,
• Adjust spacing automatically if label text length changes,
• Do all of this with zero JavaScript.

The full implementation – including the anchors and layout container – is in the CodePen embed above.

Browser support

CSS Anchor Positioning is still relatively new, and support is rolling out across browsers. Before using this technique in production, it’s worth checking current support status or adding a progressive enhancement fallback.

You can use the Baseline widget below to see the latest support details for anchor positioning across engines, and upvote the feature you want to see become interoperable across major browsers:

Progress Bar Labels with CSS Anchor Positioning appeared first on 1A23 Blog.

A bundle of recipes I wrote for TRMNL, an e-ink dashboard display.

Wikipedia Article of the Day

A TRMNL plugin that fetches and displays the Wikipedia article of the day in multiple languages.

Learn More Install

Random Unicode

A random Unicode codepoint on each refresh. Data powered by codepoints.net.

Learn More Install

Random MDN Article

A random MDN Web article on each refresh.

Learn More Install

World clock

A digital world clock shows up to 7 time zones. Inspired by World Time Buddy and Windows 11 World Clock.

Learn More Install

Lyricova Quote

Show a random quote from Lyricova on each refresh.

Learn More Install

Random Zi

A random CJKV ideograph with pronunciations, definitions, and regional glyphs on each refresh. Data powered by zi.tools 字統网.

Learn More Install

Random Google Fonts

A random typeface from Google Fonts on each refresh.

Learn More Install

Public Recipe Stats

Shows connection statistics of public recipes. You can choose to show the latest, search for keywords, show your own recipes, or show selected recipe IDs. Data powered by TRMNL Recipes API.

Learn More Install

Tatoeba

A random sentence in your chosen languages with translations. Data powered by Tatoeba.

Learn More Install

Slickdeals Frontpage

Slickdeals Frontpage and Popular deals. Data from Slickdeals RSS feed.

Learn More Install

Word Clock 日本語

Word clock in Japanese. Supports 24-hour and 12-hour formats, with a maximum display precision of 5 minutes (depending on recipe and device update frequency).

Learn More Install

Word Clock 中文

Word Clock in Chinese. Supports 24-hour and 12-hour formats, as well as Simplified and Traditional Chinese. The highest precision is 5 minutes (determined by the plugin and device refresh rate).

Learn More Install

Sunrise and Sunset Chart

Sunrise and sunset time with a daily and yearly chart.

Learn More Install

TRMNL recipies appeared first on 1A23 Studio.

While working on the WordPress theme Tìtsyul Amip Twenty Twenty-Five, a need arose for a more flexible way to implement rotated background patterns in CSS. Existing methods often involve trade-offs, and this exploration led to a technique leveraging the power of SVG.

Existing Approaches and Their Limitations

Traditionally, achieving rotated background images in CSS has involved several workarounds, each with its own set of challenges:

• CSS Transforms: Using the transform: rotate() property. This rotates the entire element, including its content, which is often not the desired outcome.
• Pseudo-elements: Employing ::before or ::after pseudo-elements to create a rotated background. While this allows rotating the background independently of the content, it can be complex to manage sizing and positioning. Additionally, if the html or body elements have a background color, pseudo-elements with a negative z-index may fall behind them.
• Pre-rotated Images: Rotating the image using image editing software and then using the rotated image as the background. This is impractical for seamless patterns in most rotation angles or when dynamic canvas size is required.

The SVG Pattern Technique

Building on these insights, let’s now explore a method that leverages SVG to achieve rotated background patterns—a solution that delivers both flexibility and precise control.

At the core of this approach is the SVG <pattern> feature, a versatile tool that enables the creation of seamless, repeating background patterns. The <pattern> element defines a tileable area that can be used as a fill for other SVG shapes, allowing for intricate and scalable designs. By leveraging attributes such as patternTransform, you can easily manipulate these patterns with transformations like rotation, scaling, and translation, making it an ideal choice for dynamic and responsive backgrounds.

Draw the Pattern Using SVG ⸻ Begin by creating the desired pattern using SVG elements. This can include vector graphics or embedded bitmaps.

<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />

Wrap in a <pattern> Definition ⸻ Encapsulate the pattern within a <pattern> element inside the <defs> section of the SVG, specify the dimensions for the pattern, and use the patternTransform attribute to apply transformations, such as rotation.

<defs>
  <pattern id="star" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(20)">
    <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
  </pattern>
</defs>

Create the Main SVG ⸻ Create a new SVG element without a viewBox attribute. Set the width and height to 100% to ensure it covers the entire area of the element. Then add a <rect> element to cover the entire SVG area, and set its fill attribute to reference the pattern defined in step 2.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="star" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(20)">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#star)" />
</svg>

Encode and Use in CSS ⸻ Encode the SVG as a data URL. Use the data URL as the background-image in your CSS.

div {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='star' width='10' height='10' patternUnits='userSpaceOnUse' patternTransform='rotate(20)'%3E%3Cpolygon points='0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23star)' /%3E%3C/svg%3E");
}

Using this technique, the pattern background can be transformed on its own, while still behave like any other CSS background to enjoy other features like background stacking and blend mode settings.

SVG Rotated Background Generator

You can also try it out using the generator below to create custom rotated background patterns with SVG. You can also adjust parameters such as pattern size, scaling, and rotation angle.

Rotated Background Patterns in CSS with SVG appeared first on 1A23 Blog.

Tìtsyul Amip Twenty Twenty-Five is the next iteration of the 1A23 Studio theme. Similar to the previous iteration, E. R. @ Tìtsyul Amip, it still runs on WordPress. However, this time, since WordPress (Gutenberg) Site Editor is now relatively established, I decided to base off the new theme from the current default WordPress theme, Twenty Twenty-Five, hence the name.

Challenges

Despite the Site Editor gives you an almost WYSIWYG experience, with a wide range of established blocks ready to use, the downside is that those blocks are not as flexible as traditional WordPress architecture. Much less hooks and filters are made available in the built-in blocks making it harder to extend upon. With that, I had to rewrite (or rather copy-and-paste from Gutenberg) various built-in blocks for extensions. These are:

• Reusable header and footer patterns background that recognizes the custom post types of the current page, based on the Group block.
• Buttons and Button blocks with Iconify icon support and custom active page detection to serve as an alternative to the Navigation block.
• Page Number block to render the current page number, based on the Pagination Pages block.
• Next Page and Previous Page buttons with added icon, based on the built-in blocks with the same name.
• Links list to show links field of custom post types.
• Lyricova Quotes to render a random verse from Lyricova that has been in the site footer since forever ago.
• Major-Minor Conditional Block and Landscape-Portrait Conditional Block to render a set of children blocks based on the Is Minor field of custom post types and the aspect ratio of the post’s featured image.

These blocks are packed as a plugin to be used together with the theme.

On top of that are CSS styles for everything that is not covered by Gutenberg’s style editor (which is quite a lot).

Tìtsyul Amip Twenty Twenty-Five appeared first on 1A23 Studio.