GoldenDict Forum

Все-таки, решение выводить словари через HTML и CSS гениально. Если ваши глаза, как и мои, тоже не могут смириться с нынешней иконкой звука, есть способ заменить ее самому, не дожидаясь билда и не корежа файлы программы. Вот как это получилось у меня, стильно и аккуратно:

Обновление: ниже еще и векторная версия на чистом CSS.



Создадим в директории %APPDATA%/Goldendict файл article-style.css и напишем туда следующее:

Code: Select all

.dsl_s_wav img {
    display: none;
}

.dsl_s_wav a {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('АБСОЛЮТНЫЙ_ПУТЬ_К_ИКОНКЕ_НА_ДИСКЕ/ИМЯ_ФАЙЛА.PNG') no-repeat center;
    vertical-align: text-bottom;
}

Первый фрагмент кода скрывает отображение картинки с иконкой. Вместо этого мы применим правильную CSS-технику с картинкой в фоне.

Бонус: при копировании текста и вставке, например, в "Ворд", фантомный IMG больше не будет преследовать вас.

Кстати, работает не только абсолютный путь, но и урлы в интернете -- можно грузить иконки с серверов, например вот: . Разумеется, размеры в CSS надо приводить в соответствие. К сожалению, я не разобрался, можно ли положить иконку в какой-то из каталогов GD, чтобы прописать относительный путь. Для мобильной версии, к сожалению, трюки с CSS пока не актуальны

Если бы можно было еще как-то повлиять на логическую структуру HTML! Впрочем, даже скудные возможности тегов DSL позволяют делать, например, вот такие вещи:



Правда, для этого приходится чистить код скачанных словарей регулярными выражениями и периодически отлавливать мелкие глючки, ну и извращаться с CSS.

Novikov wrote:Если ваши глаза, как и мои, тоже не могут смириться с нынешней иконкой звука, есть способ заменить ее самому, не дожидаясь билда и не корежа файлы программы.

Ай, хорошо! Давно уже хотел тоже подобрать CSSку дабы можно было икноку звука менять по своему вкусу.

Novikov wrote: К сожалению, я не разобрался, можно ли положить иконку в какой-то из каталогов GD, чтобы прописать относительный путь.

После некоторых экспериментов, вот какая строка у меня смогла добиться правильной работы с относительным урлом:

Code: Select all

background: url('file:../GoldenDict/control_play.png') no-repeat center;

Этот код предполагает, что GoldenDict установлен в каталоге GoldenDict. И что файл control_play.png находится в корне каталога GoldenDict.

Избавиться от "../Goldendict" не смог, ибо без этого не работает почему-то. Ну да это уже не так важно. Главное, что относительные урлы в хоть каком-то виде работают, что было просто-таки необходимым для работы в портабельном режиме.

О, отлично, спасибо!

Для портативной версии я написал, внимание... векторную масштабируемую иконку!

"Написал" -- не потому, что типа великий художник написал полотно, а потому, что написал ее на чистом CSS, без единой картинки, и вот как она выглядит при разных увеличениях:


Маленькая аккуратная иконочка.


Кнопочка может реагировать на наведение мыши! Шок! Видео!


При увеличении масштаба роскошные CSS-иконки не теряют качества, в то время как их растровые сестренки покрываются пикселями.

Ну и, разумеется, код (простите, сортировать CSS-свойства сейчас времени нет)!

Code: Select all

.dsl_s_wav img {
    display: none;
}

.dsl_s_wav a {
    display: inline-block;
    vertical-align: text-bottom;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 100px;
    border: 1px solid #555;
    cursor: pointer;
    padding: 0;
    background: #2C99DE;
    -webkit-box-shadow: 1px 1px #999, inset 1px 1px #33b0ff, inset -1px -1px #1c618c;
    color: #FFF;
    margin: 0 2px;
    background-image: -webkit-gradient(
   linear,
   left top,
   right bottom,
   color-stop(0.25, rgb(44,154,222)),
   color-stop(0.75, rgb(35,109,140))
    );
    -webkit-user-select: none;
}

.dsl_s_wav a:after {
    content:"\266a  ";
    margin: -5px 0 0 5px;
    width: 10px;
    height: 10px;
    display: inline-block;
    background: none;
    font-size: 18px;
}

.dsl_s_wav a:hover {

    -webkit-box-shadow: inset 1px 1px #1c618c, inset -1px -1px #2ea1e9;
}

Итак, что имеем в итоге:

• Независимость от картинок, возможность работы с портативной версией.
• Масштабируемость без потери качества.
• Полная настраиваемость: можно менять размеры, цвета, значок, положение по отношению к тексту, поведение при наведении и нажатии и многое другое. Вы можете даже сделать кнопку квадратной! Или вытянутой. Или как в словаре Макмиллиана, с надписью:
  
• Образец моего нестандартного подхода к решению задач.
• Образец моего тщеславия.

Желающим выпендриться с градиентами, бликами и тенями, дарю код для вот такой стеклянной кнопочки:

Code: Select all

.dsl_s_wav img {
    display: none;
}

.dsl_s_wav a {
    text-decoration: none;
    -webkit-user-select: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 100px;
    margin: 0 2px;
    vertical-align: text-bottom;   
}

.dsl_s_wav a {   
    color: #FFF;
    border: 1px solid #798415;   
    -webkit-box-shadow: 1px 1px #CCC,  inset -1px -1px #4E7500;

    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1)));
}

.dsl_s_wav a:hover {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043));

    border: 1px solid #A2B01C;
    -webkit-box-shadow: 1px 1px #CCC, inset -1px -1px #8A991A;
}

.dsl_s_wav a:active {
    -webkit-box-shadow: 1px 1px #CCC, inset 1px 1px #B1C421;
}

.dsl_s_wav a:after {
    display: inline-block;
    font-family: "Webdings";
    content:"X";
    margin: -4px 0 0 4px;
    width: 20px;
    height: 20px;
    font-size: 18px;
    vertical-align: center;
   
    -webkit-background-clip: text;
    color: #E6EF8F;
    -webkit-text-stroke: 1px #51580E;
}

.dsl_s_wav a:hover:after {
    -webkit-text-stroke: 1px #656E11;
}

Пара нюансов: этот значок -- из шрифта Webdings, а при некоторых масштабах страниц у некоторых символов Webkit иногда на пиксель смещение делает.

Очень КРАСИВО!!! стильно и аккуратно!!!

Novikov можно ли получить твой полный CSS-код (article-style.css).

Заранее благодарю !