Перевод CSS-терминологии

[SelenIT]

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

Например, есть такая Visual Model, в основе которой лежит понятие "box". Грубо, "box" — это прямоугольный "кирпич" или "ящик", который как-то встраивается в "мозаику" других подобных прямоугольников, заполняющую в итоге прямоугольник экрана. Одному элементу в DOM-дереве может соответствовать от нуля до бесконечности "ящиков", а иногда "ящики" возникают из ниоткуда сами, без всякого элемента. "Ящики" бывают разных типов: те, что объединяют несколько строк, те, что являются строкой, и те, что встраиваются в строку (не считая элементов таблицы и всякой экзотики).

Некоторые переводы (типа этого) предлагают называть эти "ящики" "блоками". Но фокус в том, что слово "блок" (block) в спецификации уже есть и означает лишь один из видов этих "ящиков", со специфичным поведением. Если переводить и "box", и "block" словом "блок", у нас появятся "блочные блоки", "строковые блоки", "строчные блоки" и "инлайн-блоки" — и всё перечисленное будет принципиально разными вещами ("block box", "line box", "inline box" и "inline block" в оригинале). По-моему, это не просто путаница, это реальный бардак!

Другие переводы (напр. "почти что канонический" перевод Пирамидина) путаницу между "блоками" и "боксами" не создают. Но есть возражения против самого слова "бокс" (фактически грубой кальки). Кроме того, некоторые уже привыкли к "Box model" (той самой, что бывает 'border-box' aka "историческая" и 'content-box' aka W3C-шная или "мир наизнанку") как к "блочной модели". Хотя "боксовая модель" распространена немногим меньше — 15.9k результатов в Гугле против 28.6k для "блочной".

Примечание: оба процитированных перевода — древний CSS2, а не актуальный CSS2.1, но блочная/боксовая модель у них практически одна и та же

Еще остается путаница между "line box" и "inline box", поскольку "inline" очень часто переводят как "строчный". Хорошо хоть на htmlbook.ru этой проблемы нет, у нас "inline" переводят как "встроенный" (имхо, еще точнее было бы "встраиваемый", лично мне нравится и вариант "внутристрочный" из перевода по первой ссылке выше). Правда, другая путаница всё равно есть(. Но тема не о ней, а о том, как бы минимизировать новую путаницу в будущем...

Какие будут соображения?

[s0rr0w]

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

Но если все равно чешется в одном месте, то мой вариант перевода

line box - строка-контейнер

inline box - строчный элемент

block box - блок форматирования

inline block - строчный блок форматирования

[psywalker]

Отлично, что поднял эту тему, дружище!

Можно ли переводить CSS-термин "box" как "блок"?

Ни в коем случае! Термин "box" не может быть "блоком" тогда, когда нам это выгодно, потому что "box" бывает и блочным и строчным. Блочные боксы рождаются в блочном контексте, а строчные в строчном (по идее), а значит box != блок, а выражение "Блочный бокс" не является масло-маслянным, имхо.

Еще остается путаница между "line box" и "inline box"

Имхо, никакой путаницы. line box - это строки или контейнеры строчного содержимого, а inline box - уже можно смело назвать строчные элементы или текст.

И вообще, нужна ли единая непротиворечивая CSS-терминология на русском?

Нужна, и ещё как! Как по мне, так пора уже давно изучать весь этот процесс и нести эти знания в массы, чтобы Веб-разработчики "хавали" правильные и полезные вещи, а не держали в своей голове термины непонятного происхождения, которые когда-то случайно выпалил дядя Вася.

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

А между прочим, друзья, CSS2 - это не просто "устарелая" и никому ненужная спека, а это ещё и основа, каркас, процессы работы которого давно уже пора изучать и передавать знания своим товарищам, камрадам.

Так вот, считаю, что нужна не просто CSS-терминология на русском, а CSS-терминология с доскональными объяснениями, чтобы Веб-разработчики не только могли запомнить и употреблять эти слова, а знали, почему они так называются, как работают и с чем их едят!

p.s. Кстати, чем мы и займёмся с Илюхой в ближайшем будущем

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

Вот тут не соглашусь всё-таки. "box" в CSS имеет не так уж много развилок или путаниц, чтобы отказаться от его объяснения и занесения его в список терминов, которые нужно знать. Это раз, а два - это то, что "box", имхо, как раз необходимое и важное понятие в CSS, о котором нужно знать и понимать его сущность. Согласен, что есть вещи, которые не стоит трогать, но вот как раз "box" к ним не относится.

Главное постараться доступно объяснить это людям, а вот дальше уже зависит от человека, у которого будет или не будет желание узнать об этом правду.

[SelenIT]

inline box - строчный элемент

Всё-таки "inline box" — не строчный (строчный это "line box", "inline" именно что "внутристрочный" или "встраиваемый в строку") и не элемент (один текстовый элемент может генерировать несколько инлайн-боксов, если разрывается на несколько строк)

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

[s0rr0w]

Всё-таки "inline box" — не строчный (строчный это "line box", "inline" именно что "внутристрочный" или "встраиваемый в строку") и не элемент (один текстовый элемент может генерировать несколько инлайн-боксов, если разрывается на несколько строк)

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

Элементом названо не зря, это акцент на обособленность и индивидуальность. Внутристрочный лично у меня режет слух, так как подразумевает нахождение не на линии, а внутри контейнера. С точки зрения английского языка это может и правильно, но лично я писал буквы по линейке в тетрадке, а не в пространстве между двумя линиями. Base line - основа для формирования line-box'а, а сам он является побочным продуктом содержимого, которое в него помещено. Line-box не имеет специфической высоты, она калькулируемая и аморфная.

[SelenIT]

Элементом названо не зря, это акцент на обособленность и индивидуальность.

Но пересекается с устоявшимся понятием DOM-элемента. Опять путаница.

Внутристрочный лично у меня режет слух, так как подразумевает нахождение не на линии, а внутри контейнера. С точки зрения английского языка это может и правильно, но лично я писал буквы по линейке в тетрадке, а не в пространстве между двумя линиями. Base line - основа для формирования line-box'а, а сам он является побочным продуктом содержимого, которое в него помещено. Line-box не имеет специфической высоты, она калькулируемая и аморфная.

Лично я представляю себе Line-box именно как виртуальный, воображаемый контейнер — да, калькулироемой (по содержимому) высоты, да, побочный продукт, но в конечном итоге — тот же прямоугольник. При vertical-align: top/bottom базовая линия курит в сторонке, работают именно "две линии, ограничивающие пространство между ними" (воображаемые, но всё же)

[s0rr0w]

Лично я представляю себе Line-box именно как виртуальный, воображаемый контейнер — да, калькулироемой (по содержимому) высоты, да, побочный продукт, но в конечном итоге — тот же прямоугольник. При vertical-align: top/bottom базовая линия курит в сторонке, работают именно "две линии, ограничивающие пространство между ними" (воображаемые, но всё же)

Вот и отличие в понимании

[Great Rash]

box - ящик, коробка, вместилище, футляр. Лично мне больше нравится "футляр" если на то пошло. Но я уверен, что в некоторых случаях box может и должно быть переведено как блок.

Нужна ли адекватная терминология на русском? Конечно нужна! Но вот проблема: терминология должна быть единой, чтобы все понимали о чем речь. Иначе перед переводом каждой статьи придется помещать мини-словарик терминов, чтобы можно было хоть как-то разобраться неподготовленному человеку. Т.е. главная проблема в том как заставить всех принять и понять ту терминологию, какую хочется.

[psywalker]

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

Очень надеюсь, что вот здесь, например, будет интересная дискуссия, которая позволит придти к одному знаменателю.

[SelenIT]

Вот и отличие в понимании

По-моему, как минимум у Оперы без какого-то виртуального "псевдоконтейнера" не обходится. Как-то закрашивает же она фоном :first-line'а весь занимаемый строкой прямоугольник (а не только анонимный инлайн-бокс, как другие): значит, и размеры этого прямоугольника где-то у ней записаны (несмотря на то, что вообще-то это сильно смахивает на баг ). Высота лайн-бокса рендереру ведь всё равно нужна, без нее не определить Y-координаты "деталей" последующей строки. Получается, "пол" и "потолок" лайн-бокса — всё же какая-никакая реальность, наравне с базовой линией. И оба понимания, имхо, имеют право на жизнь — смотря по ситуации.

[s0rr0w]

По-моему, как минимум у Оперы без какого-то виртуального "псевдоконтейнера" не обходится. Как-то закрашивает же она фоном :first-line'а весь занимаемый строкой прямоугольник (а не только анонимный инлайн-бокс, как другие): значит, и размеры этого прямоугольника где-то у ней записаны (несмотря на то, что вообще-то это сильно смахивает на баг ). Высота лайн-бокса рендереру ведь всё равно нужна, без нее не определить Y-координаты "деталей" последующей строки. Получается, "пол" и "потолок" лайн-бокса — всё же какая-никакая реальность, наравне с базовой линией. И оба понимания, имхо, имеют право на жизнь — смотря по ситуации.

Рендерер оперирует прямоугольниками, потому что ему нужны координаты 4-х точек. Но спецификация оперирует абстракциями чуть более высокого уровня. С точки зрения спецификации начало нового лайнбокса начинается сразу после предыдущего. Но с точки зрения рендерера работа над координатами начинается вовсе не с рисования некого прямоугольника. Сначала нужно вычислить местоположение базовой линии, потом все блоки на нее поставить, потом посчитать, все ли влазит, и если не все, то опустить базовую линию ниже. И делать это до тех пор, пока контент не начнет полностью влазить в некий прямоугольник. И вот только после этого, имея высоту этого виртуального бокса, можно уже говорить про его координаты.

[SelenIT]

С логикой построения этого прямоугольника я не спорю. Но не вижу проблемы, почему бы благородным донам не рассмотреть его как "типа контейнер" . К тому же есть как минимум одна ситуация, когда сразу нужна именно нижняя граница этого "контейнера", вне зависимости от положения базовой линии (вышеупомянутый случай vertical-align: bottom).

[s0rr0w]

С логикой построения этого прямоугольника я не спорю. Но не вижу проблемы, почему бы благородным донам не рассмотреть его как "типа контейнер" . К тому же есть как минимум одна ситуация, когда сразу нужна именно нижняя граница этого "контейнера", вне зависимости от положения базовой линии (вышеупомянутый случай vertical-align: bottom).

Границы, ясное дело, нужны. http://jsfiddle.net/Je5uT/

Мое возражение было немного про другое. Про то, что спека оперирует немного другими понятиями, чем рендерер. Переводим то спеку, правильно?

[SelenIT]

А, ну тут я согласен. Рендерер (притом оперный) я привел чисто для иллюстрации. Но понятия "верх и низ лайнбокса" (явно наводящие на мысль о нем как о прямоугольном контейнере) есть и в спеке (в самом низу)

[clavin]

На мой взгляд, из-за сложности, понятия с английского следует переводить так, как они читаются на английском.

box - бокс

line box - лайн-бокс (здесь слово "лайн" употреблено для обозначения признака, т.е. является как бы прилагательным. Употреблять "лайновый бокс" как то не по-русски и напоминает "инлайновый")

inline-block - инлайн-блочный (прилагательное)

inline - инлайновый (прилагательное)

block - блочный

block box - блочный бокс

В некоторых случая можно оговорить, что разрешены другие термины. Например, вместо inline (инлайновый) можно употреблять "строчный". Вместо "box" (бокс) можно употреблять "контейнер". Но лучше, конечно, произносить точно как в спецификации, чтобы путаницы не было даже у того, кто прочитал русскую версию перевода стандарта, а потом за уточнениями полез а англоязычную версию, т.к. сразу понятно где какой термин.

Ещё, вероятно, разные термины по-разному употребляются в разных употребляемых контекстах.

Edited June 10, 2012 by clavin

[clavin]

Кстати! Думаю, что вместо "inline" термин "строчный" применять ошибочно, потому что строчными бывают буквы, поэтому при употреблении "строчный" возникнет коллапс в голове у читающего. Он в некоторых случаях не будет понимать, о чём идёт речь, ему будет сложнее понять материал.

Тоже самое про термин "box". Его не следует заменять термином "контейнер", потому что в английском языке есть точное слово "container", обозначающее русское слово "контейнер". Кроме того, в самом css стандарте есть большое количество употребления слово "container". Как его переводить в этом случае? Снова контейнером называть? Тогда будет путаница с термином "box".

Например здесь слово "container" употребляется часто, в том числе есть такое выражения как "block container box". Не знаю, что под ним подразумевается, но его можно перевести как "блочный контейнер бокса", "блочный бокс-контейнер", "блочный ограничивающий бокс", "блочный вмещающий бокс" и тому подобное.

Edited June 13, 2012 by clavin