Diagrammer og logiske retninger

Fra værdier til koordinater

Linjediagrammet viser, hvordan fem attributværdier kan blive til punkter og en udfyldt flade. Det er en samlet demo: fokusér først på forbindelsen fra data til position.

CSS-koordinater begynder øverst. En værdi på 69% bliver derfor til top: calc(100% - 69%), altså 31% fra toppen. shape() forbinder punkterne og lukker fladen langs bunden. Markørerne bruger de samme værdier, mens sibling-index() og sibling-count() fordeler dem vandret.

Demoens style query vælger farvekontekst; det uddybes senere i Custom by Design. Du behøver ikke forstå hele den del for at undersøge koordinaterne. De kommenterede border-shape-forsøg er ekstra eksperimenter.

Prøv: Ændr den tredje værdi. Følger både fladen, punktet og tallet med? I en rigtig graf skal punkterne også have meningsfulde labels og data som almindelig tekst; role="img" alene giver ikke en beskrivelse.

Bar Chart: Den samlede løsning

Her er den færdige løsning fra slidesforløbet samlet ét sted.

De centrale forbindelser er:

1. data-percent læses én gang i den lokale --percent.
2. Værdien styrer både søjlens block-size og farvens blandingsandel.
3. ::after læser attributten som tekst og viser procenten.
4. En container query ændrer diagrammets skriveretning, når der mangler plads.

Writing-mode og logiske egenskaber

writing-mode: sideways-rl ændrer flowets akser. Det er ikke blot en rotation af det færdige billede: layout og logiske egenskaber følger skriveretningen.

Sammenhængen i tabellen gælder vandret tekst fra venstre mod højre. Ved en anden skriveretning flytter de logiske retninger med. Derfor kan den samme block-size beskrive en lodret søjles højde og en vandret søjles længde.

Løsningens breakpoint calc((40px + 1rlh) * 8) tager udgangspunkt i otte søjlers minimumsbredde og deres margener. Hvis antallet ændres, skal både grid og breakpoint vurderes igen; formlen tæller ikke selv søjlerne.

Gitterlinjer: To varianter

Slides tegner gitterlinjer med en repeating-linear-gradient(). Løsningen bruger i stedet row-rule og rule-break mellem grid-rækkerne. Det er en nyere variant, som kræver særskilt browserunderstøttelse. Hvis linjerne mangler, er det ikke nødvendigvis søjlernes data, der fejler.

Gradient-varianten fra slides gentager en linje og et transparent område:

.bars {
  background: repeating-linear-gradient(
    var(--angle, to bottom),
    gainsboro 0 1px,
    transparent 0 25%
  );
}

Her gentages mønstret for hver fjerdedel. Gradientens fysiske retning følger ikke automatisk writing-mode; skift også --angle til to left ved det relevante breakpoint, hvis du bruger denne variant.

Kontrollér: Kan du læse værdierne ved 0%, 100% og på en smal flade? Løsningen bruger genererede labels og anonyme søjler; supplér med kategorier og almindelige tekstværdier i en færdig opgave.

MDN: Writing mode systems.