- Style an ordered list with Cyrillic letters
- 4 Answers 4
- Disadvantages
- Что делать если русский шрифт не отображается на сайте
- Если у вас не отображается русский кириллический шрифт на сайте
- 1. Открываем html файл в Notepad, нажимаем Ctrl-A (выделяем весь код)
- 2. Заходим в «Кодировки» и выбираем «Кодировать в Utf-8»
- 3. Сохраняем файл и теперь можем писать на русском языке и у нас будет все нормально отображаться.
- Если же вы скачали готовый шаблон
- 1. Повторить все то, что я описал выше!
- 2. Убрать все подключаемые шрифты.
- 3. Заменить в css файле в body, h1, h2 и так далее на классический web-шрифт, типа:
- 4. Можно подключить нестандартные шрифты
- Локализация html-страницы средствами CSS
- Как изменить кодировку на сайте. Исправляем ошибку вывода css стилей
- Как изменить кодировку на сайте?!
- Как изменить кодировку на сайте, с помощью .htaccess?
Style an ordered list with Cyrillic letters
There are many possible values for list-style-type CSS property (e. g. decimal , lower-latin , upper-greek and so on). However there are none for the Cyrillic alphabet (which, btw, has different variations for different languages). What is the best way to style an ordered list with Cyrillic letters? (I’m providing a solution I ended up with despite I’m not very happy with it.)
4 Answers 4
I know nothing about Cyrillic list schemes so I’m at risk of a bit of cultural embarrassment here, but CSS3 Lists module (still in working draft) defines quite a few Cyrillic alphabetic list types: lower-belorussian , lower-bulgarian , lower-macedonian , lower-russian , lower-russian-full , lower-serbo-croatian , lower-ukrainian , lower-ukrainian-full , upper-belorussian , upper-bulgarian , upper-macedonian , upper-russian , upper-russian-full , upper-serbo-croatian , upper-ukrainian , upper-ukrainian-full . As expected, the state of support for these is deplorable currently (certainly nothing in Gecko or WebKit), but hopefully going forwards these will start to be implemented.
Update: some changes have been made – the definition of list types has been moved into the CSS3 Counter Styles module whose current draft (Feb 2015) has unfortunately lost all alphabetical Cyrillic types. This is in Candidate Recommendation stage so it’s unlikely that additions will be made at the point. Perhaps in CSS4 List Styles?
In this method I’m using CSS-generated content in before each list item.
.lower-ukrainian < list-style-type: none; >.lower-ukrainian li:before < display: inline-block; margin-left: -1.5em; margin-right: .55em; text-align: right; width: .95em; >.lower-ukrainian li:first-child:before < content: "а."; >.lower-ukrainian li:nth-child(2):before < content: "б."; >/* and so on */ Disadvantages
- Hardcoded, restrict list to a certain max length.
- Not pixel-perfect as compared to a regular order list
Что делать если русский шрифт не отображается на сайте
Добрый вечер и другого времени суток! Ко мне на почту и в комментарии на сайте неоднократно поступают вопросы, типа «Почему не отображается русский шрифт на сайт» или «Я прописал в html файле русский текст, а он выводиться кракозябрами. Что делать?». Поэтому я решил посвятить этой теме урок. В этом уроке я расскажу, что нужно делать, если русский кириллический шрифт не отображается у вас на сайте или отображается, но коряво (непонятными символами).
Сразу скажу, что все эти проблемы связаны в первую очередь с кодировкой самого сайта. Я буду учить вас тому, что сам знаю и как делаю именно я (потому что каждый web-разработчик приходит к решение проблемы по разному и на счет кодировки, в частности, у каждого свое мнение на это счет). Итак, начнем!
P.S. Если вы всерьез решили заниматься web-разработкой, советую установить html редактор Notepad, зарегистировать пока самый простой и дешовый шаровый хостинг (советую ihc) и читать много документации по html и css.
Если у вас не отображается русский кириллический шрифт на сайте
1. Открываем html файл в Notepad, нажимаем Ctrl-A (выделяем весь код)
2. Заходим в «Кодировки» и выбираем «Кодировать в Utf-8»
3. Сохраняем файл и теперь можем писать на русском языке и у нас будет все нормально отображаться.
Если же вы скачали готовый шаблон
Если вы скачали готовый шаблон и там подключены сторонние шрифты, то скорее всего они не будут отображаться, если вы заменили латинские буквы на кириллицу, так как во вложенных файлах шрифта нет русской кириллической раскладки (я говорю о англоязычных шаблонах). Чтобы русский шрифт отображался в этих шаблонах (обычно не стандартный шрифт бывает в заголовках и меню сайта) нужно сделать следующие действия:
1. Повторить все то, что я описал выше!
2. Убрать все подключаемые шрифты.
src="js/cufon-yui.js" type="text/javascript">> src="js/bebas-neue_400.font.js" type="text/javascript">> 3. Заменить в css файле в body, h1, h2 и так далее на классический web-шрифт, типа:
font-family: Tahoma, Arial, Helvetica, sans-serif;
4. Можно подключить нестандартные шрифты
Также можно подключить нестандартные (но обязательно с поддержкой русского кириллического) шрифты. Вот отличный сервис, где вы можете скачать русские шрифты для своего сайта.
Надеюсь я вам помог. До новых постов!
Локализация html-страницы средствами CSS
Люди по-разному относятся к CSS. Кто-то ворчит, что раньше и таблицы были зеленее, кто-то горячится, мол, дайте мне ваши таблицы, уж я их озеленю. Лично я довольно давно воспринимаю CSS-файлы как совего рода конфиги для внешнего вида веб-страницы. По сути ведь так и есть. У хорошего верстальщика HTML используется для того, чтобы создать структуру документа, у которой затем с помощью CSS настраивается внешнее отображение.
Обычно под внешним отображением понимаются всякие красоты вроде изображений, круглых уголков, градиентиков и прочей вебдванольности. Однако основным средством передачи информации в Интернете до сих пор является их величество текст. Текст применяется везде: и в навигации по сайту, и в основной информации.
Сейчас, когда космические сайты бороздят просторы мировой паутины, все чаще возникает потребность делать их многоязычными. Способов существует много. Под разные платформы, фреймворки и шаблонизаторы. Способ, который хочу предложить я, использует в качестве основы CSS.
Идея проста. Все верстальщики, работающие с CSS знают о таком свойстве как content:;, которое применяется к псевдоэлементам :after и :before. Чаще всего с помощью «волшебного» сочетания :after и content:; реализуют clear для «плавающих» блоков. Но вообще в content:; можно писать абсолютно любой текст. Без тегов, правда, но это разумное ограничение.
Как это можно использовать? Нужно создать два CSS-файла. Допустим, «en.css» и «ru.css». Основные стили блоков (цвета и прочие красивости) пусть определяются в файле «main.css».
/* Содержание файла «main.css» *//**/ .b-menu:after < content: ''; display: block; clear: both; >.b-menu__item
/* Содержание файла «en.css» *//**/ .b-menu__item_name_main .b-menu__curr:after, .b-menu__item_name_main .b-menu__link:after < content: 'Main Page'; >.b-menu__item_name_portfolio .b-menu__curr:after, .b-menu__item_name_portfolio .b-menu__link:after < content: 'Portfolio'; >.b-menu__item_name_team .b-menu__curr:after, .b-menu__item_name_team .b-menu__link:after < content: 'Team'; >.b-menu__item_name_contacts .b-menu__curr:after, .b-menu__item_name_contacts .b-menu__link:after
/* Содержание файла «ru.css» *//**/ .b-menu__item_name_main .b-menu__curr:after, .b-menu__item_name_main .b-menu__link:after < content: 'На главную'; >.b-menu__item_name_portfolio .b-menu__curr:after, .b-menu__item_name_portfolio .b-menu__link:after < content: 'Портфолио'; >.b-menu__item_name_team .b-menu__curr:after, .b-menu__item_name_team .b-menu__link:after < content: 'Команда'; >.b-menu__item_name_contacts .b-menu__curr:after, .b-menu__item_name_contacts .b-menu__link:after
Дальше нужно просто подключить файлы в таком порядке: main.css, en.css, ru.css. Ну, или сначала ru.css, а en.css — потом. В зависимости от того, какой язык является основным. В принципе, ничто не мешает CSS-свойства по умолчанию запихнуть в main.css, а подключать только файл языка, выбранного пользователем. Я разбил на два файла исключительно для наглядности.
+ Данный способ поддерживается всеми современными браузерами, включая IE восьмой и девятой версии, в том числе мобильными браузерами под iPhone и Android;
+ CSS-файл кешируется браузером, а это значит, что будучи скачанным однажды, он будет храниться у пользователя локально довольно долго (фактически пока с сервера не придет заголовок, сигнализирующий о необходимости обновить кеш);
+ Не нужно перегружать страницу, чтобы применить требуюемую локаль. Достаточно просто яваскриптом изменить href у тега . Или создать новый тег с нужным href.
Минусы (их, к сожалению, больше):
– ИЕ до восьмой версии не понимает свойство content:;, как и некоторые мобильные браузеры;
– Поисковые движки вряд ли проиндексируют тексты, записанные таким образом;
– Есть ряд ограничений к содержимого CSS-свойства content;
– Чтобы упорядочить названия классов для плейсхолдеров при более-менее сложном лэйауте, придется делать их довольно длинными (даже если не использовать BEM-названия);
– Невозможность сохранять длинные тексты с форматированием и изображениями.
На новизну идеи совершенно не претендую.
Как изменить кодировку на сайте. Исправляем ошибку вывода css стилей
Всем привет сегодня я вам расскажу как поменять кодировку на сайте. Я научу вас как изменять кодировку на сайте, чтобы у вас правильно показывались кириллические буквы и специальные символы. Эта запись вам обязательно поможет, если у вас не правильно обрабатываются CSS стили, неправильно выводятся символы, а заместо кириллических букв выводятся непонятные символы.
Многие начинающие web разработчики сталкивались с данной проблемой. Я лично сталкивался с таким недугом и долго не мог понять в чем здесь проблема.
Вот так выглядит данная проблема.
Все кириллические символы заменены на непонятную белибирду, которая появляется на сайте если у вас не правильно указанна кодировка символов.
Я не буду вам сейчас рассказывать виды кодировок и чем они отличаются, скажу просто, что самая популярная кодировка — utf8. Она правильно обрабатывает все популярные специальные символы, а так же кириллические буквы(русские).
Как изменить кодировку на сайте?!
Первый, на каждой странице сайта в HTML коде указать кодировку файла. Кодировка указывается в meta теге внутри тега head. В head нужно прописать .
Для одностраничника, это самый простой и эффективный вариант указания кодировки. Если же у вас динамический сайт с большим количеством страниц, то указание кодировки для каждой страницы будет очень долгим и мучительным методом. В этом случае мы можем использовать способ номер два.
Второй способ заключает в указание кодировки на сервере, через файл htaccess.
Как изменить кодировку на сайте, с помощью .htaccess?
Чтобы это сделать, мы в корневой папке сайта создаем файл .htaccess. Данный файл необходимо открыть как обычный текстовик или с помощью программы для написания кода. Я открываю этот файл через программу Sublime Text.
Для файла .htaccess следует использовать права доступа 644 и загружать его в ASCII-режиме. Если ваш .htaccess файл не работает, то вам следует обратиться к системному администратору или в техподдержку вашего веб-хостинга и убедиться, что использование его разрешено для вашей учетной записи, так как некоторые хостинговые компании не позволяют его использование без предварительного разрешения, это в основном относится к бесплатным хостингам. Также, к сожалению, .htaccess не будет работать на Windows-серверах.
В файл htaccess мы вписываем следующий код.
И всё. Одна строка кода которая изменяет стандартную кодировку сайта на utf-8.
Так же вы можете использовать и другие методы изменения кодировки, о которых мы поговорим позже. Если я выпущу новую запись по способам изменения кодировки, то ссылку обязательно размещу. А пока что на этом все.
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
- Написание материала для курса по разработке ботов на Telegram
- Разработка универсального парсера на PHP
Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube