Система описания химических формул для WEB.

Таблица Менделеева

В данном разделе обсуждаются принципы генерации таблицы Менделеева, обладающей различными свойствами. Кроме того, даны несколько интересных примеров.
Система CharChem предоставляет возможность довольно просто вывести в HTML-документе таблицу Менделеева.
Вы можете воспользоваться сервисом генерации, чтобы манипулировать настройками в интерактивном режиме.

Список примеров

Как вывести таблицу

Простейший вариант генерации таблицы представлен несложным скриптовым кодом, который выделен синим в следующем примере.
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="http://charchem.org/download/charchem2.js"></script>
  <link rel="stylesheet" type="text/css" href="http://charchem.org/download/charchem.css" />
</head>
<body>
<h1>Таблица Менделеева</h1>
<div id="PeriodicSysTable"></div>
<script type="text/javascript">
  var dstElem = document.getElementById('PeriodicSysTable');
  if (dstElem) dstElem.innerHTML=ChemSys.drawTable();
</script>
</body>
</html>
Нажмите, чтобы показать или скрыть результат
Для начала, результат неплохой. Но в большинстве случаев потребуется внести какие-то изменения или дополнения. Это вполне возможно. Далее мы рассмотрим различные настройки, позволяющие управлять формированием таблицы.

Пример модификации

Допустим, нужно изобразить примерно такую таблицу, как в википедии при описании какого-либо химического элемента. А именно:
  1. Таблица должна быть широкой, т.е. актиноиды и лантаноиды располагаются в общей таблице.
  2. Цвета ячеек зависят от свойств элемента (щелочные металлы, галогены и т.д.)
  3. В ячейке выводится только обозначение элемента. Название, номер и масса не нужны.
Вот код, который позволяет вывести такую таблицу. (Только та часть, которая располагается внутри тега body)
<style type="text/css">
  #Table2 .name, #Table2 .mass, #Table2 .number {display:none;}
  #Table2 .id { font-size:12px; font-weight:100;}
</style>
<div id="Table2"></div>
<script type="text/javascript">
  var rules2 = Object.assign({}, ChemSys.TblRules.Wide);
  rules2.category = ChemSys.TblCategory.props;
  var dst2 = document.getElementById('Table2');
  if (dst2) dst2.innerHTML = ChemSys.drawTable(rules2);
</script>
Нажмите, чтобы показать или скрыть результат

Разберем пример, начав с нижних строчек. Как видно, функция ChemSys.drawTable принимает в качестве параметра набор свойств, описывающих таблицу.

В системе CharChem уже имеется несколько заранее подготовленных наборов свойств. Вот их список:
ChemSys.TblRules.Std Форма таблицы, принятая IUPAC. Используется по умолчанию.
ChemSys.TblRules.Wide Широкая таблица, где Лантаноиды и Актиноиды входят в общую таблицу.
ChemSys.TblRules.Short Классическая таблица Менделеева, с 8 группами.
В данном примере мы использовали схему Wide (задача 1). Но не в чистом виде, а слегка модифицированную:
  var rules2 = Object.assign({}, ChemSys.TblRules.Wide);
  rules2.category = ChemSys.TblCategory.props;
Здесь мы поменяли таблицу категорий элементов (задача 2). По умолчанию используется таблица категорий по блокам ChemSys.TblCategory.block. Но мы используем таблицу категорий по химическим свойствам - ChemSys.TblCategory.props. Обе эти таблицы тоже заранее заготовлены, но при желании можно использовать свою таблицу категорий.
Обратите внимание, что правила получаем при помощи функции Object.assign(). Это означает что rules2 является копией исходных правил. И все изменения, выполняемые с rules2 не повлияют на исходные правила.
Задача 3 решена с помощью CSS. В блоке <style> мы указали, что для нашей таблицы, выводимой в блоке Table2, нужно скрыть номер, название и массу элемента. А идентификатор элемента выводить тонким шрифтом высотой 12 пикселей.

Модифицируем выводимые данные. Интерактивность

В предыдущих примерах мы получали таблицу в виде статического изображения. Но довольно часто желательно, чтобы таблица обладала какой-либо интерактивностью. Например, в википедии каждый элемент таблицы является ссылкой на соответствующую статью.
Чтобы получить такой результат, нужно специальным образом запрограммировать вывод содержимого ячеек таблицы.
Повторим условия предыдущего примера, но назначим на каждый элемент ссылку. Кроме того, лишнюю информацию не будем скрывать с помощью CSS, а просто исключим из вывода.

Для понимания этого примера уже потребуются некоторые знания в области html и JavaScript.
<style type="text/css">
  #Table3 .id  { font-size:12px; font-weight:100; text-decoration: none;}
  #Table3 .id:hover { text-decoration: underline;}
 </style>
<div id="Table3"></div>
<script type="text/javascript">
  var rules3 = Object.assign({}, ChemSys.TblRules.Wide);
  rules3.category = ChemSys.TblCategory.props;
  rules3.cellFields = [drawId];
  // Функция, вызываемая для отрисовки латинского символа каждого элемента
  function drawId(elem){
	  // получаем название по обозначению элемента из словаря системы
	  var name = ChemSys.lang(elem.id);
	  // дополнительная информация о категории элемента
	  var cat = ChemSys.findCategory(rules3.category, elem.id);
	  return ChemSys.drawTag('a', {'class': 'id', href: '#elem_'+elem.id, title: name+', '+cat}, elem.id);
  };

  }
  var dst3 = document.getElementById('Table3');
  if (dst3) dst3.innerHTML = ChemSys.drawTable(rules3);
</script>
Нажмите, чтобы показать или скрыть результат
Если подвести курсор к элементу, появляется подпись. Символы элементов являются ссылками.

Пояснения.
  1. Первое отличие от предыдущего примера в блоке style. Теперь не нужно скрывать классы номера, имени и массы, т.к. эта информация исключается из вывода. Зато появилось правило :hover, которое делает ссылку подчеркнутой при наведении (как в википедии).
  2. Далее следует заполнение специального списка, отвечающего за вывод каждого элемента в таблице:
    rules3.cellFields = [drawId];
    [drawId] означает, что будет выведен только символ элемента. Полный вариант, соответствующий исходным настройкам, выглядит так: ["number", "id", "name", "mass"].
  3. Затем следует описание функции drawId, которая должна сформировать html-код химического символа. Исходный вариант html-кода выглядит так:
    <div class="id">He<div>
    В нашем примере вместо него будет выведено следующее:
    <a class="id" href="#elem_He" title="Гелий, Инертные газы">He</a>
    Для извлечения названия пользуемся внутренним словарём CharChem при помощи ChemSys.lang(elem.id).
    Для получения категории, к которой относится элемент, пользуемся функцией ChemSys.findCategory(rules3.category, elem.id).
    Ну и строка
    return ChemSys.drawTag('a', {'class': 'id', href: '#elem_'+elem.id, title: name+', '+cat}, elem.id);
    формирует необходимый html-код. Здесь функция ChemSys.drawTag просто используется для удобства генерации нужного html..
В принципе, здесь мы получили довольно неплохие возможности для столь небольшого кода.

Дополнительные примеры

Вывод названий на нескольких языках

Поставим задачу так: необходимо вывести таблицу с названиями на нескольких языках. Основное название должно выводиться на том языке, который является текущим в браузере. Если основное название выводится не по-английски, второе название должно выводиться на английском, синими буквами. Третье название на латыни, курсивом.

Для решения такой задачи нужно подключить библиотеку интернационализации. Например, так:
<script type="text/javascript" src="http://charchem.org/download/easychem-lang.js"></script>

Теперь разберемся, как оперировать средствами интернационализации CharChem. Для определения текущего языка браузера воспользуемся значением ChemSys.navLang. Текущий используемый язык: ChemSys.curLang. Чтобы выяснить, поддерживается ли нужный язык, используем выражением: langID in ChemSys.Dict.

Для формирования нужных данных нам нужно переопределить список cellFields с двумя дополнительными функциями. К ним прилагаются два CSS-класса, модифицирующих внешний вид: name.en - синий, name.lat - курсив.

Нажмите, чтобы показать или скрыть исходный код

Маленькая таблица, как в википедии

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

Здесь довольно значительный блок стилей, обеспечивающих необходимый внешний вид таблицы и вспомогательных элементов.
Общая структура html представлена таблицей с id="SmallTbl", в которой две строки.
Верхняя строка имеет id="SmallTblHdr". В неё скриптом выводится название текущего элемента и ссылки на соседние.
Вторая строка имеет id="SmallTblMain" и содержит номер и символ текущего элемента. И здесь же мини-таблица. Она тоже заполняется скриптом. Для модификации свойств ячеек используется cellFields.
Интерактивность обеспечивается конструкцией
onclick="return setElem('He')"

Вывод таблицы нестандартной формы. Janet left-step periodic table

В википедии есть вариант таблицы, озаглавленный "Janet left-step periodic table". Для того, чтобы нарисовать такую таблицу, нужно описать полностью новое правило.
В таблице 33 колонки (из них первая содержит информацию об электронных слоях) и 9 строк (последняя служит для легенды).
Janet left-step periodic table
Нажмите, чтобы показать или скрыть исходный код

Таблица электроотрицательности элементов

Дано: для большинства элементов заданы значения электроотрицательности в виде чисел в диапазоне от 0.5 до 4.
Задача.
  1. Требуется отобразить в таблице элементы с указанием номера, символа и значения электроотрицательности.
  2. Задан набор интервалов от 1 до 3.1 c шагом 0.3. Каждому задан цвет фона. Ячейки элементов должны быть окрашены в соответствующие цвета.
  3. При наведении курсора на символ элемента нужно отобразить его название
  4. Вывести легенду в виде цветовой шкалы.
Решение:
  1. Воспользуемся клонированием базового правила Std. Для формирования html-кода ячеек создадим функционал CellRender.
  2. Создадим специальную таблицу категорий, соответствующих заданным интервалам - ElNegCategory. Цвет каждого интервала будет задан в виде CSS-класса
    .elneg-bkN { background-color: #xxx;}
    Значение N будем вычислять из электроотрицательности по формуле:
    N = min( max( floor[(ElNeg-1)*10/3]+1, 0), 8).
  3. Вывод названия элемента будет осуществляться при помощи атрибута title. Для этого нужно переопределить cellFields, включив туда функцию idDraw для вывода символа химического элемента с подсказкой при наведении. Кроме того, этот список дополняется функцией elnegDraw, которая будет выводить значение электроотрицательности для каждого элемента.
  4. Легенду нарисуем поверх таблицы при помощи элемента <div class="legend"> с абсолютным позиционированием.
Electronegativity of the Elements
Нажмите, чтобы показать или скрыть исходный код
Программистам может потребоваться больше информации о деталях реализации библиотеки CharChem. Для этого можно обратиться к исходному коду, доступному на гитхабе: https://github.com/Peter-Win/charchem2.ts
Конец статьи