Skip to main content
Home
Browse packagesDocsSign in
This release is 9 versions behind 13.6.0 — the latest version of @celine/libertine. Jump to latest

@celine/libertine@10.1.0
Built and signed on GitHub Actions

MaxwellBo/celine

@celine/libertine is a a drop-in stylesheet based around the Linux Libertine typeface

This package works with BrowsersIt is unknown whether this package works with Cloudflare Workers, Node.js, Deno, Bun
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
It is unknown whether this package works with Deno
It is unknown whether this package works with Bun
This package works with Browsers
JSR Score
64%
Published
4 months ago (10.1.0)
Package root>index.html
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@celine/libertine</title>

  <meta name="description" content="A drop-in stylesheet based around the Linux Libertine font family, one common in academic publishing.">
  <meta name="author" content="Max Bo">
  <meta name="keywords" content="stylesheet, font, Linux Libertine, CSS, web development">
  <meta name="robots" content="index, follow">

  <meta property="og:title" content="@celine/libertine">
  <meta property="og:description" content="A drop-in stylesheet based around the Linux Libertine font family, one common in academic publishing.">
  <meta property="og:url" content="https://maxbo.me/celine/libertine/">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Max Bo">

  <meta name="twitter:card" content="summary">
  <meta name="twitter:creator" content="@_max_bo_">
  <meta name="twitter:title" content="@celine/libertine">
  <meta name="twitter:description" content="A drop-in stylesheet based around the Linux Libertine font family, one common in academic publishing.">
  <meta name="twitter:card" content="summary_large_image">

  <meta name="theme-color" content="#ffffff">
  <link rel="apple-touch-icon" sizes="180x180" href="../static/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="../static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="../static/favicon-16x16.png">
  <link rel="manifest" href="../static/site.webmanifest">

  <link rel="stylesheet" href="../libertine/libertine.css">
  <link rel="stylesheet" href="../celine/cell.css">

  <script type="module">
    import { CelineModule, registerScriptReevaluationOnBlur } from 'https://esm.sh/jsr/@celine/celine@4.1.0';
    import * as Inputs from 'https://esm.run/@observablehq/inputs@0.12.0';
    import * as htl from 'https://esm.run/htl@0.3.1';

    window.celine = CelineModule.usingNewObservableRuntimeAndModule(document);
    window.library = celine.library; /* @observablehq/stdlib */
    window.Inputs = Inputs;
    window.htl = htl;

    registerScriptReevaluationOnBlur(document, /*class=*/'echo');
  </script>
</head>
<body>
  <main>
  <div style="text-align: right; text-decoration: none; font-family: 'Libertinus Sans', sans-serif;">
    <a style="text-decoration: none;" href="../index.html">/celine</a>,
    <a style="text-decoration: none;" href="../bibhtml/index.html">/bibhtml</a>
  </div>
  <h1>@celine/libertine</h1>
  <div class="authors">
    <div class="author">
      <span class="author-name"><a href="https://maxbo.me">Max Bo</a></span> 
    </div>
  </div>

  <div class="abstract">
    <p><cite>@celine/libertine</cite> is a <a href="https://dohliam.github.io/dropin-minimal-css/">drop-in stylesheet</a> based around the <a href="https://en.wikipedia.org/wiki/Linux_Libertine">Linux Libertine</a> font family.</p>

    <p>Linux Libertine is common in academic typesetting - it's the <abbr title="lmao: 'Fonts used in the template CANNOT be substituted; margin adjustments are not allowed.'">mandatory</abbr> font for the <a href="https://www.acm.org/publications/proceedings-template">ACM LaTeX</a> conference paper theme, the default for <a href="https://typst.app/">Typst</a> and <a href="https://nota-lang.org/">Nota</a> papers, and an alternate font for <a href="https://latex.vercel.app/">LaTeX.css</a>.
  </div>

  <table>
    <tbody>
      <tr>
        <th>GitHub</th>
        <td class="width-auto"><a href="https://github.com/MaxwellBo/celine/tree/master/libertine">MaxwellBo/<wbr>celine</a><span id="stars"></span> + <a href="https://github.com/MaxwellBo/celine/issues">/issues</a> </td> 
        <th class="width-min">License</th>
        <td><a href="https://github.com/MaxwellBo/celine/blob/master/LICENSE">MIT</a></td>
      </tr>
      <script type="module">
        // ping the GitHub API for the number of stars
        fetch("https://api.github.com/repos/MaxwellBo/celine")
          .then(d => d.json())
          .then(resp => {
            const stars = resp.stargazers_count;
            document.getElementById("stars").textContent = ` (⭐ ${stars})`;
          })
      </script>
      <tr>
        <th>JSR</th>
        <td class="width-auto"><a href="https://jsr.io/@celine/libertine">jsr.io/<wbr>@celine/<wbr>libertine</a> + <a href="https://jsr.io/@celine/libertine/doc">/docs</a></td>
        <th>Version</th>
        <td class="width-min"><a href="https://jsr.io/@celine/libertine/versions" id="version">10.1.0</a>, <time  id="updated">Nov 29 2024</time></td>
      </tr>
      <script type="module">
        fetch("https://npm.jsr.io/@jsr/celine__libertine")
          .then(d => d.json())
          .then(resp => {
            const latestVersion = resp["dist-tags"].latest;
            document.getElementById("version").textContent = latestVersion;
            const date = new Date(resp.time[latestVersion]);
            const formattedDate = `${date.toLocaleString('default', { month: 'short' })} ${date.getDate()} ${date.getFullYear()}`;
            document.getElementById("updated").textContent = formattedDate;
          })
      </script>
    </tbody>
  </table>

<h2><a href="#installation" id="installation"></a>Installation</h2>

<p>You can import <cite>@celine/libertine</cite> with:</p>
<pre class="echo" style="margin-bottom: 1ch;" id="import">
&lt;link 
  rel=&quot;stylesheet&quot; 
  href=&quot;https://esm.sh/jsr/@celine/libertine@10.1.0/libertine.css&quot; /&gt;
</pre>

<h2><a href="#fonts" id="fonts"></a>Fonts</h2>

<p>I lied a little in the abstract. <cite>@celine/libertine</cite> actually uses the more maintained <a href="https://github.com/alerque/libertinus"><cite>Libertinus font family</cite></a> fork.</p>

<p>The <a href="fonts/Libertinus/documentation/libertinus.css">libertinus.css</a> stylesheet provides authoritative documentation on the available font faces, variants, and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide">OpenType features</a>, with <a href="fonts/Libertinus/documentation/Opentype-Features.pdf">Opentype-Features.pdf</a> as a demo page.</p>

<p><code>font-feature-settings: 'liga', 'tnum', 'zero' 'calt';</code> (ligatures, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric">tabular figures</a>, slashed zero &amp; contextual alternatives) are enabled by default.</p>

<blockquote>
fi fl ffi ffl
<br />
1234567890
<br />
Quest, (staff)
<br />
H<sub>2</sub>O, E = mc<sup>2</sup>
</blockquote>

<p><a href="fonts/Libertinus/documentation/libertinus.css">libertinus.css</a> makes a number of fonts available:</p>

<blockquote style="font-family: 'Libertinus Serif', serif;">
  Libertinus Serif<br />
  Sphinx of black quartz, judge my vow.<br />
  <i>Sphinx of black quartz, judge my vow.</i><br />
  <b>Sphinx of black quartz, judge my vow.</b><br />
  <i><b>Sphinx of black quartz, judge my vow.</b></i><br />
  <span style="font-variant: small-caps;">Small caps.</span><br />
  <span style="font-variant: all-small-caps;">All small caps.</span><br />
</blockquote>

<blockquote style="font-family: 'Libertinus Sans', sans-serif;">
  Libertinus Sans<br />
  Sphinx of black quartz, judge my vow.<br />
  <i>Sphinx of black quartz, judge my vow.</i><br />
  <b>Sphinx of black quartz, judge my vow.</b><br />
  <i><b>Sphinx of black quartz, judge my vow.</b></i><br />
  <span style="font-variant: small-caps;">Small caps.</span><br />
  <span style="font-variant: all-small-caps;">All small caps.</span><br />
</blockquote>

<blockquote style="font-family: 'Libertinus Display', serif;">
  Libertinus Display<br />
  Sphinx of black quartz, judge my vow.<br />
  <i>Sphinx of black quartz, judge my vow.</i><br />
  <b>Sphinx of black quartz, judge my vow.</b><br />
  <i><b>Sphinx of black quartz, judge my vow.</b></i><br />
</blockquote>

<blockquote style="font-family: 'Libertinus Mono', monospace;">
  Libertinus Mono<br />
  Sphinx of black quartz, judge my vow.<br />
  <i>Sphinx of black quartz, judge my vow.</i><br />
  <b>Sphinx of black quartz, judge my vow.</b><br />
  <i><b>Sphinx of black quartz, judge my vow.</b></i><br />
</blockquote>

<blockquote style="font-family: 'Libertinus Initials', serif;">
  Libertinus Initials<br />
  ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
  <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ</i><br />
  <b>ABCDEFGHIJKLMNOPQRSTUVWXYZ</b><br />
  <i><b>ABCDEFGHIJKLMNOPQRSTUVWXYZ</b></i><br />
</blockquote>

<blockquote style="font-family: 'Libertinus Math', serif;">
  Libertinus Math<br />
  E = mc²<br />
  ∫ₐᵇ f(x) dx<br />
  ∑ₙ₌₁^∞ 1/n² = π²/6<br />
  ∇·E = ρ/ε₀<br />
</blockquote>

<blockquote style="font-family: 'Libertinus Keyboard', monospace;">
  Libertinus Keyboard<br />
  <br />
  Esc F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 Del<br/>
  `1234567890-= Back<br/>
  Tab QWERTYUIOP[]\<br />
  Capslock ASDFGHJKL;' Enter<br />
  Shift ZXCVBNM,./ Shift<br />
  Ctrl Windows Alt Space Alt Fn ← ↑ ↓ →<br />
</blockquote>

<p><a style="font-variant: small-caps" href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps">Small caps</a> are available on Libertinus Serif and <span style="font-family: 'Libertinus Sans', sans-serif;">Libertinus Sans</span>:</p>

<style>
  #smallcaps-table td:nth-child(2) {
    max-width: 600px;
  }

  @media (max-width: 600px) {
    #smallcaps-table {
      display: block;
      width: 100%;
      overflow-x: auto;
    }

    #smallcaps-table td {
      display: block;
      width: 100%;
    }

    #smallcaps-table td:first-child {
      max-width: none;
    }
  }
</style>

<div id="ssc" style="font-variant: small-caps;">
  Small caps
</div>

<script type="module" id="sscdisplay">
  celine.cell("sscdisplay", () => {
    const elem = document.getElementById("ssc");
    elem.removeAttribute("id");
    return htl.html`<span class='echo'>${elem.outerHTML}</span>`;
  });
</script>

<div id="sac" style="font-variant: all-small-caps;">
  All small caps
</div>

<script type="module" id="ssacdisplay">
  celine.cell("ssacdisplay", () => {
    const elem = document.getElementById("sac");
    elem.removeAttribute("id");
    return htl.html`<span class='echo'>${elem.outerHTML}</span>`;
  });
</script>

<div id="sssc" style="font-family: 'Libertinus Sans'; font-variant: small-caps;">
  Small caps
</div>

<script type="module" id="ssscdisplay">
  celine.cell("ssscdisplay", () => {
    const elem = document.getElementById("sssc");
    elem.removeAttribute("id");
    return htl.html`<span class='echo'>${elem.outerHTML}</span>`;
  });
</script>

<div id="ssasc" style="font-family: 'Libertinus Sans'; font-variant: all-small-caps;">
  All small caps
</div>

<script type="module" id="ssascdisplay">
  celine.cell("ssascdisplay", () => {
    const elem = document.getElementById("ssasc");
    elem.removeAttribute("id");
    return htl.html`<span class='echo'>${elem.outerHTML}</span>`;
  });
</script>

<h2><a href="#classes" id="classes"></a>Classes</h2>

<div id="authors" class="authors">
  <div class="author">
    <span class="author-name">Jane Doe,</span> <span class="author-affiliation">University of Wollongong</span>
  </div>
  <div class="author">
    <span class="author-name">John Smith,</span> <span class="author-affiliation">University of Townsville</span>
  </div>
</div>

<script type="module" id="innerauthors">
  celine.cell("innerauthors", () => {
    const elem = document.getElementById("authors");
    elem.removeAttribute("id");
    return htl.html`<span class='echo'>${elem.outerHTML}</span>`;
  });
</script>


<div id="abstract" class="abstract">
  This is an abstract.
</div>

<script type="module" id="innerabstract">
  celine.cell("innerabstract", () => {
    const elem = document.getElementById("abstract");
    elem.removeAttribute("id");
    return htl.html`<span class='echo'>${elem.outerHTML}</span>`;
  });
</script>

<br />
<br />

<div id="favicon-group">
  <a href="https://google.com"><img class="favicon" src="https://google.com/favicon.ico" /> Google</a>,
  <a href="https://github.com"><img class="favicon" src="https://github.com/favicon.ico" /> GitHub</a>
</div>

<script type="module" id="favicon">
  celine.cell("favicon", () => {
    const elem = document.getElementById("favicon-group");
    elem.removeAttribute("id");
    return htl.html`<span class='echo'>${elem.outerHTML}</span>`;
  });
</script>

<h2><a href="#elements" id="elements"></a>Elements</h2>

<p>
  <code>&lt;main&gt;</code> applies a <code>max-width</code> and <code>margin: 0 auto</code> to center content.
</p>

<p>
  <abbr>&lt;abbr&gt;</abbr> is used to display an abbreviation.
</p>

<p>
  <code>&lt;code&gt;</code> is used to display inline code.
</p>

<p>
  <kbd>&lt;kbd&gt;</kbd> is used to display keyboard buttons.
</p>

<blockquote>
  &lt;blockquote&gt; is used to display a blockquote.
</blockquote>

<aside>
  &lt;aside&gt; is used to display content related to the main content.
</aside>

<figure>
  <img src="https://via.placeholder.com/150" alt="Placeholder image">
  <figcaption>This is &lt;figcaption&gt; in a &lt;figure&gt;.</figcaption>
</figure>

<pre>
  &lt;pre&gt; is used to display preformatted text.
</pre>

<pre>
<code>&lt;code&gt; inside of a &lt;pre&gt; has syntax highlighting
console.log("Hello, world!");</code>
</pre>

<h3><a id="silcrow" href="#silcrow"></a>Headers / silcrow</h3>

<div id="silcrow-container"><h1><a id="h1" href="#h1"></a>h1</h1>
<h2><a id="h2" href="#h2"></a>h2</h2>
<h3><a id="h3" href="#h3"></a>h3</h3>
<h4><a id="h4" href="#h4"></a>h3</h4>
<h5><a id="h5" href="#h5"></a>h5</h5>
<h6><a id="h6" href="#h6"></a>h6</h6>
</div>

<script type="module" id="silcrow-display">
  celine.cell("silcrow-display", () => {
    const elem = document.getElementById("silcrow-container");
    elem.removeAttribute("id");
    return htl.html`<span class='echo'>${elem.innerHTML}</span>`;
  });
</script>

  
</main>
</body>
</html>