Dynamic Interlinears with Javascript and CSS
After the continuation of a permathread on the b-greek mailing list about the pros and cons of interlinears, I built some quick demonstrations of how CSS and Javascript could be used for dynamic interlinear glosses that would not be possible on the printed page.
- Plain — show static glosses
- Hover — show glosses when a word is hovered over
- Toggle — toggle showing a gloss when a word is clicked
- Frequency — filter appearance of gloss by frequency
They might be interesting as little Javascript tutorials too.
Comments (5)
Oun Kwon on Jan. 29, 2006:
It is like a heaven-given gift!
I have an N.T. interlinear in Word file from my own editing work for my own use for reference when I am studying N.T.
How much work is involved to convert to dynamic interlinear? Where can I learn how to? Or someone else can do for me at a cost?
Thanks.
James Tauber on Jan. 30, 2006:
Chris, I don't have freely distributable glosses, unfortunately.
Oun Kwon, email me your Word file and I'll see if I can convert it for you.
Richard Wilson on Jan. 31, 2006:
Thanks for the idea about how to display an interlinear, which I was wondering how to do for the Greek-Italian interlinear that I have. I used your first format to put it at http://www.laparola.net/greco/ The aim of that interlinear is not to teach Greek (you would probably find it more useful for learning Italian!) but to show where the words of one Italian translation came from, so there are some differences from how you were thinking of doing the interlinear.
Jiang on July 28, 2008:
A great idea!
I used float:left to display interlinear text before, but I realized that if it is hard to format paragraphs and bullet-list with it :(
Then I used another method - relative positioning, but the problem is the text at the end of each line don't wrap well sometimes.
See an example of this method (applied to Chinese text annotated with Latin phonetics):
Jiang
Last Modified: Jan. 28, 2006
Author: James Tauber
Chris Smith on Jan. 29, 2006:
How intensly cool. Need a site with the whole Bible done up like that. Thanks.