This release is 7 versions behind 13.6.0 — the latest version of @celine/libertine. Jump to latest
@celine/libertine@12.0.0
Built and signed on GitHub Actions
Built and signed on GitHub Actions

MaxwellBo/celine
@celine/libertine is a a drop-in stylesheet based around the Linux Libertine typeface
JSR Score
64%
Published
a month ago (12.0.0)
Package root>index.html
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452
<!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">
  <!-- UNCOMMENT ME WHEN COPY PASTING -->
  <!-- <link 
    rel="stylesheet" 
    href="https://esm.sh/jsr/@celine/celine@4.6.0/cell.css" />
  <link 
    rel="stylesheet"  -->
    <!-- href="https://esm.sh/jsr/@celine/libertine@12.0.0/libertine.css" /> -->

  <script type="module">
    import { CelineModule, registerScriptReevaluationOnBlur } from 'https://esm.sh/jsr/@celine/celine@4.6.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">12.0.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@12.0.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;code&gt;</code> is used to display inline code.
</p>

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

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

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

<p>
  <time datetime="2018-07-07">July 7</time>. The <code>&lt;time&gt;</code> element is used to display a date or time.
</p>

<p>
  <output>&lt;output&gt;</output> is used to display the result of a calculation.
</p>

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

<figure>
  <img src="https://placehold.co/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; is used to apply syntax highlighting.
console.log("Hello, world!");</code>
</pre>

<figure>
  <img src="https://picsum.photos/300/200" alt="Placeholder image">
  <figcaption>&lt;figcaption&gt; is used to annotate a &lt;figure&gt;.</figcaption>
</figure>

<figure class="card">
  <img src="https://picsum.photos/300/200" alt="Placeholder image">
  <figcaption>Add the <code>.card</code> class to <code>&lt;figure&gt;</code> for an alternate styling.</figcaption>
</figure>

<p>
  Parameterizing Observable Plot's <a href="https://observablehq.com/plot/features/plots"><code>className</code> option</a> with <code>"card"</code>
  will set <code>class="card-figure"</code> on the <code>&lt;figure&gt;</code> element. Thus, the <code>.card</code> class is also aliased to <code>.card-figure</code></a>
</p>

<script id="plot-example" class="echo reflect" type="module" contenteditable="true">
  import * as Plot from 'https://esm.run/@observablehq/plot@0.6.16';

  celine.cell("plot-example", () => {
    return Plot.plot({
      className: 'card',
      title: htl.html`<h3>Card plot demo</h3>`,
      caption: "Squiggly line go up",
      marks: [
        Plot.lineY([1, 4, 3, 2, 5])
      ]
    });
  });

</script>

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

<div id="aside-container">
  <p>
    An <code>&lt;aside&gt;</code> tag pulls content out of the <code>&lt;main&gt;</code>.
    <sup id="fnref:2">
      <a href="#fn:2" class="footnote-ref" role="doc-noteref">(2)</a>
    </sup>
  </p>
  <aside>
    <p id="fn:2"> <a href="#fnref:2">2</a> This is a &lt;p&gt; inside of the <code>&lt;aside&gt;</code>. It gets additional styling.
  </aside>
  <p>
    When the width of the window is constrained, the <code>&lt;aside&gt;</code> will pull back into the main flow.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </p>
</div>


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


<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>
@celine/libertine@12.0.0Built and signed on GitHub ActionsBuilt and signed on GitHub Actions

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