Scripture Styling

We developed a CSS file that will style the Scripture returned by the API.

On API calls to get a specific verse or chapter, the text of the verse or chapter is returned in the content field. By default, this text includes HTML tags and classes. This behavior can be changed using the content-type query parameter.

Get the CSS file here.

If you want more options, checkout this GitHub repo which includes a SASS version, a minified version, and fonts.

For the Scripture to be styled correctly, it needs to be enclosed in an element with the class api-bible-content.

Example

Here is the content returned from the API when looking up Psalm 86:1. (You have to scroll right to see the entire result.)

Copy
<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>

Notice this verse includes a heading. Also, the word 'Lord' is styled differently and there is special indentation. We need to enclose that HTML in a div with class scripture-styles. Remember to remove the escape characters.

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>

When combined with the CSS, the verse will display like this:

A Prayer for Help

Listen to me, Lord, and answer me,

for I am helpless and weak.