{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/resources/scripture-styling/","result":{"data":{"mdx":{"id":"2fc8798d-8a0a-56a8-aa4f-e56467a7526a","excerpt":"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…","fields":{"slug":"/resources/scripture-styling/"},"frontmatter":{"title":"Scripture Styling","description":null,"image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"Scripture Styling\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\n\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h2\", {\n \"id\": \"overview\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#overview\",\n \"aria-label\": \"overview permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Overview\"), mdx(\"p\", null, \"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.\"), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"the-context-usx\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#the-context-usx\",\n \"aria-label\": \"the context usx permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"The Context: USX\"), mdx(\"p\", null, \"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 \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://api.bible\"\n }), \"API.Bible\"), \" uses to source translations, uses this standard, in addition to \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.youversion.com/\"\n }), \"YouVersion\"), \", \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://unitedbiblesocieties.org/\"\n }), \"UBS\"), \", \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://eten.bible/\"\n }), \"ETEN\"), \", \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://global.sil.org/\"\n }), \"SIL Global\"), \", \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.americanbible.org/\"\n }), \"the American Bible Society\"), \", \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.biblegateway.com/\"\n }), \"BibleGateway\"), \", \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.biblica.com\"\n }), \"Biblica\"), \", \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://wycliffe.org\"\n }), \"Wycliffe\"), \", and many more.\"), mdx(\"h3\", {\n \"id\": \"styling-usx\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#styling-usx\",\n \"aria-label\": \"styling usx permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Styling USX\"), mdx(\"p\", null, \"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 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"s\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"q1\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"q2\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"h\"), \", etc. \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://ubsicap.github.io/usx/parastyles.html\"\n }), \"You can click here\"), \" for a full list of these class names and example stylings.\"), mdx(\"p\", null, \"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.\"), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"scripture-styles-library\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#scripture-styles-library\",\n \"aria-label\": \"scripture styles library permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Scripture Styles Library\"), mdx(\"p\", null, \"If you would prefer to \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"start with an existing CSS file\"), \", you can freely use our Scripture Styles library.\"), mdx(\"h3\", {\n \"id\": \"how-it-works\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#how-it-works\",\n \"aria-label\": \"how it works permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"How it works:\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"In your request, set the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"content-type\"), \" query parameter to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"html\"), \".\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"Wrap the response in a new class, \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"scripture-styles\"), \" \", mdx(\"em\", {\n parentName: \"li\"\n }, \"(ex: \", mdx(\"inlineCode\", {\n parentName: \"em\"\n }, \"
\"), \")\"), \".\")), mdx(\"h3\", {\n \"id\": \"adding-the-css-to-your-project\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#adding-the-css-to-your-project\",\n \"aria-label\": \"adding the css to your project permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Adding the CSS to your project:\"), mdx(\"p\", null, \"You have 3 options:\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"Install our \", mdx(\"a\", _extends({\n parentName: \"li\"\n }, {\n \"href\": \"https://www.npmjs.com/package/scripture-styles\"\n }), \"official NPM package\"), \" using \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"npm i scripture-styles\"), \".\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"Get \", mdx(\"a\", _extends({\n parentName: \"li\"\n }, {\n \"href\": \"https://raw.githubusercontent.com/americanbible/scripture-styles/master/dist/css/scripture-styles.css\"\n }), \"the raw CSS file\"), \".\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"Choose a SASS version with fonts in \", mdx(\"a\", _extends({\n parentName: \"li\"\n }, {\n \"href\": \"https://github.com/americanbible/scripture-styles\"\n }), \"our dedicated repository here\"), \".\")), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"example\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#example\",\n \"aria-label\": \"example permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Example:\"), mdx(\"p\", null, \"Once your styling is in place, your markup can look something like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \"
\\n

A Prayer for Help

\\n

Listen to me, Lord, and answer me,

\\n

for I am helpless and weak.

\\n
\\n\")), mdx(\"p\", null, \"Also, feel free to check out our \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"\"\n }), \"demo app\"), \" to see scripture styling in action.\"));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":2,"value":"Overview"},{"depth":2,"value":"The Context: USX"},{"depth":3,"value":"Styling USX"},{"depth":2,"value":"Scripture Styles Library"},{"depth":3,"value":"How it works:"},{"depth":3,"value":"Adding the CSS to your project:"},{"depth":2,"value":"Example:"}]}},"pageContext":{"slug":"/resources/scripture-styling/","prev":{"label":"Demo App","link":"/resources/demo-app"},"next":{"label":"Fair Use (View Tracking)","link":"/resources/fair-use"},"githubEditUrl":"https:/github.com/americanbible/api-bible-docs/tree/master/src/@rocketset/gatsby-theme-docs/src/docs/resources/scripture-styling.mdx"}}}