リファレンス · いちばん明るい星の名前と、うすい星座の線 (自分で描く空のために。個数か等級で選べます。ポインターが乗っている星座は濃く表示でき、空をおおうものにも対応し、見た目は設定だけで変えられます)

`LabelStyle`型

リファレンスの説明と例は英語です。見出しと目次は日本語です。

The look of a name drawn on the sky. Every part is a plain value, so a page can keep one in its settings, in its address or in CSS custom properties (labelStyleVars, labelStyleFrom).

インポート

import type { LabelStyle } from "@johnmorrisdotca/hoshi-stars/sky-labels";

定義

interface LabelStyle {
    font: string;
    size: number;
    weight: number;
    colour: string;
    halo: string;
    haloWidth: number;
    case: "small-caps" | "as-written" | "upper" | "lower";
    letterSpacing: number;
    leader: number;
    leaderColour: string;
    offset: number;
    ring: number;
    ringColour: string;
    ringWidth: number;
    designation: "below" | "none";
    designationFont: string;
    designationSize: number;
    designationColour: string;
}

メンバー

名前	型	説明
`font`	`string`	The font family, as CSS writes it. `Michroma, system-ui, sans-serif` by default: Michroma is the family's font for a name on a body, and the page loads it (kazoku-ui's `loadBodyLabelFont`); until it is in, the next family is used.
`size`	`number`	The text size in pixels, 6 to 48. 11 by default.
`weight`	`number`	The font weight, 100 to 900. 400 by default.
`colour`	`string`	The text colour, any CSS colour. A quiet white by default.
`halo`	`string`	The colour of the outline round the letters that keeps them readable over stars, any CSS colour, or `none` for no outline. A dark blue by default.
`haloWidth`	`number`	The width of that outline in pixels, 0 to 12. 3 by default.
`case`	`"lower" \| "upper" \| "small-caps" \| "as-written"`	`small-caps` writes the name in small capitals (the page draws it with CSS `font-variant: small-caps`), `as-written` keeps it as it is, `upper` and `lower` change the case (Japanese is not changed by any). `small-caps` by default.
`letterSpacing`	`number`	The space added between letters, in em, -0.1 to 1. 0.14 by default.
`leader`	`number`	The length in pixels of a short line from the star to its name, 0 to 80, or 0 for no line and the name set beside the star. 0 by default.
`leaderColour`	`string`	The colour of that line, any CSS colour. A quiet blue-white by default.
`offset`	`number`	The gap in pixels between the ring round a star (or the star) and its name (or its line), 0 to 40. 4 by default.
`ring`	`number`	The radius in pixels of a thin ring drawn round each named star, 0 to 30, or 0 for no ring. 6 by default.
`ringColour`	`string`	The colour of the ring, any CSS colour. A quiet blue-white by default.
`ringWidth`	`number`	The line width of the ring in pixels, 0.25 to 4. 0.75 by default.
`designation`	`"none" \| "below"`	`below` writes the star's catalogue letter (`α Ori`) in small type under its name; `none` leaves it out. A star with no Bayer letter or Flamsteed number has none to write. `below` by default.
`designationFont`	`string`	The font family of that line. A small monospace by default.
`designationSize`	`number`	Its size in pixels, 6 to 24. 9 by default.
`designationColour`	`string`	Its colour, any CSS colour. A quieter white by default.

例

import { labelStyle, type LabelStyle } from "@johnmorrisdotca/hoshi-stars/sky-labels";

const style: LabelStyle = labelStyle({ case: "upper", letterSpacing: 0.12 });
console.log(style.size, style.case);

11 upper

出力（このページを作ったときに実行した結果）

ソースを見る GitHub で編集@johnmorrisdotca/hoshi-stars 0.47.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。

LabelStyle型

定義

メンバー

例

`LabelStyle`型