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

[Tomas Groth]

Hi MBernis,

Thank you for your input!
This is a fairly simple solution that I've considered, but I'd like to
avoid being forced to use a specific font type, and there is also a
challenge with line-wrapping.

Best regards,
Tomas

2016-12-28 18:23 GMT+01:00 MBernis <mbernis at chez.com>:

> 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   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;     Do   &
> nbsp;  Lam7 Sol <br><span>Quand 
> je sonde l'univ-ers,</span><br>   &
> nbsp;  Fa2      &
> nbsp;         
> Sol <br><span>les astres que tu 
> as créés,</span><br>    Do&
> nbsp; Lam      Sol&
> nbsp;<br><span>Les océans, les mers,</
> span><br>        &
> nbsp; Fa2       &
> nbsp;   Sol <br><span>tout me&
> nbsp;révèle ta 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/>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 listopenlp-dev at openlp.iohttps://lists.openlp.io/mailman/listinfo/openlp-dev
>
>
>
> _______________________________________________
> openlp-dev mailing list
> openlp-dev at openlp.io
> https://lists.openlp.io/mailman/listinfo/openlp-dev
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openlp.io/pipermail/openlp-dev/attachments/20161229/f33d965d/attachment-0001.html>