Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Типографика: Восток
- 4. Typography: from metal to pixels https://youtu.be/EuXrh_T2aLg 4
- 5. 5
- 6. 6
- 8. Письмо 书写
- 9. Не одно и то же • Почти (но в китайском проще) • 80% иероглифов понятны всем • Хотя это тоже китайский • Но ни слова на слух • Есть в корейском 9
- 10. Не только лишь иероглиф • Кандзи • Хира́гана — союзы/частицы • Формы слов • Руби • Ката́кана — иностранные слова • Ромадзи 10
- 11. ツシマ Цу Си Ма 11
- 12. Ничего не понятно • Непонятно как произносить • Несколько произношений • Новый смысл 12
- 13. И вовсе не иероглиф • Хангыль • Ханча (китайские слова) • Чамо (51 шт.) • Из «24» «букв» 13
- 14. Лего ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎ ㅏㅓㅗㅜㅡㅣㅑㅕㅛㅠ 아 름 다 운 아 내 а рым да ун а нэ 14
- 15. Направление 书写方向
- 16. 16
- 18. 18
- 19. Пунктуация 标点
- 20. 。 Точка
- 21. 21
- 22. 《 Кавычки 22
- 23. 《漢字標準〈格式〉》 23
- 24. 、 Запятая
- 25. ‧ Интерпункт
- 26. 李奧納多‧達‧文西 26
- 27. レオナルド・ダ・ヴィンチ 27
- 28. …… Многоточие
- 29. 「 」 Скобки
- 31. 「標點『擠壓』與『懸掛』」 31
- 34. WEB 网络
- 41. text-combine-upright p { writing-mode: vertical-lr; text-combine-upright: digits 2; } 41
- 44. list-style-type ol { list-style-type: cjk-ideographic; } 一 one 二 two 三 three 44
- 45. list-style ul { list-style: none; } li::before { content: ‘※‘; } 45 ※ one ※ two ※ three
- 46. <em> em::before { content: ‘【’ } em::after { content: ‘】’ } 【標點擠壓與懸掛】 46
- 47. <ruby> <ruby> <rb>W</rb><rt>World</rt> <rb>W</rb><rt>Wide</rt> <rb>W</rb><rt>Web</rt> </ruby> 47
- 48. <ruby> <div class="vertical"> <ruby> <rb>漢</rb><rt>Kan</rt> <rb>字</rb><rt>ji</rt> </ruby> </div> 48
- 49. <ruby> <div class="vertical"> <ruby> 漢 <rt>かん</rt> 字 <rt>じ</rt> </ruby> </div> 49
- 52. <rbc>/<rtc> <ruby> <rbc> <rb>斎</rb> <rb>藤</rb> <rb>信</rb> <rb>男</rb> </rbc> <rtc class=‘reading’> <rt>さいとうのぶお</rt> </rtc> <rtc class=‘annotation’> <rt>W3C Associate Chairman</rt> </rtc> </ruby> 52
- 53. ruby-… .reading { ruby-position: under; ruby-align: space-between; } .annotation { ruby-position: over; } 53
- 55. Письмо كتابة
- 56. Свсм упрлс • Справа налево • Нет гласных • Мало заимствований • Много вариантов • Белорусский арабский 56
- 57. 57
- 58. Должно быть красиво • Цифры слева направо • Слова переносить нельзя • Слова можно удлинять • Акцентирования нет • Знаки препинания… 58
- 60. ، Запятая
- 62. و «и»
- 63. ؟ Вопрос
- 65. WEB شبكة
- 69. >Это арабское слово ! طراحیباقران будет иметь направление справа налево 69
- 70. Это арабское слово طراحیباقران ! будет иметь направление справа налево 70
- 71. то арабское слово <bdi>! طراحیباقران </bdi> будет иметь направление справ <bdi> 71
- 72. Это арабское слово ! طراحیباقران будет иметь направление справа налево 72
- 73. Это арабское слово <bdi> طراحیباقران </bdi> будет иметь направление справ <bdo> 73
- 74. <bdo> .овелан аварпс еинелварпан ьтеми тедуб طراحیباقران оволс еоксбара отЭ 74
- 78. padding/margin p { padding-left: 10px; margin-right: 2px; } 78 p { padding-inline-start: 10px; margin-inline-end: 2px; }
- 79. text-align p { text-align: left; } 79 p { text-align: start; }
- 80. position: absolute p { position: absolute; left: 1337px; } p { position: absolute; offset-inline-start: 1337px; }
- 81. float section { float: left; } 81 section { float: inline-start; }
- 82. Мы хотим еще! 82 • Mozilla Building RTL — goo.gl/6cQI2R • Mozilla Building RTL 2 — goo.gl/NH2lSk • W3C: ruby — http://goo.gl/DgwY2T • W3C: writing modes — http://goo.gl/5oT39m • W3C: bidi • Korean lessons — http://goo.gl/Z77IVs • hanzi.pro • rtlcss.com
Notas del editor
- Всем привет, меня зовут Роман Прудников и я фронтенд-разработчик из компании 2гис.
- Сейчас я работаю в команде сквер.2гис.ру — это сервис вопросов и ответов о городе, на котором люди могут задать вопросы, вроде «где можно в Нск послушать модный инди-рок» или «почему в Москве у такой-то улицы такое-то название»? Отвечают как пользователи сервиса, так и призываемые редакцией компетентные товарищи. Пока что мы только в Москве и Новосибирске, но планируем расширяться и дальше.
- Для тех, кому кажется, что он уже видел меня на конференциях, то это я тот парень с web standard days, после которого говорили, что у меня [аним] пошлые шутки и [аним] лексика так себе. Собственно, сегодня ничего не изменится.
- В 2гис мы занимаемся созданием картографического сервиса с большим объемом справочных данных в виде текста, а в Сквере текст — это самое главное. Отчасти это почти год назад заставило меня задуматься о том, что многие фронтендеры не знают основ типографики, не знают, как подготовить основу для текстов и как понимать язык дизайнеров. Поэтому я сделал доклад на тему основ типографики и их применения в css. (вы можете посмотреть его здесь)
- Тогда, разбираясь с базовыми понятиями, и найдя даже обратные шевроны как в шведском, я подумал, что видел уже всё и смогу приготовить любой текст, но оказалось, что выходя на новые рынки, ваша компания может столкнуться с куда большей проблемой интернационализации, чем просто разные кавычки.
- Поэтому сегодня я расскажу вам, как не споткнуться, выходя на очень перспективные рынки: ближнего и дальнего востока. И там и там есть действительно неочевидные вещи, либо те, о которых с лёгкостью можно забыть. Чтобы не переделывать работу каждый раз подключая новый язык с болью, я расскажу сперва теоретическую базу, а потом и то, как эти знания использовать в HTML/CSS.
- Начнем, пожалуй, с дальнего востока, потому что, почему бы не начать с дальнего востока. Для того, чтобы описать насколько это перспективный рынок — эти три языка объединяют полтора миллиарда людей. И у них всё не так очевидно, как думалось,
- Пойдем по порядку. Я решил не дробить японский, китайский и корейский, а рассказать обо всём одним потоком.
- Есть традиционные (слева) и упрощенные (справа) иероглифы. Ребята, кто не учил ни одного из этих языков — предположите, какими иероглифами пользуется Китай, а какими Япония? Если не вдаваться в точности, то несколько тысяч лет назад китайцы придумали иероглифы, японцы их взяли и стали использовать. Время шло и китайцы решили, что иероглифы слишком сложные, стали их упрощать.[аним] Иероглиф «любовь» выглядит так. Красным обозначен ключ «сердце» — после упрощения этого ключа не стало. Японцы же решили, что запоминать все сложные иероглифы на любое изменение формы слова не хотят и нашли другой выход из ситуации.
- Они используют меньше иероглифов, а для союзов/частиц/изменения форм слова используют слоговое письмо — хирагану. У них целых два таких алфавита. Второй — катакана, используется для записи иностранных слов, на которых нет иероглифа. Ромадзи — запись японского языка латиницей.
- Вот, решил вам показать парочку смайликов из вконтакте. Наверняка видели, как такие смайлы вставляют в название групп и тд. Так вот не дай бог вам опозориться при человеке, узнавшем катакану. Так я записал слово «цусима».
- Но вы же понимаете, что знать вообще все иероглифы — нереально. Несколько десятков тысяч! Не удивительно, что и китайцы и японцы придумали как-то помогать самим себе с этим разобраться. В японском это называется руби, так это выглядит и здесь и используется хирагана. Нужда в руби может возникнуть из-за различных трактований/произношений или когда автор вложил новый смысл. У китайцев, кстати, это выглядит так же, только они используют фонетический алфавит пиньинь. (нё хо н)
- С корейским иначе — там всё же слова. И алфавит есть. Если быстро хотите понять, как отличить корейский от японского и китайского, то у корейцев символы похоже на лица, с глазами и ртами, за счет кругляшков. Их алфавит называется хангыль и состоит он из 51 символа, 24 из которых соответствуют нашим буквам. Иероглифы они тоже используют, даже учат в школе, но как правило не больше 1500 и только для исконно китайских слов.
- Попробую объяснить, чем корейский необычен. Возьмем вот эти согласные, соединим вот с этими гласными и получим вот такие слова. Каждый слог я пометил отдельный цветом. В каждом слоге несколько гласных и согласных, соединенных по определенным правилам, в которые мы не будем углубляться. А вот если попробовать прочитать, то получится:
- Мы разобрались с тем, чем пишут, но до сих пор непонятно, как пишут, поэтому поговорим о направлении письма.
- В японском традиционно пишут сверху вниз и справа налево. То есть столбиками. В Корее тоже так могут делать, но чаще только потому, что не хватает места, как на этом информационном блоке в метро. В Китае мало того, что можно увидеть письмо сверху вниз, так еще и справа налево, как в арабском. На дощечке сверху как раз такой пример. Но если по-честному, то это просто исключение: четыре столбика по одному символу.
- Хотя вертикальное письмо осталось только в Тайбее и в Гонконге. Континентальный Китай в середине того века, после революции, твердо решил перейти на привычное для западного человека письмо.
- И в итоге, красивый оттипографированный китайский текст выглядел бы вот так. Кстати, в технической литературе японцы тоже пишут по привычной нам схеме, так что японский тоже может так выглядеть. Вот только на этом примере слишком много непривычной пунктуации, поэтому
- перейдём сразу к ней. Тут правда есть вещи, непохожие на те, что мы видим каждый день.
- Это действительно полая точка и помнить о том, что она полая — важно. Позже станет ясно, почему. Уверен, что смотря на этот слайд у кого-то умирает внутренний эстет — почему не по центру или не по левому краю
- а потому знаки, как и иероглифы, моноширинны. При горизонтальном письме в китайском её правильнее ставить по центру, чтобы создавать визуальную паузу. В вертикальном — под иероглифом справа. Если при гориз письме она ставится в левом нижнем углу — это скорее японский. В корейском точка европейская.
- Шевроны, привычные для читающего русскоязычную литературу человеку, чаще используются для названий книг/фильмов
- Они, как и другие знаки, моноширинные. Одиночные шевроны используются внутри. Тут же на примере справа можно заметить, что при вертикальном письме знаки поворачиваются на 90 градусов по часовой стрелке. Кроме точки и…
- запятой. В японском чаще используется каплевидная, в китайском привычная нам используется для пауз в тексте, а эта — для только для перечисления в китайском.
- А вот это интерпункт. Но если учесть, что в китайском точка ставится по центру блока, то это то, почему нельзя путать эту и полую точку.
- В китайском интерпункт используется для отделения слов. Например так записывается Леонардо да Винчи. Зачем это надо? Пробелов-то нет.
- В японском с пробелами ситуация такая же, так что и там интерпункт за тем же. Кстати, я говорил про то, что иностранные слова записываются катаканой (одним из слоговых алфавитов) — написать имя иностранного человека — как раз тот случай.
- Что, если в тексте мы видим много таких интерпунктов? Аж шесть? То это просто многоточие. Если кто-то раньше говорил «троеточие», то теперь язык точно не повернется.
- А вот о чем хотелось сказать больше всего — то, как выглядят кавычки. Хотите прямую речь — пишите скобки-уголки.
- Хотите писать внутри кавычек еще одни — используете эти двойные. (японский название произведений)
- В сумме это будет выглядеть примерно так. Но и это не единственное отличие.
- Кто попробует угадать, зачем нужен еще один тип скобок? Линзообразные? Только те, кто знает ни одного из языков. Проблема в том, что иероглифы изначально уже как бы курсивные. Чтобы в центре акцентировать на чем-то внимание — это оборачивают в такой тип скобок.
- И последнее, что я хотел бы указать из отличий — это знак примечания/астериск/буллит в японском. Именно такой используется для ненумерованных списков.
- Казалось бы, после всего этого можно и к нашей работе перейти. Но, постойте-ка, кто-нибудь видел японские/китайские веб-сайты?
- Вы скажете: Господи, что он показывает? Скажите ему, чтобы перестал
- Изверг! Пощади! В зале женщины и дети! Я искренне верю, что знание того, как можно сделать лучше, позволит не плодить плохой веб-дизайн.
- И первое, о чем вам нужно знать, это как заставить текст идти по-японски, или, условно, по-тайваньски. writing-mode по дефолту текст определяет горизонтальным, так что для японского придется указать явно.
- Помимо этого есть и другие значения, rl, lr и даже sideways, но о нём чуть позже
- Как быть, если в вашем тексте есть неиерографический текст? Обычно принято такой текст писать горизонтально (если это пара букв) или чаще переворачивать на 90 градусов по часовой стрелке, то есть дефолтный вариант и чаще всего приемлемый — миксед [аним]. Для экспериментов можно перевернуть все символы по часовой стрелке, даже иероглифы — с помощью значения sideways [аним], но тогда носители языка на это будут смотреть так:
- Кстати, эту картинку мне прислал Амио Джин, китаец, который помогал мне готовиться, когда я ему что-то подобное прислал
- Числа так не перевернуть, поэтому в Японии часто пишут горизонтально, умещая в столбике. Это и смотрится симпатичнее, чем по одному числу писать, и уже довольно привычно. Свойство TCU понимает значение digits и до скольких цифр в числе можно оставлять горизонтальными, но в браузерах это работает так.
- Судя по обсуждению w3c они от этого значения откажутся и все мы перейдем на рабочее свойство all — работает вот так. [аним] Однако, если у вас много цифр, то… [аним], в общем, контролируйте числа какими-нибудь спанми, наверное. А то некрасиво.
- Еще красиво можно сделать, если дробить текст только там, где он кончается. Согласитесь, что это симпатичнее, чем [аним] это. Я рассказывал, что каждая графема в корейском — это слог, поэтому можно и даже нужно делать перенос строки вмещая как можно больше символов. Этого можно добиться благодаря word-break: break-all, вот только следите за тем, чтобы не было текста на латинице/кириллице, то будет вот так [аним], в таком случае лучше выбрать normal или keep-all, что для не япон/кор/кит одинаково переносит по пробелам.
- Продолжая тему адаптации стилей к другому языку, хочу рассказать о list-style-type. Да, list-style нужен не только для того, чтобы ставить none, а чтобы например делать «ичи, ни, сан».
- В случае с японским можно, кстати, сделать и [аним] none, но только проставить правильный буллит.
- Если же семантическая вёрстка для вас, то помните, о том, что нет смысла держать font-style: italic в стилях. А вот добавить парочку псевдо-элементов можно. Если же семантика не для вас, то подшаманьте тэг <i>.
- Наконец перейдём к тяжелым веществам и посмотрим на тэг руби. Я рассказывал про случаи, когда носители языка и сами не знают, что это за иероглиф. Примерно так это выглядело [аним] в случае, если бы мы расшифровывали аббревеатуры. А код выглядел бы вот так [аним]
- Перейдём к более живому примеру с кандзи и ромадзи в качестве руби. [аним] Кандзи (я имею в виду иероглиф) мы обернем в тэг rb — руби бейс, сразу после него обернем руби (то есть пояснение) на ромадзи (то есть на латинице) в тэг rt — руби текст. Буквы сами перевернуться согласно блочной схеме руби. Да, кстати, там у всего свои свойства дисплей, если посмотреть в девтулзах.
- Вот другой реальный пример: часто японцы используют хирагану для написания руби. [аним] И тут есть отличие в коде — я не использовал руби бейс, потому что браузер достаточно умен для того, чтобы самостоятельно сообразить, что здесь будет бейсом, если я дальше поставил руби текст.
- В случае, если вы пишите на китайском или на японском, но браузер не умеет делать текст вертикальным, то для горизонтального текста это работает тоже [аним]. Более того, вы можете для нескольких иероглифов написать аннотацию, поместив всё в один руби бейс или как здесь — сразу после иероглифов руби текст. И тут же опять отличия в коде. Почему же я добавил скобки, обернутые в rp?
- Все современные браузеры специально не показывают тэг rp [аним], в то время как старые, которые и руби-то не знают, будут показывать всё подряд. [анима] Поэтому вы красиво деградируете до того, что обернете своё пояснение в круглые скобки. Где такое можно увидеть? Например у староверов на 12й опере.
- Если вы не старовер, а никонеанец, то вы заинтересуетесь другой крутой фичей. Современный стандарт руби предусматривает также блочные версии тех же тэгов, если необходимо куда большая свобода. [аним] Например, можно к одному блоку кандзи сделать несколько пояснений: как на английском, так и на хирагане. В помощь тэги rbc и rtc.
- Всё это можно настроить через CSS, конкретно указав ruby-position (латинице я сказал быть сверху), можно хирагане сказать как распределиться по всем иероглифам — для этого есть ruby-align со значениями, схожими с флексбоксом, то есть можно было и space-between сделать. Четно говоря есть еще ruby-merge, позволяющий объединять несколько аннотаций на один руби бейс и наоборот, но пока что это катастрофически плохо поддерживается, поэтому я решил пока не вдаваться в подробности.
- Пожалуй, на этом мы закончим с дальним востоком и перейдём к ближнему. Носителей арабского насчитывается меньше, но это всё равно 250 миллионов человек, что являет собой огромный рынок. И не думайте, что все эти государства бедны, посмотрите на ОАЭ, например. [сказать про 2гис?]
- Мы не будем отходить от формы повествования и сперва разберем теорию, после чего к практике.
- Самое очевидное, что о языке можно сказать — направление письма обратное нашему — справа налево. Из других интересных фактов, на случай, если вы будете играть в что-где-когда, то: там нет букв под гласные (но иногда используют систему надписывания для их обозначения) в арабском мало заимствования и даже наоборот, в испанском их много из арабского, да даже мы с вам используем слова арабского происхождения типа «алгебра» и «химия» арабский распространялся по миру вместе с исламом и изменялся от народа к народу в соответствиями с нуждами народа так, к примеру, есть белорусский арабский, которым пользовались татары, проживающие на территории Белоруссии
- Есть и куда более известное заимствование из арабского языка, кроме слова «алгебра» — цифры! Но если посмотреть на эту таблицы, то можно быстро сообразить, что на самом-то деле используем мы индийские цифры, которые арабы сами позаимствовали и адаптировали под своё письмо. Но так как долгое время науку двигали арабы, то и цифры называют в честь них.
- Ладно цифры, но что с текстом и что в арабском отличается от того, к чему мы привыкли? А особенности такие: письмо хоть и справа налево, но цифры пишутся слева направо, как и у нас а вот слова переносить нельзя. Убирайте все свои hyphens и ­ зато слова можно удлинять. В первой строчке на примере справа как раз можно заметить длинную линию — это кашида, способ удлинения. Смысл только в том, чтобы была вот такая полная выключка как и с дальним востоком, здесь изначально всё курсивное, поэтому способа акцентировать текст нет вообще ну и пунктуация
- Тут не то, чтобы много, но
- вот запятая, она как перевёрнутая наша
- и в предложении выглядит вот так, однако
- есть еще такое и это не пунктуация вообще, это союз «и», хотя похоже, а если еще что-то из отличного, то
- вопрос перевёрнут и ставится в конце, то есть
- в начале, для нас с вами
- На этом с особенностями, пожалуй, всё и сразу перейдём к тому, что у нас есть для арабского
- Дирекшеном я не удивлю, но лишь напомню, что он скорее понадобится для раскладки, если у вас inline-block’и. Арабский текст и сам будет идти справа налево, ему это свойство не нужно
- а вот сделать текст симпатичнее можно. Мне нечасто удаётся увидеть свойство text-justify, но это прямо его случай. Я решил привести два примера текста: с использованием кашиды и без. Кто предположит, какой где?
- Думаю, теперь будет понятнее, что сверху намного меньше дыры между словами, как раз за счет использования кашиды.
- Другая ситуация, когда у вас разнонаправленный текст в одном блоке. Вам приходит вот такой арабский текст, либо вы сами его написали и восклицательный знак, разумеется, в конце арабского текста
- а он раз и справа. Тут-то мы и узнаём, что слова арабские хоть и идут как им правильно, а вот знакам пунктуации об этом нужно говорить конкретно
- Для этого и есть тэг bdi, который внутри себя задаёт направление всем по первому направленному символу, результат будет
- ожидаемый и правильный
- а вот есть еще bdo, О в котором значит оверрайд, то есть перетереть, так вот это вообще страшная сила. В атрибуте задаешь направление и получаешь
- Перевернутый текст по полной программе, кроме того, что было в bdi, потому что I в bdi значит isolated, то есть изолированный
- Разумеется, вы можете это оборачивать одними только спанами или еще чем, а крутить юникод-биди
- Доклад наконец подходит к концу и вы можете спросить меня «и что?», мол, зачем оно всё было
- А ответ на этот вопрос очевиден — если у вас планируется мультиязычный проект, то может и не помнить, но знать о том, какого типа могут быть грабли, точно нужно. Чтобы в будущем не потерять времени еще больше. А еще можно начать верстать сразу опираясь на эту необходимость, например
- все знают, что если вам нужно будет перевести сайт на арабский, то все padding-left’s и margin-right’s должно инверсироваться, хотя [аним] можно сразу сказать, что паддинг от начала строки, а маржин — от конца.
- И текст, кстати, тоже можно выравнивать по start и end
- морока, когда нужно продублировать код для ртл, переписав лефт на райт, но можно использоваться offset-inline
- Как, собственно и с float’ами, когда можно писать inline-start/end
- И вот теперь, пожалуй, действительно всё. Если хочется самостоятельно, то у меня есть туториалы, как мозилла советует рэРТээЛить страницы, доки с понятными объяснениями лэйаутов руби, райтин моудов, немного про биди и то, как символы себя ведут, к каким словам прибиваются, я даже решил добавить чуть-чуть корейского, если вам еще интересно, как там слоги собираются, типограф китайского и rtl на postCSS
- На этом мне хочется сказать спасибо [аним], ой [аним], и есть ли у вас вопросы?