Skip to the content

Hoshi Stars星

The stars you can see without a telescope, with names, colours and distances; the 88 constellations with their lines and boundaries; the Messier objects; and seven map projections to draw them on.

Hoshi is the Japanese word 星 for a star. About the name

Contents

Reference · Names on the brightest stars and the constellation figures as faint lines, for a sky you draw yourself: a count or a magnitude, the figure under the pointer at full strength, a body that covers part of the sky, and a look set by settings alone

LabelStyletype

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 it

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

Definition

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;
}

Members

NameTypeDescription
fontstring

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.

sizenumber

The text size in pixels, 6 to 48. 11 by default.

weightnumber

The font weight, 100 to 900. 400 by default.

colourstring

The text colour, any CSS colour. A quiet white by default.

halostring

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.

haloWidthnumber

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.

letterSpacingnumber

The space added between letters, in em, -0.1 to 1. 0.14 by default.

leadernumber

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.

leaderColourstring

The colour of that line, any CSS colour. A quiet blue-white by default.

offsetnumber

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.

ringnumber

The radius in pixels of a thin ring drawn round each named star, 0 to 30, or 0 for no ring. 6 by default.

ringColourstring

The colour of the ring, any CSS colour. A quiet blue-white by default.

ringWidthnumber

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.

designationFontstring

The font family of that line. A small monospace by default.

designationSizenumber

Its size in pixels, 6 to 24. 9 by default.

designationColourstring

Its colour, any CSS colour. A quieter white by default.

Examples

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

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/hoshi-stars 0.47.0.