Как сделать химическую формулу в html

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

MathML — это приложение XML , используемое для представления математических символов и формул в документах WWW .

Необходимость разметки MathML вызвана тем, что формат HTML, несмотря на множество замечательных свойств, имеет довольно-таки ограниченные возможности передачи математических обозначений. Чаще всего формулы на HTML-страницах представляются в виде графики (растровой или векторной), но этот способ имеет очевидные недостатки. Например, формулу-рисунок практически невозможно отредактировать, а качество ее при печати обычно оставляет желать лучшего. Развитие идей и привело к созданию целого семейства языков математической разметки, к которым относится и MathML. Разработчики осознавали глубину проблематики и поставили цель создать спецификацию, удовлетворяющую следующим ограниченным, но все же достаточно важным требованиям:

ü легкость освоения и ручного набора основных математических обозначений

ü максимальная совместимость с другими математическими форматами, которая должна обеспечиваться соответствующими конвертами

ü возможность вывода формул на различные терминальные устройства

ü поддержка расширяемости, т. е. введения новых символов, схем.

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

Язык MathML предлагает гибкую и расширяемую систему записи математического материала, позволяющую взаимодействовать с внешними программами и осуществлять высококачественное отображение в различных информационных средах. Общий принцип использования MathML состоит во встраивании математических конструкций в XHTML/HTML-документ. Cоздание веб-страниц с использованием MathML возможно тремя способами: HTML + презентационный MathML, XHTML + презентационный MathML, XML + MathML

Эту статью я задумал еще на втором курсе, когда впервые решил перейти с Word'а на LaTeX. В конце третьего курса я ее начал, и, наконец, после защиты диплома я нашел в себе силы ее дописать. Здесь я постарался собрать свой опыт (и созданные костыли, куда же без них) в использовании LaTeX при подготовке текста, связанного с химией и в решении тех проблем, с которыми столкнулся я.

Введение

К использованию LaTeX меня подтолкнул тот факт, что однажды при попытке добавить подписи к картинкам Word просто испортил файл: файл открывался, текст отображался, однако отредактировать что-то было невозможно. Файл был успешно восстановлен из резервной копии, но осадочек, как говорится, остался. После этого момента я и вспомнил о LaTeX, о котором когда-то слышал. Далее последовал стандартный путь изучения: гугл, книги, stackexchange, метод проб и ошибок, etc.

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

Статья подразумевает некоторые знания в LaTeX, примерно на уровне написать простую преамбулу, вставить картинку и сверстать таблицу.

Общие настройки

Я использую движок XeLaTeX и biber для обработки библиографической информации.
Общие идеи преамбулы я взял у Amet13 и дополнил необходимыми мне пакетами.

Из непосредственно химических пакетов:

chemmacros — дает возможность выводить длинные названия веществ с адекватными переносами, и форматировать всяческие экспериментальные данные (спектры, температуры плавления)
mhchem — форматирует простые (строчные) формулы и реакции
chemscheme — добавляет плавающее окружение для схем реакций со своим названием и нумерацией
chemnum — нумерация соединений

placeins — вместе с модификатором h! из пакета float не позволяет плавающим рисункам уплывать куда-нибудь не туда
todonotes — позволяет оставлять заметки на полях и в тексте
threeparttable — добавляет возможность делать сноски к таблицам
makecell — переносы в таблицах (очень удивился, когда узнал, что для этого требуется отдельный пакет)

Организация файлов

Мне показалось логичным создать корневой файл, в котором подключается все необходимое — преамбула, разделы, приложения. Для всего, что подключается один раз и навсегда — папка include, для разделов — папка sections, для приложений — appendix.
У каждого раздела в папке sections своя папка, где хранятся изображения в папке img и исходные файлы схем в папке ChemDraw.

Для файлов был создан git-репозиторий в основном для бэкапа и возможности фиксировать добавление тех или иных фрагментов диплома или правок.

Картинки

Мне было удобнее использовать EPS или векторный PDF, который умеет выводить любой химический редактор.

Для создания изображения из нескольких частей, подписанных буквами, служит пакет subfigure с настройкой:

Таблицы

Таблицы в целом стандартные, созданы в основном с помощью Excel и сайта Tables Generator. Для того, чтобы входило больше текста все таблицы обернуты в окружение small, для переносов в ячейках строк используется пакет makecell. Для более книжного вида используются линейки различной толщины из пакета booktabs, сноски к таблицам делаются пакетом threeparttable.

Цитаты

Для LaTeX существует несколько библиографических движков: biblatex, biber. Эти программы требуют наличие bib-файла. Для его подготовки существуют несколько подходов от ручного редактирования до специальных программ типа Mendeley и Zotero.

Я пользуюсь Mendeley, потому что там у меня есть коллекция отсортированных статей.

Единственная проблема — при поиске библиографической информации по doi Mendeley загружает также дату выхода статьи, а biblatex ее вставляет в документ, давая что-то типа:

Jakob F., Herdtweck E., Bach T. Synthesis and Properties of Chiral Pyrazolidines Derived from (+)Pulegone // Chemistry A European Journal. — 2010. — Июль. — Т. 16, No 25. — С. 7537—7546.

Jakob F., Herdtweck E., Bach T. Synthesis and Properties of Chiral Pyrazolidines Derived from (+)Pulegone // Chemistry A European Journal. — 2010. — Т. 16, No 25. — С. 7537— 7546.

Проблема решается двумя командами в преамбуле:

Также по-умолчанию несколько ссылок подряд разделяются не запятой, как это требуется по ГОСТу, а точкой с запятой. Это легко решается одной командой:

Непосредственно химия

Формулы

Поскольку диплом у меня по органической химии, и все структурные формулы вставляются как изображения, то и от пакета мне требуются только простейшие формулы типа CO2, H2O и прочих, что прекрасно делается пакетом mhchem.

превращется в

Нумерация соединений

В органической химии принято присваивать соединениям номера, ибо иногда название вещества по системе ИЮПАК, призванной (по идее) обеспечивать однозначное соответствие между структурной формулой и названием, может растянуться строчки на две-три:

2-(1-(3,5-bis((perfluorophenyl)methoxy)benzoyl)-3-cyano-4-((E)-2-(5-((E)-4-(dibutylamino)styryl)thiophen-2-yl)vinyl)-5-oxo-1,5-dihydro-2H-pyrrol-2-ylidene)malononitrile

Современные редакторы химических структур умеют генерировать их автоматически, но на английском, и приведение их к русскоязычном нормам требует некоторых усилий, помимо перевода.

Возвращаясь к нумерации, передо мной встали две задачи: вести эту нумерацию в LaTeX и каким-то образом выводить ее на схемах в документе.

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

Вторая же проблема имеет несколько вариантов решения. Во-первых существует изрядно устаревший подход с заменой строки текста в eps-файле с помощью специального пакета в момент компиляции документа. Способ малоприменимый на практике в моем случае: эти пакеты совместимы только с оригинальным LaTeX (а с некоторыми костылями и с pdfTeX), а новые версии ChemDraw хранят текст в eps-файле побуквенно.

Вариант номер два — отрисовывать структурные формулы средствами LaTeX, для чего служат такие пакеты как XyMTeX и chemfig. Вариант не лишенный достоинств, но требующий перевода структур в формат пакета вручную или почти вручную. В случае chemfig, существует скрипт на Python под названием mol2chemfig (который я так и не смог у себя запустить), который позволяет из стандартного формата mol получать код для отрисовки структурной формулы в LaTeX. Однако этот подход требует ручного создания схем в документе, что мне не понравилось.

В итоге я остановился на пакете overpic, который позволяет вывести любой текст поверх любого изображения в любом месте. Из недостатков — необходимость этот текст вручную выставлять, пересобирая в процессе документ несколько раз. Зато это позволяет рисовать схемы в WYSIWYG редакторе по типу ChemDraw, пользуясь всеми его графическими возможностями.

Экспериментальные данные

В отличие от основной части работы, в экспериментальной части принято приводить полные названия соединений по ИЮПАК, а не номера. Проблема заключается в том, что LaTeX в каждом слове допускает только один перенос, а команда \iupac<> из пакета chemmacros позволяет своему аргументу переноситься несколько раз и добавляет макросы \E, \Z и подобные для использования в названиях соединений.

Также принято приводить экспериментальные характеристики полученных соединений — температуру плавления, спектры и прочие подобные вещи.

будет выведено как:

Приложения

Неотъемлемая часть любого диплома — приложения. Обычно туда выносят все, что имеет слишком большой объем для основного текста, но может быть полезно. Для этого я использовал пакет appendix с некоторыми костылями.

Стандарты оформления моего ВУЗа требуют не нумеровать страницы в приложениях и давать их заголовки с выравниванием вправо.

Из оглавления я также решил их убрать.

По-умолчанию пакет appendix нумерует приложения латинским буквами, я изменил нумерацию на арабскую в соответствии со стандартами оформления (опять с помощью костыля)

В приложениях у меня живут в основном ЯМР-спектры в виде картинок, которые из программы для их обработки выходят в виде PDF формата A4 альбомной ориентации. К сожалению, у меня так и не получилось в одном документе совместить книжную и альбомную ориентацию (я подозреваю, что это вообще невозможно), поэтому пришлось изобретать свой велосипед с использованием пакета rotating.

Список сокращений

Список сокращений я делал с использованием пакета acro. Он позволяет создать отдельно список сокращений, вывести его в необходимом месте и вставлять сами сокращения по тексту в нужном формате. Большего мне не требовалось.

Часть списка сокращений выглядит так:

Презентация

Вместо заключения

Главный вопрос: стоило ли оно того? К окончательному выводу я так и не пришел, поскольку при всех его достоинствах LaTeX выдает PDF-файл, в который невозможно вносить исправления. Из-за этого моему руководителю приходилось каждый раз присылать список правок в виде файла в Word'e. Также мне сильно повезло с тем, что в моем ВУЗе отстутствует такое мероприятие как нормоконтроль, и в большинстве вопросов оформления я был ограничен только своим чувством прекрасного и здравым смыслом.

В итоге я решил для себя, что связываться с LaTeX имеет смысл только для довольно больших документов, иначе создание всех файлов и организация папок занимает больше усилий, чем содержательная часть работы.

Наведите курсор на ячейку элемента, чтобы получить его краткое описание.

Чтобы получить подробное описание элемента, кликните по его названию.

H +

Li +

K +

Na +

NH₄ +

Ba 2+

Ca 2+

Mg 2+

Sr 2+

Al 3+

Cr 3+

Fe 2+

Fe 3+

Ni 2+

Co 2+

Mn 2+

Zn 2+

Ag +

Hg 2+

Pb 2+

Sn 2+

Cu 2+

OH -

F -

Cl -

Br -

I -

S 2-

HS -

SO₃ 2-

HSO₃ -

SO₄ 2-

HSO₄ -

NO₃ -

NO₂ -

PO₄ 3-

CO₃ 2-

CH₃COO -

SiO₃ 2-

Растворимые (>1%)

Нерастворимые (

Спасибо! Ваша заявка отправлена, преподаватель свяжется с вами в ближайшее время.

Вы можете также связаться с преподавателем напрямую:

Скопируйте эту ссылку, чтобы разместить результат запроса " " на другом сайте.

Изображение вещества/реакции можно сохранить или скопировать, кликнув по нему правой кнопкой мыши.

Этим вы поможете сделать сайт лучше.

К сожалению, регистрация на сайте пока недоступна.

На сайте есть сноски двух типов:

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

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

Внимание: Если у Вас в браузере отключен JavaScript или Вы пользуетесь какими-то специфическими расширениями и блокировщиками - я не виноват, что формулы Вам не видны.

Попробуем написать формулу в HTML с помощью mathjax.

На февраль 2020-го года актуальный код выглядит так

После этого можно начинать писать формулы.

Например, напишем, что ускорение это сила делённая на массу.

Корни квадратного уравнения

Как поставить пробел

Как видите, 1 и joule записаны без пробела. Это не очень красиво

Если теперь добавить после 1 обратный слэш то пробелы появятся

Сформирован новый релиз программы LaTeX2HTML 2018 , предназначенной для преобразования исходных документов в формате LaTeX в web-страницы с разметкой HTML.

Поддерживается разбиение документа на несколько связанных HTML-файлов с автоматически генерируемыми панелями для навигации, перекрёстными ссылками, оглавлением и сносками.

Сложные формулы и таблицы могут экспортироваться в виде изображений, для которых возможно inline-встраивание в HTML без сохранения в отдельных файлах.

Читайте также: