bdchauvette/leipzig.js

Interlinear glossing for the browser

leipzig.js's Issues

Bold and spans with styles not handled

Thank you very much for creating this library. It is extremely good!

I have found a problem when when making text bold or colored. Hoping this can be fixed.

Issues with Bold Text

I made a string of the translated text bold. On the front end it made both the multiple lines of text bold (the original text plus the translated text bold).

Using bold for multiple words also throws out the alignment of the words slightly.

Example

As an example here is the original result with no bold used (so you can see how the alignment is supposed to look):

Then here is a screenshot showing the text that I made bold in the editor:

This was by just wrapping the bold text in <strong></strong> tags.

Here is a screenshot of the outcome:

Points to note:

1. The bold starts with "Samaria" (which matches what we had in the editor) but then the next word in the original language is now bold too.
2. After the final word bold English word the next word in the original language is also bold and is now out of alignment with the translated (English) text.

Demo Examples

To make it easy to replicate, the same issue can be seen on the http://bdchauvette.net/leipzig.js/demo/ page with these examples:

One Word Bold - Works Fine

If only one word is made bold then the bold works fine:

Link to this demo

More than one word bold - Issue Occurs

But as soon as more than one word is bold, the problem happens:

Link to this demo

Grouped words in Bold - More Problems

And if words are grouped with brackets inside the strong tags it really messes up - it ignores then meaning of the brackets, so the words go out of alignment, and shows the brackets on the front end:

Link to this demo

Issues with Coloured Text

If a section of the text is set as a different colour, using a <span> tag with an inline style, then the style code is outputted on the front end.

Link to this demo

Ideal Outcome

Ideally, a string of text could be bold or coloured and only the text selected as bold or coloured in the backend would output on the front end.

As a fallback, if it is too much work to fix the text colour options, then at least bold could be used, and other html tags with styles would be stripped out and not outputted onto the frontend.

Detailed usage on wordpress

Hello, first off all I'm grateful finally I met this tool and excited to use it on my blog.

May I get some insight on a detailed step by step usage on wordpress? I've been tinkering to find my own way but so far no avail.

Glosses in numbered examples

Great little utility, very useful, thanks! I was wondering whether it was possible for the glosses to appear as numbered examples.

Demo not working

Hi,

I'd like to try out your demo for my conlang, but it doesn't work. The script demo.js gives the exception TypeError: can't convert undefined to object when it first runs:

Font size when viewed on a phone

When I view anything rendered by leipzig.js on my smartphone (using Chrome on Android), the font shrinks to an unreadably tiny size.

I've looked into it a bit, and it seems to be caused by the float:left used in the CSS, which doesn't get caught by the built-in -webkit-text-size-adjust, so when the rest of the text gets inflated automatically, the Leipzig example gets left behind.

I haven't found a solution so far.