Подручными средствами - .fb2 в .doc CSS. Браузеры. Игры с клавиатурой... Фокус-покус. Практика использования псевдокласса :focus
Trifler Blog
Подручными средствами - .fb2 в .doc
Никогда не приходилось этим заниматься, но все когда-нибудь бывает в первый раз… Возможно предлагаемое всем известно и лишь местный автор как всегда снова открывает свою «Америку».
Речь идет о конвертации файлов с раcширением .fb2 в привычный вордовский документ с возможностью его дальнейшего редактирования не посредственно в Microsoft Office.
Задача на первый взгляд имеет достаточно простое решение, но не любовь к установке нового софта, время, потраченное на его изучение показалось мастеру Горди слишком обременительным.
Задача
Конвертируем .fb2 в .doc
Программное обеспечение
Только то, что изначально входит в состав Windows XP
- Блокнот
- Internet Explorer
- Microsoft Word
Шаг первый
Открываем файл с раcширением .fb2 в блокноте и сохраняем его с расширением .htm (.html)
Шаг второй
Открываем полученный файл в выше упомянутом браузере, все выделяем и копируем.
Шаг третий
Открываем Microsoft Word, производим вставку из буфера обмена скопированного ранее и сохраняем полученное.
Результат
Без установки дополнительного софта обошлись подручными средствами и имеем возможность редактировать содержимое.
*****
Более элегантным и менее затратным решением может быть постое переименование файлов с расширением .fb2 в .htm, тем самым исключая из процесса "Первый шаг".
Далее по уже стандартной схеме - открываем полученные файлы в браузере, выделяем, копируем, потом вставка скопированного в Microsoft Word и, как завершающий этап сохранение документа с разрешением .doc.
*****
Структура документа с расширением .fb2 такова, что IE6+ могут вывести только то, что расположено внутри тега <body>...</body>
Браузеры - FireFox, OPERA, Google Chrome отображают на экране монитора все содержимое документа.
CSS. Браузеры. Игры с клавиатурой...
Два года назад местный автор методом "научного тыка" совершенно случайно наткнулся на грязный css hack для IE8, который до сих пор в исключительных случаях приносит неоценимую пользу.
Напомню:
.XXX {color:#a00\0/;}
Указанный цвет увидит только IE8.
А вот с hack'ом для IE7 забавная история приключилась. Хак известный:
*+html.XXX {color:#a00;}
Был по запарке записан так:
*+*.XXX {color:#a00;}
Понятно, разбор полетов ошибку выявил, но стало интересно...
Тупой перебор доступных с клавиатуры знаков привел к такому:
*+*.XXX {color:#a00;}
*~*.XXX {color:#a00;}
IE6, как и полагается сказал "привет" и все поигнорировал :)
Все остальные браузеры последних версий, включая IE7(8,9), скушали предлагаемое на ура.
Введение дополнительного пробела после второй звездочки приводит их в чувство.
Но важно совершенно другое.
Имеем два абсолютно идентичных блока:
html
<div class="hackcss">
...
</div>
<div class="hackcss">
...
</div>
css к ним
.hackcss {
border:#00a 1px solid;color:#00a;
margin:10px auto;padding:7px;width:400px;
}
*+*.hackcss {border:#a00 1px solid;color:#a00;}
Наблюдаем странную вещь, которой объяснений разумных нет.
Как говориться не верь глазам своим...
Фокус-покус. Практика использования псевдокласса :focus
Продолжаем мини-сериал посвященный псевдоклассу :focus. В первой части рассмотрен частный случай - вывод графики во всплывающем слое при клике на преьюшку.
Воспользуемся описанным там приемом.
-
JavaScript -
объектно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript.JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса...
html
Вариант для выделенного слова или фразы:
<div class="cliktxt">
Текст...
<span tabindex="1" title="">слово</span>
Много текста...
<dl>
<dt></dt>
<dd>
<img src="ХХХ.xxx">
<p>Поясняющий текст</p>
</dd>
</dl>
</div>
Вариант для сноски:
<div class="cliktxt">
Текст...
<sup tabindex="1" title="">[1]</sup>
Много текста...
<dl>
<dt></dt>
<dd>
<img src="ХХХ.xxx">
<p>Поясняющий текст</p>
</dd>
</dl>
</div>
Основной блок с классом "cliktxt" заменяет стандартный параграф, ему назначены такие же поля и отступы, чтобы указанный контейнер ничем не выделялся от остального текста.
Как видно из html-кода, отсутствует практически всегда полагающийся в таких случаях тег <a>, что наклыдывает определенные ораничения и ведет к усложнению html-конструкции, а также не работоспособности в браузерах IE6(7), но в этом и заключается главный смысл данного извращения :)
Одной из причин исключение тега <a> из html, является помощь поисковикам, которые любят добиться во все ссылки, даже с пустым url, находящиеся на web-странице, мы же не даем им ни единого шанса куда-то там уйти и возможно уже никогда не вернуться. Не стоит забывать и о странностях "Хитрых контор" :)
css
.cliktxt {margin:15px 25px 15px 20px;padding:0px 0;}
.cliktxt span,.cliktxt sup {color:#a00;cursor:pointer;outline:0;}
.cliktxt span:hover,.cliktxt sup:hover {color:#00a;}
.cliktxt dl {margin:0;padding:0;display:none;}
.cliktxt dl dd {
background:#ddd;border:#000 1px solid;
margin:0;padding:7px 4px;width:300px;
position:fixed;top:1%;left:18%;z-index:100;
}
.cliktxt dl img {
border:#000 1px solid;float:left;
margin:7px 8px 0;width:140px;height:auto;
}
.cliktxt dt {
background:#ccc;border:#000 1px solid;
opacity:0.2;filter:alpha(opacity=20);z-index:100;
position:fixed;top:0;right:17%;bottom:0;left:17%;
}
.cliktxt :focus + dl {display:block;}
.cliktxt dd p {font:11px/1.2 arial;margin:0 10px;padding:4px 0;}
В стилях нет ничего особенного, все легко настраивается, плюс полная независимость предлагаемого от любых движков, простейшая интеграция в любой текст, любой web-страницы. Стили загоняются в основной файл css, html хранится под рукой и по мере необходимости выбранный вариант вставляется в тело поста, далее по образцу и подобию в соответствующие места добавляется текст, прописывается путь к графике, если она будет использована, в противном случае удаляется тег <img> и все.
-
Сноска - дополнительный текст (пояснение, ссылка на источник, примечание редактора и т. п.), помещаемый внизу полосы (колонки) и отделяемый от основного текста прямой линией.
"Сноска" набирается более мелким кеглем и сопровождается значком (цифрой или звёздочкой), который идентичен значку, стоящему у поясняемой части основного текста.
Нумерация "Сноски" бывает сквозной или по главам (разделам)...
Пример использования со словом находится в третьем абзаце.
Тест страница.