Sidebar Issue (Section Headings)

Hi there, I’ve been working on a project that contains multiple sidebars throughout the Bible text, but there seems to be a rendering issue within the app when the sidebar is just above a section heading. The section heading is displayed “inside” of the sidebar which is not correct.

Some background:
We made custom markers by adding the letter ‘z’ in front of all the markers between the opening (\esb) and closing (\esbe) markers of the sidebars so we can style them in a different colour (blue) using the stylesheet, so it’s easier for the reader the follow the text. Also, the blue horizontal lines are the \esb and \esbe markers, just styled to be visible/dividers.

Here is a brief snippet of the code in my SFM source file which shows the \s1 “outside” of the sidebar:

\p 
\v 22 Then God remembered \em Rachel\em*, and God listened to her and opened her womb. 
\v 23 She conceived and bore a son and said, “God has taken away my reproach.” 
\v 24 And she called his name Joseph,\f + \fr 30:24 \fq Joseph \ft means \fqa May he add\ft , and sounds like the Hebrew for \fqa taken away\f* saying, “May the \nd LORD\nd* add to me another son!” 
\esb 
\zms1 SIBLING RIVALRY 
\zm Siblings are bound by blood and are supposed to be close, good friends and loving towards one another. However, sibling rivalry can come when love is missing in the home. Rachel and Leah were sisters married to the same husband. They became jealous of each other and competed. Are your siblings competing with you or are you jealous of them because of some achievements? Do not allow the devil to rob you of your blessings by making you feel envious of your sibling. When you are making progress, help your sibling to make progress too. When God is blessing you, bless others as well. Be there for one another in good times and bad. That’s what siblings are meant for. Are your children not on good terms? Pray for them. Counsel them. Prayerfully, sincerely and openly discuss the reason for the rivalry and resolve matters amicably. Trust God and make peace. \xt Matthew 5:9\xt* says, \it “Happy are those who work for peace; God will call them His children!”\it* Complement, do not compete. 
\zb 
\zm \it Lord, give me a heart to love my siblings, to seek their good and to rejoice with them when they are flourishing. Make me a blessing unto them too. Amen.\it* 
\esbe 
\s1 JACOB'S PROSPERITY 
\p 
\v 25 As soon as \em Rachel\em* had borne Joseph, Jacob said to Laban, “Send me away, that I may go to my own home and country. 
\v 26 Give me my wives and my children for whom I have served you, that I may go, for you know the service that I have given you.” 

We tried moving the sidebars in Paratext to another spot within the same chapter. Sometimes it works, but other times the sidebar is removed completely or it does the same thing in the new position.

Is there any way of preventing the section headings being pulled into the sidebar blocks within SAB? Either with regex/changes or CSS or another method?

Hi Martin,

Firstly I must say it is looking great what you are doing, I’m really interested in how you have tweaked the USFM code to get the results above.

I cannot seem to replicate the issue above. I am wondering what changes you made in SAB for those specific markers, could you share a screenshot?

One out of the ballpark idea I had was to put some type of ‘separator’ from the \esb \esbe markers.
How about putting a \p before and after these markers to see if they are able to separate it from the rest of the text.

Something like this (I took out all the text to focus on the idea):


\p
\esb 
\esbe 
\p
\s1 JACOB'S PROSPERITY 
 

Hi James

Thanks for the feedback and your suggestion. I tried using the \p and \b markers as you mentioned each with different results, but both with the \s1 still “inside” the sidebar. The \p creates more space below the blue line (\esbe) and the \b creates more space above the section heading.

Here are the values I use to style the sidebar and some of the “custom” markers. If I did something wrong, please feel free to correct me.

div.esb {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #1976D2;
    margin-top: 20px;
}

.esbe {
    background-color: #1976D2;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.zm {
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 12px;
    text-indent: 0;
    color: #1976D2;
}

.zms1 {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 8px;
    color: #1976D2;
    font-weight: bold;
    font-size: 200%;
    page-break-after: avoid;
}

On a side note, if I could request two things relating the sidebars it would be:

  1. Have the ability to expand/collapse sidebars, either the current one or all of them in the app. Or have them appear as popups, like footnotes/cross-references.

  2. Be able to style them better e.g. add a border, background colour etc.

\esb 
\p 
\esbe 
\s1 

Adding the \p before the \esbe creates more space between the section heading and the blue line.

Sidebar_Issue3

I just can’t seem to get the section heading to appear after the \esbe (blue line).

I have found that if you manually move the sidebar in your SFM source file (not the Paratext version) to another spot, it does display the section heading correctly.

Sidebar_Issue4

I would however prefer not to do manual overwrites outside of Paratext as I would lose the ability to go back and use Paratext for text corrections, validation etc. or lose everything I “fixed” in my SFM source files.

Still waiting for a fix if anyone might know.

@BSSA_Martin
If you export to HTML, what does the HTML code look like at the ESBE?

The section heading is within the sidebar - see snippet below:

<div class="p"><span class="v">22</span><span class="vsp">&nbsp;</span>Then God remembered <span class="em">Rachel</span>, and God listened to her and opened her womb. <span id="bookmarks22"></span> <a id="v23"></a><span class="v">23</span><span class="vsp">&nbsp;</span>She conceived and bore a son and said, “God has taken away my reproach.” <span id="bookmarks23"></span> <a id="v24"></a><span class="v">24</span><span class="vsp">&nbsp;</span>And she called his name Joseph,<span class="footnote selectable" id="F-9"><sup>j</sup></span> saying, “May the <span class="nd">LORD</span> add to me another son!” </div>
<div class="esb"></div>
<div class="zms1">SIBLING RIVALRY </div>
<div class="zm">Siblings are bound by blood and are supposed to be close, good friends and loving towards one another. However, sibling rivalry can come when love is missing in the home. Rachel and Leah were sisters married to the same husband. They became jealous of each other and competed. Are your siblings competing with you or are you jealous of them because of some achievements? Do not allow the devil to rob you of your blessings by making you feel envious of your sibling. When you are making progress, help your sibling to make progress too. When God is blessing you, bless others as well. Be there for one another in good times and bad. That’s what siblings are meant for. Are your children not on good terms? Pray for them. Counsel them. Prayerfully, sincerely and openly discuss the reason for the rivalry and resolve matters amicably. Trust God and make peace. <span class="reflink"><a href="42-MAT-005.html#v9">Matthew 5:9</a></span> says, <span class="it">“Happy are those who work for peace; God will call them His children!”</span> Complement, do not compete. </div>
<div class="zb"></div>
<div class="zm"><span class="it">Lord, give me a heart to love my siblings, to seek their good and to rejoice with them when they are flourishing. Make me a blessing unto them too. Amen.</span> </div><span id="bookmarks24"></span>

<div class="s"><div id="s1">JACOB'S PROSPERITY </div></div><span id="bookmarks24"></span><a id="v25"></a>
<div class="esbe"></div>
<div class="p"><span class="v">25</span><span class="vsp">&nbsp;</span>As soon as <span class="em">Rachel</span> had borne Joseph, Jacob said to Laban, “Send me away, that I may go to my own home and country. <span id="bookmarks25"></span> <a id="v26"></a><span class="v">26</span><span class="vsp">&nbsp;</span>Give me my wives and my children for whom I have served you, that I may go, for you know the service that I have given you.” <span id="bookmarks26"></span> <a id="v27"></a><span class="v">27</span><span class="vsp">&nbsp;</span>But Laban said to him, “If I have found favour in your sight, I have learned by divination that<span class="footnote selectable" id="F-10"><sup>k</sup></span> the <span class="nd">LORD</span> has blessed me because of you. <span id="bookmarks27"></span> <a id="v28"></a><span class="v">28</span><span class="vsp">&nbsp;</span>Name your wages, and I will give it.” <span id="bookmarks28"></span> <a id="v29"></a><span class="v">29</span><span class="vsp">&nbsp;</span>Jacob said to him, “You yourself know how I have served you, and how your livestock has fared with me. <span id="bookmarks29"></span> <a id="v30"></a><span class="v">30</span><span class="vsp">&nbsp;</span>For you had little before I came, and it has increased abundantly, and the <span class="nd">LORD</span> has blessed you wherever I turned. But now when shall I provide for my own household also?” <span id="bookmarks30"></span> <a id="v31"></a><span class="v">31</span><span class="vsp">&nbsp;</span>He said, “What shall I give you?” Jacob said, “You shall not give me anything. If you will do this for me, I will again pasture your flock and keep it: <span id="bookmarks31"></span> <a id="v32"></a><span class="v">32</span><span class="vsp">&nbsp;</span>let me pass through all your flock today, removing from it every speckled and spotted sheep and every black lamb, and the spotted and speckled among the goats, and they shall be my wages. <span id="bookmarks32"></span> <a id="v33"></a><span class="v">33</span><span class="vsp">&nbsp;</span>So my honesty will answer for me later, when you come to look into my wages with you. Every one that is not speckled and spotted among the goats and black among the lambs, if found with me, shall be counted stolen.” <span id="bookmarks33"></span> <a id="v34"></a><span class="v">34</span><span class="vsp">&nbsp;</span>Laban said, “Good! Let it be as you have said.” <span id="bookmarks34"></span> <a id="v35"></a><span class="v">35</span><span class="vsp">&nbsp;</span>But that day Laban removed the male goats that were striped and spotted, and all the female goats that were speckled and spotted, everyone that had white on it, and every lamb that was black, and put them in the charge of his sons. <span id="bookmarks35"></span> <a id="v36"></a><span class="v">36</span><span class="vsp">&nbsp;</span>And he set a distance of three days' journey between himself and Jacob, and Jacob pastured the rest of Laban's flock. <span id="bookmarks36"></span></div><span id="bookmarks36"></span><a id="v37"></a>

It might have something to do with how it converts the chapter number to be after the section heading when it is before in the SFM text. Not sure why the conversion would also include the ESBE. Try putting one of these

\nb
\r
\m

after the \esbe
and make sure it is not empty.
Add a tilde ~ (no-break space) after the marker e.g.

\nb ~

What happens if you use a 2nd \s1 instead of a \b or \p

\esbe
\s1 ~
\s1 Jacob's Prosperity

IE… something in converstion is pulling the \s1 up… Is it the \esbe or is it the \s1? This might help identify what’s producing the shift. And if that specific snippet does what I think it does, it might be a usable workaround in the interim.

Hi Michael / Greg

I tried using a \nb and \s1 with the tilde (~) no-break space, but it just creates a bigger empty line before or after the closing \esbe depending on where you put it.

I did however try using the tilde with the \esbe and that seemed to fix it. Not sure if that is “allowed”, but the app compiled and seems to be working fine with it.

\esbe ~

Sidebar_Issue5

Unfortunately I need to work on another project this week so I can’t test things further, but it does look like there might be light at the end of the tunnel… Once I can test things further, I’ll post my findings on here for those who are interested.

1 Like

So glad there was a solution found!
Again this is such a cool use of the app builder, I am trying to think how I can use it in our apps.

Please share any further explorations and results, great work!