UI Design - Add patterns/motif around verse numbers and book title


In some workshop I have attended recently, I have learned how important UI was for some people from certain region of the world. The inclusion of borders/motifs would in fact honor God’s word.

With this in mind, I would like to request if it is possible to add a border or pattern/motif around the verse numbers, and also if possible the books.

Here is a quick mockup based from an app used in the regions.



I’d just like to second this request quite strongly. It was made 2 years ago, but I was just about to make it it myself today. The End of Ayah and surrounds for section headings etc. are very important in the arabic script world.

I did some testing to see if using the styles we could achieve the verse decoration. So using the HTML export from SAB and modifying the CSS that SAB generated, I could get this:

The red oval is an SVG file associated with the equivalent of the span.v in the Styles section.

So the CSS for this is:

span.v {
    color: #689F38;
    font-size: 70%;
    display: inline-block;
    vertical-align: middle;
    background-image: url("oval.svg");
    background-repeat: no-repeat;

The regular CSS looks like this:

span.v {
    color: VerseNumberColor;
    font-size: 70%;
    position: relative;
    top: -0.4em;

But in SAB these modification do not work.
SAB does not accept SVG files, only PNG or JPG, but after making that change, there, it still does not work.

Part of the CSS used works, but not all.
The following appear to work: color, font-size, display, text-align, width
These don’t appear to work: vertical-align, background-image, background-repeat,
I am unsure about: height.

If it worked in the app some of the settings are fixed so would not work well if the text was zoomed.

With the menu bar image, it makes fitting in the various parts quite difficult. With the example, the book name needs to be centered and not too long. If a background image could be added it would be behind the solid color. So a programming job would be needed.

Hi John
Thanks for looking into this. The End of Ayah which traditionally surrounds verse numbers is a Unicode symbol: U+06DD. This is what we’d need to use to avoid problems zooming etc.

By the way - I’ve tried twice to post a problem I’m having with synchronisation which is holding me back. Are new posts being moderated to this group?


Yes there are moderation algorithms in place. Pasting in text written elsewhere will trigger one such rule.

But there is nothing in my moderation list. Though others can see it too and can act on it.

There is a solution to add the End of Ayah around verse numbers. It’s a feature of this unicode character U+06DD to surround the digit characters which follow it directly. Rather than modify the \v marker, it’s best to use the \vp marker here, verse number for publishing, as the \v marker is needed for reference functionality. This is the regular expression you need to use on your source text (i.e. in Paratext):
Replace: \v (\d+)
With: \v \1 \vp ۝\1 \vp*

@Phil_M that looks useful. Though it can be done in SAB too. Just a change in your RegEx if you run this in SAB Changes. SAB uses a $ not a backslash for the return string:

Replace: \v (\d+)
With: \v $1 \vp ۝$1 \vp*

or for the second line

With: \v $1 \vp \u06DD$1 \vp*

This second one is easier to write as you are not having to deal with a combining character directly.

Any one with guru Unicode knowledge explain why the combining character comes before the number? Most combing characters in Unicode in my experience come after.

@Phil_M you said your RegEx was in Paratext. Has Paratext implemented RegEx fully? It used to only find with RegEx. It could not do a RegEx replace.

Or did you mean for RegEx Pal use? I am thinking this is what you meant?

Hi John - I was using the Unsupported - Replace RegEx function in PT. Also, I want this replacement to change one book collection only, as I have other scripts/languages in my app. So - RegEx changes in SAB by Book Collection would be a great help - the feature request is already there, but needs more votes.

In the mean time, the above substitution doesn’t deal with verse ranges satisfactorily - eg. \v 3-4
To solve this, I ended up doing the RegEx change in Notepad++, which has a fuller, different implementation of RegEx which allows conditionals, and has a ‘Find in Files’ feature.
This is where you might want to look away!

> Find: \\v (\d+)-?(\d
> Replace: \\v \1?2(-\2 \\vp \x{06dd}\1-\x{06dd}\2\\vp*):( \\vp \x{06dd}\1\\vp*)

I know there is a way to do the RegEx replace line in two lines without the conditionals, but this is what I used in Notepad++ and it works for me.
Anyway, the SAB ‘Book Collection level Changes’ would be much neater.

Changes at a book collection level has been implemented and will be in the next release of Scripture App Builder. Thank you for illustrating why this would be useful.

Marvellous! Thank you!!

Thanks again - I’ve now got SAB 8.5 and put in the following 2 changes in at Book Collection level (thanks to Martin H, NRSI)
Add end of Ayah - single verses: ‘\v (\d+)(?!-)’ > ‘\v \1 \vp \u06dd\1\vp*’
Add end of Ayah - grouped verses: ‘\v (\d+)-(\d+)’ > ‘\v \1-\2 \vp \u06dd\1-\u06dd\2\vp*’
This works for me!

@Phil_M Can you write your RegEx again. You need to enclose it in ` Or in a code block that starts on a new line and ends on a new line with three back quotes that in plain text looks like this:
some text here
But shows like this:

some text here

The issue is that some of the back slashes are not preserved.
If I write \ I have actually written two back slashes but the formatter treats it as code. To get it to not process it as code, then put it inside ` ` thus \\ I wrote two slashes and got two showing.

So your RegEx would really be:

\\v (\d+)(?!-)     > \\v \1 \\vp \u06dd\1\\vp*
\\v (\d+)-(\d+)   > \\v \1-\2 \\vp \u06dd\1-\u06dd\2\\vp*

I removed your quotes so your start and end are more defined.
That is double \\ before each v as they are the SFM markers.

Hi John - ok, here it is with better formatting - it is the same as what you wrote:

\\v (\d+)(?!-)   >  \\v \1 \\vp \u06dd\1\\vp* 
\\v (\d+)-(\d+) > \\v \1-\2 \\vp \u06dd\1-\u06dd\2\\vp*
1 Like