Translation appearing above originals

Is it possible to make the translation appear below the originals in the line by line view (perhaps it can be made a toggle of some sort in the settings)?

I find it a bit hard to make use of the line by line view if I have to first read what is below before reading what is above. I want to read the original before reading the translation as that is the intuitive way to go about understanding the original. I dont see the point of reading the translation first before reading the original.

Also in the side by side view, if the translation can be made to appear right of the original, it would be useful.

3 Likes

I’ve never liked the ordering!

If you install a browser plugin like Stylus you can do your own custom css by adding:

.translation {
    order: 2;
}

.root {
    order: 1;
}

This will swap the order putting the root first in line by line view. However it kind of messes up the side by side view. If you just care about side by side, you could try

.translation {
    grid-column: 2;
}

.root {
    grid-column: 1;
}

Perhaps one of our resident CSS wizards (Ven. @Pasanna ?) could come up with something more robust.

5 Likes

I’m not sure what you are trying to do with the side-by-side. For me the side-by-side wasn’t messed up with your modification.

When I add this:

.translation {
    order: 2;
}

.root {
    order: 1;
}

It looks good on line by line.

But I get this when I change the view setting to side by side:

So rather than lining up, they are staggered.

If I then add this:

.translation {
    grid-column: 2;
}

.root {
    grid-column: 1;
}

It looks perfect. However…

When I change my site setting back to view line by line, it looks like this:

So it’s still side by side. There is some other strangeness, but that’s the big problem.

It appears this is grid layout. I’m far more familiar with flex, so it’s kind of puzzling.

1 Like

I’ve been using my css workaround and wanted to mention that when you try to select text things go very wrong. And of course since the text hasn’t actually been moved, even when you do manage to select what you need, it won’t be in the order you expect.

So I’d have to give my solution a :-1:

Yes, I experienced that. It would be better to have an inbuilt-option - or if not, simply to switch the order permanently to original followed by translation.

1 Like

Thanks for the request and suggestions. The layout is driven by the assumption that most people will read translations primarily and refer to original occasionally. If that’s not you, it’s not such a good fit, I agree.

I have no theoretical problem with adding such an option BUT it’s way down on a long list of priorities for our overworked team. If someone wants to pursue it I’d appreciate if you created a GitHub issue with as detailed a technical specification as possible. Ideally, if there’s a programmer who can code it, we can test and launch.

3 Likes

I forgot to mention that my SC-Light app puts the Pali on top or on the left.

You switch it between line by line or side by side by pressing s. As I was trying to keep the app as light weight as possible I didn’t make a button for that, but if you forget what it is there are instructions in the console (F12) I probably ought to somehow work that into the interface.

Personally I have gotten used to the way SC is set up, but I don’t really believe that skipping over the root of the translation you just read to read the next translation is really any different in terms of priority than skipping over the root to read the translation.

There are also already enough view options that people have been known to miss out on key features to the site. Especially with the (imho) unintuitive horizontal scroll we currently have. And when thinking about adding a keyboard shortcut to toggle through the view options (plain/side by side/line by line) I wouldn’t want to increase that to five (plain, root on top, translation on top, root on left, translation on left)

2 Likes

I hadn’t forgotten this request

#segmented_text_content .root {
    grid-row: 1;
    grid-column:2;
}

works a bit better than the above suggestion. The headings are still out of alignment in side-by-side mode and the columns are translation [1] pali [2] but I figure that’s not so important.

unfortunately segment numbers are in the way though :frowning:

1 Like

Here is the custom css for ordering the line-by-line in the following order

  • segment ID
  • Pali
  • Translation
#segmented_text_content .reference {
    grid-row: -1;
 
}
#segmented_text_content .root {
    grid-row: 2;
    grid-column:2;
}
1 Like

I added just this to Stylus and I get this when I have line by line view selected:

I’m afraid I must be missing something. Please pretend I’m a css idiot. Actually, no need to pretend :melting_face:

This with the same css but side by side selected:

It’s not you it’s me!

It was me being lazy. I only tested in Safari. I’ve now installed stylus.

In safari the override order for custom stylesheets puts the grid-column:2; secondary so that it is only active in two column view.

In safari

.translation, .root {
grid-column: 1;
}
override my custom style in the line-by-line but this doesn’t seem to happen in stylus.

I’m going to grumble now and ask why there isn’t a class injected into the layout when the view is toggled?! This would make so much sense. sigh

1 Like