`<br>` elements are found in the non visible divs below the question, but not found in the non visible divs above the question

[michalrus]

@boydkelly wrote on 2023-02-24T11:31:51Z in the original Gist:

hi michalrus,

Thanks for this its really great. I do have a question if you are able to help. My apologies. I know enough to get into trouble but not enough to figure this out. The issue is <br> elements that are found in the non visible divs below the question, but not found in the non visible divs above the question. I have tried to style the close-js-rendered element to a flex column and center the containing divs. But the divs with the<br> have a line height of 27px whereas the divs without the<br> have a line height of 0. This makes everything align to the top when 'centered'.

I noticed there is a regex in the code doing "something"? with the <br>. As a test I removed the <br> from the regex and found that the result was still the same, (the divs above contain no <br>, but the divs below do; and have a line height of 27px) but I'm not sure of the what or why of that regex. Please see attached image.

Is there something that I can do to fix this? Or can it be tweaked on your side?

Thanks,

[michalrus]

Hey, @boydkelly, can you give me the HTML contents of your {{Text}}? And also what is in {{Overlapping}}? So that I can reproduce locally and better understand the issue

The <br> regex is for lyrics/poems – when you want to show only the overlapping context, and not the whole card, if we didn't do the regex, and your card had each cloze on the new line (like lyrics do), then you wouldn’t see the clozes, but you would still see their newlines (<br>), which wouldn’t make much sense IMO.

[michalrus]

@boydkelly wrote on 2023-02-24T17:28:32Z in the original Gist:

Thanks! I am using 1,1,false in {{Overlapping}}. The only change to the html is that I have added a class col to <div id="cloze-js-rendered"></div>

And in my styling i simply added (among some other styling :

.col {
display: flex;
flex-flow: column;
}

Hoping to style this similar to my other cards.

[michalrus]

@boydkelly yup, but what do you have in {{Text}}? Just unformatted text with new lines? Can you show the HTML view of this field? I need a local reproduction =)

[boydkelly]

ah sorry. I have this in {{text}}

{{c1::kuna sini kɔfe}} {{c2::kuna sini}} {{c3::kunu}} {{c4::bi}} {{c5::sini}} {{c6::sini kɔfe}}

Nothing in Back Extra.

And 1,1,false in overlapping

On Sat, Feb 25, 2023 at 6:51 PM Michal Rus @.***> wrote:

@boydkelly https://github.com/boydkelly yup, but what do you have in {{Text}}? Just unformatted text with new lines? Can you show the HTML view of this field? I need a local reproduction =)

— Reply to this email directly, view it on GitHub https://github.com/michalrus/anki-simple-cloze-overlapper/issues/3#issuecomment-1445180879, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2BH3GO3HCAAADFPEMCR3TWZJICXANCNFSM6AAAAAAVIACOQU . You are receiving this because you were mentioned.Message ID: @.***>

-- Boyd Kelly @.***> www: http://www.coastsystems.net Tel: +1 604 837-0765

[michalrus]

Okay, I copy-pasted your card, but still can't seem to reproduce (recording below).

Once again, can you show me the HTML contents of {{Text}}, not the rendered pretty view?

To access those you need to press the < > button in top right corner of the field, when editing the card. The one next to the "Eye" button. I don't want the "Eye" contents, but the raw < > HTML contents.

[boydkelly]

ok this is the html:

{{c1::kuna sini kɔfe}}

{{c2::kuna sini}}

{{c3::kunu}}

{{c4::bi}}

{{c5::sini}}

{{c6::sini kɔfe}}

On Sun, Feb 26, 2023 at 8:50 AM Michal Rus @.***> wrote:

Okay, I copy-pasted your card, but still can't seem to reproduce (recording below). Once again, can you show me the HTML contents of {{Text}}, not the rendered pretty view?

To access those you need to press the < > button in top right corner of the field, when editing the card. The one next to the "Eye" button. I don't want the "Eye" contents, but the raw < > HTML contents.

[image: issue-3] https://user-images.githubusercontent.com/4366292/221400882-a6a34b5d-e2f2-4b56-95d4-6aecc0228d47.gif

— Reply to this email directly, view it on GitHub https://github.com/michalrus/anki-simple-cloze-overlapper/issues/3#issuecomment-1445301081, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2BH3BKP65RSDMFGORLZETWZMKNTANCNFSM6AAAAAAVIACOQU . You are receiving this because you were mentioned.Message ID: @.***>

-- Boyd Kelly @.***> www: http://www.coastsystems.net Tel: +1 604 837-0765

[michalrus]

Hey, thanks!

So, first of all, your HTML is not valid HTML. You have a lot of additional <div> tags open, without their matching closing tags, </div>.

Second, I fixed a mini-bug in 360d3f134685f234a9bf248f58729beacc13231e, where clauzes couldn't have had multiple newlines – thanks for inspiration!

Still, QTWebEngine in Anki can parse your malformed HTML, and it works on my machine. I don't see any additional <br>s. They are not in your HTML question, so I don't know where they could have come from:

It seems to work fine here, I even added two <hr> lines on top and bottom, to illustrate those additional <div>s you have don't take any space:

So I don't know what to tell you, can you check the newest version of front.html from this repo?

You have to help. me reproduce the issue locally, or else I can't possibly fix it. Where do those <br>s come from if they're not in your question HTML? 🤔

[michalrus]

Ah, no, sorry, your HTML is valid, when you format it, but still weird:

<div>{{c1::kuna sini kɔfe}}</div>
<div>
  <div>{{c2::kuna sini}}</div>
</div>
<div>
  <div>{{c3::kunu}}</div>
</div>
<div>
  <div>{{c4::bi}}</div>
</div>
<div>{{c5::sini}}</div>
<div>{{c6::sini kɔfe}}</div>

But still no <br>s in it 🤷

[michalrus]

If you want clozes to keep their absolute position from the top, why not use {{Overlapping}} set to 1, 1, true instead of your 1, 1, false?

[boydkelly]

Yeah, I am not longer getting the br's now. I'm totally not sure why. Anyway I'm getting it formatted ok now. I am using the Asset Manager plugin that may be reformatting the html. But certainly shouldn't alter it. And I also just updated to Anki 2.1.60. Anyway sorry for the noise here. You did get me looking at the code!! And I appreciate that.

I am also thinking of adding a Title field. Some of my questions require something to indicate context. I can do that no prob. But it might be a nice addition to your Overlapper.

Yes you really should set this up as a repo. I'm thinking it would become quite popular.

Cheers.

On Sun, Feb 26, 2023 at 6:14 PM Michal Rus @.***> wrote:

If you want clozes to keep their absolute position from the top, why not use {{Overlapping}} set to 1, 1, true instead of your 1, 1, false?

— Reply to this email directly, view it on GitHub https://github.com/michalrus/anki-simple-cloze-overlapper/issues/3#issuecomment-1445424630, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2BH3GGNIJZ4V7LNQ6QZXLWZOMPRANCNFSM6AAAAAAVIACOQU . You are receiving this because you were mentioned.Message ID: @.***>

-- Boyd Kelly @.***> www: http://www.coastsystems.net Tel: +1 604 837-0765

[michalrus]

It is a repo already, hah 😸

As for the title, you can always add it to the {{Text}}. You can do whatever you wish with this approach 😌

Thank you! Happy to hear you were able to fix it. 💪