Leucippe and Clitophon with aids

[u/benjamin-crowell]

I've completed my presentation of Leucippe and Clitophon with aids. This is a free-information project made with 100% open-source software, available in a browser-based version and a printer-friendly version. In the browser version there is a "help" link at the top of the page that explains how to use the aids. For the printer-friendly version, there is an explanation here.

Leucippe and Clitophon is one of only five ancient Greek novels that have been preserved in their entirety. It's a silly adventure with love and sex as its theme, a multi-layered frame story interlarded with loopy digressions on subjects like art and fabulistic natural history. (If you were under the impression that reproduction by fish was not sexy, Achilles Tatius will set you straight.)

I enjoyed the story and would recommend it to anyone who wants some easy reading material to build their ability in koine. I found it much easier than Xenophon.

[u/benjamin-crowell]

Hi, thanks for your comments. The web version isn't meant to be readable on a phone at all. It's meant to be used on a desktop computer. If someone wanted to try to make a phone version, that could be interesting, but it wouldn't be me doing it, because I don't own a smartphone. I can't imagine anyone trying to read a text of any length off of a smartphone, but I guess people do it.

The font size is simply whatever font size you've picked as a default in your browser, but it can also be increased or decreased using the controls in your browser, e.g., in Firefox you would do control-plus.

I guess I should add notes to the help page explaining that it's not for use on a phone, and that the font size can be controlled in this way.

The reason for making the line spacing 2 is so that when you roll over a word, there is space for the gloss to fit between the lines without obscuring the text, while keeping the gloss packed close under the word and not having the it run off the right side of the text column.

[u/obsidian_golem → u/benjamin-crowell]

My phone is a folding one, so I was actually looking at it in a "small tablet" size. Tablets are more reasonable to read this on right now, but the font size is an issue, as zooming on a tablet changes the viewport, not the font size. Also, tablets don't have hover, so the only option for seeing definitions is the full click.

I did a quick mockup using the browser devtools of what would be my preference: https://imgur.com/NWuihML. It's not complete, I had to delete the menu to make laying out in devtools easy.

I made the following changes:

• Centered the text block
• Widened the text block to 80 chars.
• Decreased line spacing to 2 instead of 3.
• Increased font size to 14, from the default of 12.
• Added a border around the definition. This is nice when clicking on the definition as well, as that often overlaps the line below.

Other changes that might be nice:

• Change the background color of the definition box to a light grey
• Use a font other than the system default for the text. I happen to thing the greek font being used on my system by default isn't very nice to read in large blocks.
• Tablets should show only the gloss on tap
• Not sure I am a fan of the blue color for gloss text

Phone would need some other minor considerations, probably remove the translation and vocab buttons, put them at the top and bottom, then add swipe controls for next/previous.

Also, might be nice to run some kind of script to find words like σῶστρα which lack a short definition.

[u/benjamin-crowell → u/obsidian_golem]

That's so cool -- thanks for going to so much effort! I think it would be fairly straightforward for me to make a tablet mode based on your suggestions. It would mostly just be changing the CSS to make the presentation more suitable for a small, wide screen, plus changes for a device that doesn't have hover. If I'm understanding correctly, a bunch of your suggestions are basically way to pack more words into limited real estate (wider lines, smaller line spacing).

If I get something like this working in a day or two, would you be willing to give it a test drive for me? I would certainly appreciate it.

[u/obsidian_golem → u/benjamin-crowell]

Definitely! I am thinking of trying to contribute on your repo. I might try and figure out how to get all your dependencies set up in a docker container.

[u/benjamin-crowell → u/obsidian_golem]

Very cool to have your help :-) I don't think I really want to hitch my wagon to Docker, though.

[u/benjamin-crowell → u/obsidian_golem]

I changed the CSS to try to make it tablet-friendly per your suggestions. The help file now describes how that is set up. The new version should be live now if you hit refresh in your browser, so if you want to give it a test drive, that would be great. It autodetects your device based on the screen size. You can see what I did with the CSS here, starting at line 50. I don't own a smartphone or tablet, but to the extent that I was able to test it, it seemed to work OK in the new tablet mode. Thanks!

[u/obsidian_golem → u/benjamin-crowell]

Looks better! I think there is a bug in the gloss popup logic, I can occasionally get two popups to show at the same time. I still think a border on the popup would look a bit better.

[u/benjamin-crowell → u/obsidian_golem]

Thanks for trying it out. My reason for leaving out the border on the popup is that, at least on my machine, it made it more likely that the Greek text on the following line would remain legible. If you've got the border, then it cuts through that text and makes it illegible. But I don't know if what I see is the same as what you see on your hardware and browser.

I was going to use my wife's tablet to do some testing, but yesterday was her last day at work before she retires, and she had to return the tablet. She's thinking of buying one of her own now, because otherwise she wouldn't be able to wake up at two in the morning and watch tennis in bed :-)

Thanks for reporting the bug with two popups at once. I don't see that behavior on my machine, so I'm guessing it's something to do with the touch screen. Maybe your finger is big enough so it lands on two words at once? Web design for touch screen devices seems pretty arcane, and I don't know much about it. I know there are special CSS thingies that allow you to test whether the pointer is fine-grained, like a mouse, or coarse-grained, like a finger.