На нашем сайте мы уделяем особое внимание отрисовке математических формул по понятным причинам: здесь актуально публиковать тексты с формулами. Если в качестве форму использовать картинки (так генерирует html-страницу ворд), то это наихудший вариант, так как со временем картинки теряются, а если что-то надо поменять, то это вообще превращается в проблему. Не говоря уже о том, что если формул много, то и картинок будет много, а значит они будут занимать много места, долго грузиться и все время сползать в тексте. Поэтому наилучший вариант - технологии типа MathJax или в крайнем случае MathML.
Точно такая же проблема возникает и на сайтах, имеющих отношение к химии. Это могут быть тексты научного плана, в которых надо привести формулы химических реакций или сайты с учебными материалами по химии. Популярны в интернете, к примеру, сайты с готовыми домашними заданиями по химии. Чтобы выложить на веб-странице ГДЗ по химии 8 класс Рудзитис и Фельдман 2016, необходимо, чтобы на сайте был установлен специальный фреймворк для парсинга латекс-кода и последующей отрисовки элементов элементов химической формулы. Однако, если на сайте только время от времени публикуются химический формулы, то можно во многих случаях обойтись и штатными html-тегами без использования «тяжелой артиллерии».
Например, необходимо отобразить вот такую формулу:
H3BO3 + 3C2H5OH = (C2H5O)3B + 3H2O
Кстати, вопрос знатокам химии - это что за формула? Ваши ответы пишите в комментариях. А вот так будет выглядеть код, отвечающий за отображение этой химической формулы на веб-странице.
<span class="echem-formula">H<sub>3</sub>BO<sub>3</sub> <span class="echem-op">+</span> <b>3</b>C<sub>2</sub>H<sub>5</sub>OH <span class="echem-op">=</span> (C<sub>2</sub>H<sub>5</sub>O)<sub>3</sub>B <span class="echem-op">+</span> <b>3</b>H<sub>2</sub>O</span>
Если же понадобится добавить на страницу структурную формулу (как на изображении слева), то без специального инструментария придется или вручную рисовать формулу в графическом редакторе или таки воспользоваться специальными онлайн-редакторами или таки устанавливать такой на свой сайт. Пожалуй, для таких случаев лучше всего подойдет CharChem, в котором можно генерировать SVG-изображение структурной формулы химического вещества.
Слева - пример отрисовки такой формулы. Главное преимущество такой технологии - масштабируемость формул. Отлично подходит такой вариант для сайтов с адаптивным дизайном. На экране любого размера качество отрисовки формулы будет идеальным. Чтобы убедиться в этом просто сравните здесь качество двух картинок. Ниже приведем сам svg-код формулы. Не пугайтесь, верстать вручную такой не придется - есть автоматический генератор.
<svg xmlns="http://www.w3.org/2000/svg" width="95" height="108.8">
<defs>
<style type="text/css">
<![CDATA[
text { dominant-baseline:text-after-edge; }
.fnt-std{font-size:16px; font-family:Arial, Helvetica, sans-serif; fill:rgb(0, 0, 51); }
.fnt-half{font-size:10px; font-family:Arial, Helvetica, sans-serif; fill:rgb(0, 0, 51); }
.fnt-Atom{font-size:16px; font-family:Arial, Helvetica, sans-serif; fill:rgb(0, 0, 51); }
]]></style>
</defs>
<path d="M 42.5 15.8 L 42.5 15.8 z" stroke-width="1" stroke="rgb(0, 0, 51)" />
<path d="M 48.28 25.43 L 58.9 31.56 M 48.28 28.84 L 58.9 34.97 z" stroke-width="1" stroke="rgb(0, 0, 51)" />
<path d="M 64.67 41.4 L 64.67 54.2 z" stroke-width="1" stroke="rgb(0, 0, 51)" />
<path d="M 58.9 63.83 L 48.28 69.96 M 58.9 67.24 L 48.28 73.37 z" stroke-width="1" stroke="rgb(0, 0, 51)" />
<path d="M 36.72 71.66 L 26.11 65.54 z" stroke-width="1" stroke="rgb(0, 0, 51)" />
<path d="M 18.63 54.2 L 18.63 41.4 M 22.04 54.2 L 22.04 41.4 z" stroke-width="1" stroke="rgb(0, 0, 51)" />
<path d="M 26.11 33.26 L 36.72 27.14 z" stroke-width="1" stroke="rgb(0, 0, 51)" />
<path d="M 42.5 79.8 L 42.5 79.8 z" stroke-width="1" stroke="rgb(0, 0, 51)" />
<text x="36.72" y="19" class="fnt-Atom">H</text>
<text x="36.72" y="31.8" class="fnt-Atom">C</text>
<text x="58.9" y="44.6" class="fnt-Atom">C</text>
<text x="70.45" y="44.6" class="fnt-Atom">H</text>
<text x="58.9" y="70.2" class="fnt-Atom">C</text>
<text x="70.45" y="70.2" class="fnt-Atom">H</text>
<text x="36.72" y="83" class="fnt-Atom">C</text>
<text x="3" y="70.2" class="fnt-Atom">H</text>
<text x="14.55" y="70.2" class="fnt-Atom">C</text>
<text x="3" y="44.6" class="fnt-Atom">H</text>
<text x="14.55" y="44.6" class="fnt-Atom">C</text>
<text x="36.72" y="95.8" class="fnt-Atom">H</text>
</svg>
Рубрика «Разное»
2019-09-22 • Просмотров [ 3333 ]
Похожие публикации
Если же понадобится добавить на страницу структурную формулу (как на изображении слева), то без специального инструментария придется или вручную рисовать формулу в графическом редакторе или таки воспользоваться специальными онлайн-редакторами или таки устанавливать такой на свой сайт. Пожалуй, для таких случаев лучше всего подойдет CharChem, в котором можно генерировать SVG-изображение структурной формулы химического вещества.
Слева - пример отрисовки такой формулы. Главное преимущество такой технологии - масштабируемость формул. Отлично подходит такой вариант для сайтов с адаптивным дизайном. На экране любого размера качество отрисовки формулы будет идеальным. Чтобы убедиться в этом просто сравните здесь качество двух картинок. Ниже приведем сам svg-код формулы. Не пугайтесь, верстать вручную такой не придется - есть автоматический генератор.
