1 заметка с тегом

js

Скрипт для приводности

ds-steelline.by — проект, на котором удалось применить приводность

Приводность — совпадение базовых линий строк. Этот приём часто применяется в книжной и журнальной вёрстке. В вебе редко: некогда заморачиваться вертикальным ритмом.

Однажды мне удалось убедить команду использовать приводность на проекте. Аргументы: что-то про дисциплину дизайнера и верстальщика, согласованность, дизайн-система и т. д. Но мой истинный мотив был: попробовать как у Бюро. Интересно же.

Результат: вёрстка ехала на каждой странице как и прежде. Приходилось скриншотилкой мерять отступы, лезть в отладчик, двигать текст и отправлять верстальщику. Мучительная рутина.

Чтобы победить рутину, написал скрипт:

(function() {
  var body = document.body;
      gridCreate = document.createElement('div');

  gridCreate.id = 'overlay-grid';
  body.appendChild(gridCreate);

  var grid = document.getElementById('overlay-grid');
      gridPosition = 0;
      gridSize = 10;
      bodyHeight = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight);

  grid.style.cssText = 'display: none; position: absolute; top: 0; width: 100%; pointer-events: none;'
  grid.style.height = bodyHeight + 'px';
  grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
  grid.style.backgroundColor = 'rgba(255, 0, 0, 0.05)';
  grid.style.backgroundImage = 'linear-gradient(180deg, #777 0.5px, transparent 0)';

  document.onkeydown = function(e) {
    if (e.keyCode == 71 && e.ctrlKey) {
      if (grid.style.display == 'none' ) {
        e.preventDefault();
        grid.style.display = 'block'; }
      else {
        e.preventDefault();
        grid.style.display = 'none'; }
    }
    if (e.altKey && e.key == 'ArrowUp') {
      e.preventDefault();
      gridSize++;
      grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
    }
    if (e.altKey && e.key == 'ArrowDown') {
      e.preventDefault();
      gridSize--;
      grid.style.backgroundSize = gridSize + 'px' + " " + gridSize + 'px' ;
    }
    if (grid.style.display == 'block' && e.key == 'ArrowDown') {
      e.preventDefault();
      gridPosition++;
      grid.style.top = gridPosition++ + 'px';
    }
    if (grid.style.display == 'block' && e.key == 'ArrowUp') {
      e.preventDefault();
      gridPosition--;
      grid.style.top = gridPosition + 'px';
    }
  }
})();

Запускается в консоле. Создаёт скрытый блок с сеткой. Сочетание ctrl + G показывает и скрывает сетку. Стрелки ↓↑ опускают и поднимают её на один пиксель. Alt + ↓↑ меняет интерлиньяж. По-умолчанию стоит 10px, поменять можно в переменной gridSize.

Использую когда нужно отсматривать текстовые страницы. Верстальщикам нравится. И вы попробуйте.

9 февраля   js   вёрстка   сделал   типографика