Pluralisation

Grammatical handling of quantities across languages.

html

<div class="plur" data-count="3" data-noun="message" data-locale="en">
  <p class="plur__label">Intl.PluralRules(&quot;en&quot;).select(3) &rarr; <span class="plur__cat">&hellip;</span></p>
  <p class="plur__value" style="color:#F5C2E0;">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".plur");
  if (!el) return;
  var count = Number(el.dataset.count);
  var noun = el.dataset.noun;
  var locale = el.dataset.locale;
  var category = new Intl.PluralRules(locale).select(count);
  var messages = {
    en: { one: count + " " + noun, other: count + " " + noun + "s" },
    ar: { zero: "no " + noun + "s", one: "one " + noun, two: "two " + noun + "s", few: count + " " + noun + "s (few)", many: count + " " + noun + "s (many)", other: count + " " + noun + "s" },
    pl: { one: count + " " + noun, few: count + " " + noun + " (few)", many: count + " " + noun + " (many)", other: count + " " + noun }
  };
  var set = messages[locale] || messages.en;
  var msg = set[category] || set.other;
  el.querySelector(".plur__cat").textContent = category;
  el.querySelector(".plur__value").textContent = msg;
})();</script>
<style>
.plur { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.plur__label { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }
.plur__cat { font-weight: 700; color: #241430; }
.plur__value { margin: 0; font-size: 20px; font-weight: 800; }
</style>

tailwind

<div class="plurtw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border" data-count="3" data-noun="message" data-locale="en">
  <p class="m-0 mb-3 font-mono text-[11px] text-[#24143099]">Intl.PluralRules(&quot;en&quot;).select(3) &rarr; <span class="plurtw__cat font-bold text-[#241430]">&hellip;</span></p>
  <p class="plurtw__value m-0 text-xl font-extrabold" style="color:#F5C2E0;">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".plurtw");
  if (!el) return;
  var count = Number(el.dataset.count);
  var noun = el.dataset.noun;
  var locale = el.dataset.locale;
  var category = new Intl.PluralRules(locale).select(count);
  var messages = {
    en: { one: count + " " + noun, other: count + " " + noun + "s" },
    ar: { zero: "no " + noun + "s", one: "one " + noun, two: "two " + noun + "s", few: count + " " + noun + "s (few)", many: count + " " + noun + "s (many)", other: count + " " + noun + "s" },
    pl: { one: count + " " + noun, few: count + " " + noun + " (few)", many: count + " " + noun + " (many)", other: count + " " + noun }
  };
  var set = messages[locale] || messages.en;
  var msg = set[category] || set.other;
  el.querySelector(".plurtw__cat").textContent = category;
  el.querySelector(".plurtw__value").textContent = msg;
})();</script>

react

import { useMemo } from "react";

export function Pluralisation({
  count = 3,
  noun = "message",
  locale = "en",
  accent = "#F5C2E0",
}) {
  const { category, message } = useMemo(() => {
    const cat = new Intl.PluralRules(locale).select(count);
    const messages = {
      en: { one: `${count} ${noun}`, other: `${count} ${noun}s` },
      ar: { zero: `no ${noun}s`, one: `one ${noun}`, two: `two ${noun}s`, few: `${count} ${noun}s (few)`, many: `${count} ${noun}s (many)`, other: `${count} ${noun}s` },
      pl: { one: `${count} ${noun}`, few: `${count} ${noun} (few)`, many: `${count} ${noun} (many)`, other: `${count} ${noun}` },
    };
    const set = messages[locale] || messages.en;
    return { category: cat, message: set[cat] || set.other };
  }, [count, noun, locale]);
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>Intl.PluralRules("{locale}").select({count}) &rarr; <span style={{ fontWeight: 700, color: "#241430" }}>{category}</span></p>
      <p style={{ margin: 0, fontSize: 20, fontWeight: 800, color: accent }}>{message}</p>
    </div>
  );
}