❤
npm
Sign UpSign In

hfill

2.0.0 • Public • Published

hfill DOM Logo

NPM Version Build Status Tweet About This

hfill lets you use the speculative h element in HTML.

The h element would allow web authors to provide contextual headings without specifying an explicit level.

<body>
  <h>This is a top level heading</h>
  <p>....</p>
  <section>
    <h>This is a second-level heading</h>
    <p>....</p>
    <section>
      <h>This is a third-level heading</h>
      <p>....</p>
    </section>
  </section>
  <section>
    <p>....</p>
    <h>This is another second-level heading</h>
    <p>....</p>
  </section>
</body>

Try it right now using CodePen

hfill is a speculative polyfill which emulates a proposed feature of the web platform. Therefore, it should only be used in real production situations as x-h and not h, as the later would otherwise risk creating problems for the development of the Web if it became widely used prior to standardization and implementation.

Usage

Add hfill to your build tool:

npm install hfill --save-dev

Import hfill as a resource.

import hfill from 'hfill';

observe

The observe method watches contextual heading elements.

hfill.observe(
  document.documentElement // where contextual headings will be observed
  'x-h' // tag name of contextual headings
);

The observe method will assign a role of heading to the contextual heading, if it does not already have one. It will then assign an aria-level corresponding to the heading’s outline depth, which is its number of article, aside, nav, or section ancestors.

Example:

<body>
  <x-h role="heading" aria-level="1">This is a top level heading</x-h>
  <p>....</p>
  <section>
    <x-h role="heading" aria-level="2">This is a second-level heading</x-h>
    <p>....</p>
    <section>
      <x-h role="heading" aria-level="3">This is a third-level heading</x-h>
      <p>....</p>
    </section>
  </section>
</body>

style

The style method adds styles for contextual heading elements.

hfill.style(
  document.head, // where <style> will be appended
  'x-h' // tag name of contextual headings
  'font-style:italic' // optional styles (otherwise display:block;font-weight:bold)
  ['2em', '1.5em', '1em'] // optional heading sizes (otherwise 2em,1.5em,1.17em,1em,.83em,.67em)
);

Example:

<style id="hfill-style">x-h{display:block;font-weight:bold}/* ... level-based styles */</style> 

Level-based styles only use elements to maintain minimal CSS specificity.

x-h {
  font-size: 2em;
}
 
article x-h, aside x-h, nav x-h, section x-h {
  font-size: 1.5em;
}
 
article article x-h, article aside x-h, article nav x-h, article section x-h,
aside article x-h, aside aside x-h, aside nav x-h, aside section x-h,
nav article x-h, nav aside x-h, nav nav x-h, nav section x-h,
section article x-h, section aside x-h, section nav x-h, section section x-h {
  font-size: 1.17em;
}
 
/* etc. */

hfill is 665 bytes when ES5 transpiled, minified, and gzipped.

Readme

Keywords

Package Sidebar

Install

npm i hfill

Repository

github.com/jonathantneal/hfill

Homepage

github.com/jonathantneal/hfill#readme

Weekly Downloads

7

Version

2.0.0

License

CC0-1.0

Last publish

Collaborators

  • jonathantneal
Try on RunKit
Report malware