Re: [openlp-dev] Need some HTML/CSS assistance for chord print support

[MBernis]

Hi Tomas, If it can help you, this is my remote implementation of chords : I split chords and text in 2 lines, use a fixed font (Fira Mono), fill chords line with the HTML &nbsp; and when necessary text with '-'. Here is a example : <p style="vertical-align: middle; display: table-cell; font-family: Fira Mono; padding: 15px; font-size: 22px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Do&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lam7&nbsp;Sol&nbsp;<br><span>Quand&nbsp;je&nbsp;sonde&nbsp;l'univ-ers,</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fa2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sol&nbsp;<br><span>les&nbsp;astres&nbsp;que&nbsp;tu&nbsp;as&nbsp;créés,</span><br>&nbsp;&nbsp;&nbsp;&nbsp;Do&nbsp;&nbsp;Lam&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sol&nbsp;<br><span>Les&nbsp;océans,&nbsp;les&nbsp;mers,</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fa2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sol&nbsp;<br><span>tout&nbsp;me&nbsp;révèle&nbsp;ta&nbsp;majesté.</span></p> Regards, MBernis. Le 27/12/2016 à 19:08, Tomas Groth a écrit : Hi all, As some of you might know I have been working on chord support for OpenLP, and most of it has been implemented and will (hopefully) soon be merged into trunk. But there is still one thing missing: Support for printing chords. The challenge is that we have implemented chord supports using CSS, but the component we use for printing only supports a limited subset of CSS, and the things we need for chords to be rendered correctly is not supported. So I have tried to implement chords using tables, but my HTML/CSS skills are not good enough to crack this nut, so I hope some of you can help me! Here is an example of chords using CSS, which works fine: https://jsfiddle.net/rm3vg5m7/1/ And here is the same chords using tables, which needs some work: https://jsfiddle.net/3mbuxquv/1/ Feel free to fork this last one and come up with a solution where the line wraps correctly, the trick is that you must only use the HTML element and CSS properties mentioned on this page: https://doc.qt.io/qt-5/richtext-html-subset.html Best regards, Tomas _______________________________________________ openlp-dev mailing list openlp-dev@openlp.io https://lists.openlp.io/mailman/listinfo/openlp-dev

_______________________________________________
openlp-dev mailing list
openlp-dev@openlp.io
https://lists.openlp.io/mailman/listinfo/openlp-dev