Long urls in citations not behaving consistently and sometimes not staying within citation box

[zsofiaj]

This is a very minor issue, but I wanted to post about it here because I'm not sure if it is a bug or a known issue or what.

One of our longer urls in a citation runs outside of the citation box and appears overlaid on the page text. See Tartuferi 2017 in note 19 here:

https://italian-paintings-march2023-updates.netlify.app/catalogue/volume-1/other-tuscan-schools/67b/#fn19

But at least one other long url like that doesn't run outside the box, and wraps at a hyphen or underscore. See Bisconti and Manacorda 1998 in note 5 here:

https://italian-paintings-march2023-updates.netlify.app/catalogue/volume-1/the-florentine-school/2/#fn5

@Erin-Cecele Do you see this in your browser as well? If not, I'll post screenshots as well.

[Erin-Cecele]

Hi @zsofiaj, that looks similar to these issues. You can find various approaches to fixing the run-on URL in the respective issues.

thegetty/inventories-and-surveys#32

https://github.com/thegetty/bronze-guidelines/issues/162

[zsofiaj]

Thanks so much, @Erin-Cecele! The second link didn't work for me. Is the approach @geealbers took in the first link (thegetty/inventories-and-surveys#32) something that will be incorporated in future versions of Quire to improve the look of longer urls in citations?

[geealbers]

Hi @zsofiaj, sorry, the Bronze Guidelines repo is still private, but below is a copy of what Erin was pointing to. We would like to incorporate a backend solution like that in Inventories & Surveys at some point, but it's not on the immediate priority list. So hopefully this Markdown-based solution will work in the interim.

---

The best solution here is to add <wbr> elements (the Line Break Opportunity element) before all the punctuation in the URL string following Chicago Manual of Style rules for URL line breaks. In markdown, the link would look as follows, and would break as expected in the final output.

[https://<wbr>www.metmuseum.org<wbr>/art<wbr>/metpublications<wbr>/Italian<wbr>_Renaissance<wbr>_and<wbr>_Baroque<wbr>_Bronzes<wbr>_in<wbr>_th<wbr>_Metropolitan<wbr>_Museum<wbr>_of<wbr>_Art](https://www.metmuseum.org/art/metpublications/Italian_Renaissance_and_Baroque_Bronzes_in_the_Metropolitan_Museum_of_Art)

[zsofiaj]

Thanks so much, @geealbers !

[lucafalefoto]

Maybe I am missing something, but isn't it simpler to work on the style sheet? If the problem is just preventing long URLs from running outside the citation box, I would add the following rule in custom.css:

.quire-citation__content, .quire-page__content__references { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; }

See also: Better Line Breaks for Long URLs

[Erin-Cecele]

Thank you, @lucafalefoto. I just tested this solution, and it works beautifully! Thank you for sharing. I will add it to our documentation as a Recipe.

[zsofiaj]

Yes, thank you, @lucafalefoto. That worked perfectly for me as well. Thanks so much for sharing.

@Erin-Cecele, while testing this, I noticed another problem with the citation box, and I can't recall if we discussed this already. Maybe this is a known bug? If you click on Romagnoli 1835 in note 3 of the entry below, does the left side of the citation box appear hidden under the image at left? That's what it does on my screen when I click on any citation that is at the far left of the text column. I can attach a screenshot if it doesn't behave the same on your end. Should this be documented under the Issues section?

https://volume-2-batch-1--italian-paintings-live.netlify.app/catalogue/volume-1/the-sienese-school/50/#fn1

[lucafalefoto]

@zsofiaj, perhaps there is a more elegant way to do this, but this is what comes to mind now: add the following rule to the custom.css style sheet.

.quire-citation .quire-citation__content {
    left: 120%;
}

It should not affect other parts of the site, but it is best to do some testing on different pages and with different devices. Furthermore, I have no idea whether it will affect the rendering of EPUBs and PDFs.

[Erin-Cecele]

@lucafalefoto, actually, is there a way to extend that CSS so that it also fixes the run-on URLs that appear within the text (and not just the pop-up citation box)?

[lucafalefoto]

Thank you Erin-Cecele!

In the CSS rule I posted above I considered only the two box containers where I met the problem, those with a CSS class of .quire-citation__content and .quire-page__content__references (i.e. the citation box and the in-page bibliography, if I remember well), but you can add as many containers as you want as long as they have a meaningful class explicitly declared. If you can point me to a real production example I could be of some help.

I would like to take this opportunity to congratulate you on the beautiful software you have made available to everyone. I have been using it for about a year for personal projects and I am very satisfied. I have encountered some problems that would be worth pointing out and including in the documentation. If they come back to me, I will point them out to you.

[Erin-Cecele]

Thank you for your kind words and support of Quire as an open-source tool. We are thrilled to have you and your helpful contributions as part of our community! Would you like to have any of your projects featured on our community showcase?

[lucafalefoto]

Thank you for your feedback @Erin-Cecele. At the moment, my projects are of strictly local interest, so they would only add noise to the community showcase. Your interest was, however, much appreciated.