HTML-макет для статического двуязычного текста: как скрыть один язык? ⇐ Html

[Anonymous]

Имея двуязычный текст, я хочу отображать абзацы рядом.
Моя цель — скрыть один из языков, чтобы пользователь мог читать только на одном языке. При необходимости пользователь должен иметь возможность снова отображать оба языка рядом друг с другом.
При прокрутке двуязычной страницы соответствующие абзацы должны быть выровнены (то есть только один ползунок для окна).
До сих пор я использую простую таблицу для каждой главы, затем горизонтальную линию и снова таблицу для следующей главы. Каждый абзац находится внутри td, два связанных абзаца образуют один tr. Таким образом, соответствующие абзацы выравниваются по горизонтали. Результат прост и почти удовлетворительен:


Исходный код HTML выглядит следующим образом:

Код: Выделить всё

table {
width: 100%;
}

td {
padding-right: 2em;
vertical-align: top;
width: 50%;
}

.no {
padding-right: 1em;
font-size: x-small;
color: maroon;
}

td img {
display: block;
margin-left: auto;
margin-right: auto;
}





This is the text in one language.
Toto je text v druhém jazyce.


This is a long text [...] needed.
Toto je dlouhý text [...] potřeby.


This is a long text [...] needed.
Toto je dlouhý text [...] potřeby.





Let the next chapter starts after the horizontal line.
Další kapitola je oddělena vodorovnou čárou.


This is a long text [...] needed.
Toto je dlouhý text [...] potřeby.


This is a long text [...] needed.
Toto je dlouhý text [...] potřeby.

Я хотел бы добавить функционал, позволяющий: или скрыть один из языков, или переместить разделитель между языками. Цель состоит в том, чтобы представить выбранный язык и только тогда, когда пользователь хочет видеть оба языка одновременно.
HTML должен быть автономным и работать в автономном режиме.
Как это сделать?

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-language