Render \b tags

[TheNonPirate]

Implementing #980. This causes \b tags to properly be a line break.

Summary by CodeRabbit

• Bug Fixes
  • Improved paragraph rendering: certain content blocks now force a line break and receive an additional styling class to ensure consistent spacing and visual presentation of scripture text across views. This resolves layout inconsistencies and improves readability.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c7a3dc73-5351-4602-b186-9f141832a364

📥 Commits

Reviewing files that changed from the base of the PR and between 662b929 and 93d4742.

📒 Files selected for processing (1)

• src/lib/components/ScriptureViewSofria.svelte

🚧 Files skipped from review as they are similar to previous changes (1)

• src/lib/components/ScriptureViewSofria.svelte

---

📝 Walkthrough

Walkthrough

Appends a <br> and adds the txs CSS class to the paragraph container when startParagraph computes paraClass === 'b' in the Scripture view component.

Changes

Paragraph Rendering

Layer / File(s)	Summary
Paragraph block line break rendering src/lib/components/ScriptureViewSofria.svelte	startParagraph appends a <br> to workspace.paragraphDiv.innerHTML and adds the txs class when paraClass === 'b'.

Estimated Code Review Effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

A rabbit nudges markup light,
For class b it adds a break,
A gentle <br> to set things right,
A txs class for style awake,
Hoppity, the lines behave! 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Render \b tags' directly and accurately describes the main change in the pull request—implementing proper rendering of \b tags as line breaks in the Scripture view component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed due to a network error.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[benpaj-cps]

Looks good, but the <b> element is missing the txs class, which makes it smaller and harder to see.

The PWA has wider spacing than the Android version from the screenshots by default, so the default <b> is a bit too thin.

[benpaj-cps]

That did fix the spacing. Looks good to me.

[benpaj-cps]

@chrisvire Looks like a staff approval is (understandably) still needed to merge PRs.

[chrisvire]

@benpaj-cps You suggested adding the txs to the <b> tag. Is that in done in the Native app (looking at the generated HTML for this section?

[benpaj-cps]

@benpaj-cps You suggested adding the txs to the <b> tag. Is that in done in the Native app (looking at the generated HTML for this section?

@chrisvire Turns out, no. Thanks for asking - I hadn't checked that. The Android app has an equivalent   instead of the <br>.

Android:

To match the Android version we could set the default line height to 1.2 and just use either <br> or   without the txs.

Desktop PWA:

@TheNonPirate Sorry for the confusion!

[TheNonPirate]

What do you mean by, "set the default line height to 1.2"? Are you suggesting some sort of global change, or applying a Tailwind class to that particular div?

[benpaj-cps]

It's a UI adjustment, but the global default is set in lib/data/stores/view.ts:

I'm not sure if Chris wants to change this, but if so it should be a one-liner.

[TheNonPirate]

It seems like changing a global default would go beyond the scope of this PR.
@chrisvire Thoughts?

[chrisvire]

If you look at the HTML generated for the Native app, what styling is on the <b/> tag?

You can also right-click on the book in SAB and select Export to HTML and you can view it on the desktop.

[benpaj-cps]

If you look at the HTML generated for the Native app, what styling is on the <b/> tag?

You can also right-click on the book in SAB and select Export to HTML and you can view it on the desktop.

The Android native app looks like it doesn't have a <b/> tag. It just has a single   within the <div class="b"/>.
As far as I could tell the relevant styles in sab-app.css were identical.

(Android WebView CSS on left, desktop PWA on right)