Scripture Styling

Overview

Styling scripture that's returned from your API requests doesn't have to be manual and time-consuming. We've utilized existing Scripture standards to create a base stylesheet for your projects, which you are always free to modify as needed.

The Context: USX

Unified Scripture XML (USX) is an XML-based standard for encoding digital Bible texts. It provides machine readable, stable, and highly structured text that, while closely related to and originating from USFM (Unified Standard Format Markers), serves the unique needs of programmers and archivers working with the Bible in digital spaces. The DBL (Digital Bible Library), which is the largest digital repository of Bible translations and is the primary repository API.Bible uses to source translations, uses this standard, in addition to YouVersion, UBS, ETEN, SIL Global, the American Bible Society, BibleGateway, Biblica, Wycliffe, and many more.

Styling USX

USX, in addition to standardizing the format of the Bible for digital uses, includes a series of consistent class names to help with styling. You've likely already seen many of these in your responses, such as s, q1, q2, h, etc. You can click here for a full list of these class names and example stylings.

This standardization means two things: you have complete control to write your own custom styling, and you can rely on a 3rd-party foundation file to do the heavy lifting, and come in later to add the details.

Scripture Styles Library

If you would prefer to start with an existing CSS file, you can freely use our Scripture Styles library.

How it works:

1. In your request, set the content-type query parameter to html.
2. Wrap the response in a new class, scripture-styles (ex: <div class="scripture-styles">).

Adding the CSS to your project:

You have 3 options:

1. Install our official NPM package using npm i scripture-styles.
2. Get the raw CSS file.
3. Choose a SASS version with fonts in our dedicated repository here.

Example:

Once your styling is in place, your markup can look something like this:

Copy
<div class="scripture-styles">
  <p class="s">A Prayer for Help</p>
  <p class="q1">Listen to me, <span class="nd">Lord</span>, and answer me,</p>
  <p class="q2">for I am helpless and weak.</p>
</div>

Also, feel free to check out our demo app to see scripture styling in action.