Как выделить верхнюю строку текста разметки ruby ​​(для копирования + вставки)? - PullRequest
Новая
       34

Как выделить верхнюю строку текста разметки ruby ​​(для копирования + вставки)?

0 голосов
/ 01 апреля 2012

Я создаю HTML-страницы с базовой строкой и аннотациями поверх слов и букв базовой строки. Прямо сейчас я использую теги ruby, rb и rt , и я тоже пробовал таблицы и div. Это выглядит так:

text ruby markup

Источник: 

<body>
<ruby>
<rb>新</rb><rt>しん</rt>
<rb>Brasil</rb><rt>ブラジル</rt>
<rb>1</rb><rt>いち</rt>
etc.

Мой вопрос: Есть ли способ переписать HTML-код, чтобы выходные данные выглядели примерно одинаково, но в то же время позволяли выделять только маленькие символы, показанные желтым цветом, без необходимости выбирать большие буквы с ними (чтобы выделение можно было скопировать в буфер обмена)?

Прямо сейчас, и с помощью простых методов ячеек таблицы, которые я пробовал, вы вынуждены выделять большие буквы маленькими.

Из-за рисунка ассоциация выглядит совершенно случайной, но сложность заключается в том, что разметка должна располагаться по центру с соответствующими "большими" буквами.

1 Ответ

0 голосов
/ 01 апреля 2012 
<style>
.r { display: inline-block;  text-align: center;}
.ra { display: block;  font-size: 60%; }
</style>
<a class=r><span class=ra>しん</span>新</a>
<a class=r><span class=ra>ブラジル</span>Brasil</a>
<a class=r><span class=ra>いち</span>1</a>

В браузерах, которые поддерживают разметку ruby, аннотации ruby ​​выглядят выбираемыми и копируемыми для меня.Но в IE, когда выбрана аннотация, характерный цвет фона, используемый браузером, распространяется и на базовые тексты, поэтому он выглядит , как вы выбрали оба.Если вы нажмете Ctrl + C и Ctrl + V, вы увидите, что копируется только аннотация.В Chrome эта проблема не существует: выделяется только выбранная аннотация.

Это все еще может быть проблемой.Возможно, более серьезная проблема заключается в том, что Firefox не поддерживает разметку ruby.

В коде, который я предлагаю выше, используется разметка текстового уровня с классами вместо разметки ruby ​​и стилей, которые отображают ее в рубиновой манере.Я ставлю аннотацию перед аннотированным словом, поскольку тогда легко разместить аннотацию над базовым текстом - без позиционирования, просто сделав элемент контейнера встроенным блоком, а аннотацию - блоком внутри него.

Разметка немного грязная, но этот подход широко работает во всех браузерах.Я полагаю, что основная проблема связана с display: inline-block, но кажется, что при простом использовании, подобном этому, поддержка существует даже в старых версиях IE (из IE 5.5).

...