Размер шрифта, высота и длина строки по Золотому Сечению

Размер шрифта, высота и длина строки по Золотому Сечению

Я просмотрел множество сайтов, чтобы определить, как же люди её вычисляют, и обнаружил несколько интересных цифр:

Высота строки

Фреймворк Twitter Bootstrap использует цифру (1.42857) как отношение между размером шрифта и высотой строки (line-height = font-size * 1.42857).

HTML5 boilerplate используе почти ту же цифру: (1.4).

Medium и zurb foundation фреймворк используют одно и то же значение для высоты строки, которое равно (1.5).

Возможно вам также будет интересно, что adobe topcoat остановился на цифре (1.313), а yahoo purecss использует (1.58). Так какое же отношение выбрать?

Помните, что отношение 1.5 – это то значение, которое является рекомендованным в классических типографических книгах.

Основы типографики для начинающих дизайнеров

Лично я не знаю, какое отношение использовать, и откуда взялись те цифры, которые используют в примерах выше. Могу ли я использовать своё собственное число?

Природа дала нам невероятную пропорцию, которая окружает нас повсюду, под названием золотое сечение (1.618), так что я планирую использовать его для определения высоты строки (14px * 1.618). Таким образом, я нашел ответ на свой первоначальный вопрос, но тут сразу же возник следующий:

“Какова же лучшая ширина строки для размера шрифта в 14px и высоты строки в 23px?”

Ширина строки

Так как же определить взаимосвязь размера шрифта и ширины строки? Всё что я знаю – это то, что ширина строки значительно больше высоты. Для начала неплохо!

Прочитав несколько исследований о лучшем количестве символов в строке (СВС), я обнаружил, что более 60% всех людей читают быстрее с 70 СВС. Вот краткий вывод:

Текст с длиной строки в 55 СВС лучше и быстрее читается, а информация усваивается лучше, чем при длине строки в 25 или 100 символов.

Оптимальная ширина строки в одной колонке варируется от 45 до 75 СВС. Для нескольких колонок длина строки должна быть от 30 до 50 СВС.

Ширина строки должна быть примерно в 30 раз (от 20 до 40) больше размера шрифта.

Люди предпочитают короткие строки в 8-10 слов или от 45 до 60 символов.

Никакого фиксированного значения для ширины строки не существует, но идеальное значение находится где-то между (30-90 СВС) или (8-12 словами).

Давайте рассчитаем ширину строки:

ширина строки = средняя ширина символа * СВС

Средняя ширина символа = размер шрифта / константа (1.618)

В итоге имеем:

Размер шрифта = 14px

Высота строки = (14 * 1.618) = 23px

Ширина строки на 50 СВС = 50 * (14 / 1.618) = 433px

Ускорить процесс вычисления оптимальной высоты и ширины строки в вашем следующем проекте можно с помощью SASS операторов и переменных.

Как получить размеры экрана, окна и веб-страницы в JavaScript?

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

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

Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.

1. Экран

1.1. Размер экрана

Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.

Получить информацию о размере экрана можно с помощью свойства screen объекта window :

1.2. Доступный размер экрана

Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Для получения доступного размера экрана снова обращаемся к window.screen :

2. Окно

2.1. Размер внешнего окна (или внешний размер окна)

Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.

Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :

2.2. Внутренний размер окна (или размер внутреннего окна)

Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).

Объект window предоставляет свойства innerWidth и innerHeight :

Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:

3. Размер веб-страницы

Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).

Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):

Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.

4. Заключение

Надеюсь, теперь Вы понимаете, как получать различные размеры.

Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.

Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.

ByteArrayOutputStream длина < ширина * высота

У меня странная проблема с ByteArrayOutputStream. Я пытаюсь ввести изображение и преобразовать его в массив байтов. Изображение имеет размер 270 х 480 пикселей. Однако если я установлю данные в массив байтов и выведу data.length, то получу 21195, однако 270 x 480 = 129600. Разве они не должны быть одинаковыми? Что я здесь делаю не так?

2 ответа

• Службы Отчетности. Различная ширина и высота ячеек

Когда я использую свой отчет на сервере,я получаю нормальную ширину и высоту ячейки (CanGrow верно). Когда я пытаюсь сохранить как Excel, у меня ширина ячейки меньше, чем я ожидал. Когда я пытаюсь сохранить как слово, у меня плохая ширина и высота ячейки. Наконец, когда я пытаюсь сохранить как.

У меня есть изображение, которое я снимаю с url. Я не знаю заранее размеров этого образа. Как мне стилизовать / расположить <Image/> так, чтобы это была полная ширина родительского вида, а высота вычислялась таким образом, чтобы сохранялось соотношение сторон? Я пробовал использовать onLoad.

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

Различные форматы файлов имеют разную стоимость хранения пикселя.

Для чистого черно-белого (не в оттенках серого) изображения каждому пикселю требуется всего лишь немного.

В изображениях PNG с прозрачностью, в дополнение к красным,зеленым и синим компонентам, каждый пиксель также содержит альфа-компонент (transparency/opacity). Таким образом, количество байтов в представлении изображения зависит от формата изображения и сжатия.

класс BufferedImage позволяет манипулировать любым пикселем по его положению.

Вы можете использовать методы getRGB(int x, int y) и setRGB(int x, int y) для получения или установки указанного пикселя.

length < width * height может произойти только в том случае, если ваше изображение является двоичным, поэтому, если тип-TYPE_BYTE_BINARY. В этом случае кодирование/хранение выполняется строка за строкой, и число байтовых элементов в вашем изображении тогда равно [width/8 + min(width%8, 1) ] * height .

Это может быть лучше в случае изображений с несколькими channels/bands,, поэтому цветные изображения.

Перед преобразованием изображения в ByteArrayOutputStream убедитесь , что изображение закодировано с помощью байта.

Похожие вопросы:

Существует ли соглашение о порядке (высота, ширина) в аргументах функции или при отображении размеров?

Какова ширина и высота пин-кода MKPinAnnotationView в пикселях? Правка: чтобы быть более конкретным, ширина и высота воображаемого прямоугольника на экране iPhone, содержащем булавку.

Я столкнулся с одной странной проблемой, используя приведенный ниже код, я делаю UIScrollView на весь экран. CGRect screenBound = [[UIScreen mainScreen] bounds]; CGSize screenSize =.

Когда я использую свой отчет на сервере,я получаю нормальную ширину и высоту ячейки (CanGrow верно). Когда я пытаюсь сохранить как Excel, у меня ширина ячейки меньше, чем я ожидал. Когда я пытаюсь.

У меня есть изображение, которое я снимаю с url. Я не знаю заранее размеров этого образа. Как мне стилизовать / расположить <Image/> так, чтобы это была полная ширина родительского вида, а.

У меня есть небольшой вопрос о размере потока. Вот моя попытка : ByteArrayOutputStream outStream = new ByteArrayOutputStream(); ZipOutputStream zipStream = new ZipOutputStream(outStream);.

Привет я использую этот пример для обнаружения объекта все работает нормально мне просто нужно еще кое что как добраться: Положение X-Y Ширина — Высота Я не хочу, чтобы ширина или высота над моей.

Мне нужно определить повернутый прямоугольник из его 4 углов. Повернутый прямоугольник определяется центральной точкой, парой размеров (ширина, высота) и углом. Как решается, какой размер является.

Как вызвать переменные (длина,ширина, высота) из другого конструктора класса попытка вызвать переменные length,width, height из класса A не в состоянии сделать это class A < int length; int breadth;.

Если вы введете измерение на странице продукта WooCommerce, оно отобразится на вкладке дополнительная информация, но не будет указано, какое это измерение-длина, ширина или высота. Как я могу.

Размеры и прокрутка окна

Как узнать ширину и высоту окна браузера? Как получить полную ширину и высоту документа, включая прокрученную часть? Как прокрутить страницу с помощью JavaScript?

Для большинства таких запросов мы можем использовать корневой элемент документа document.documentElement , который соответствует тегу <html> . Однако есть дополнительные методы и особенности, которые необходимо учитывать.

Ширина/высота окна

Чтобы получить ширину/высоту окна, можно взять свойства clientWidth/clientHeight из document.documentElement :

Например, эта кнопка показывает высоту вашего окна:

Браузеры также поддерживают свойства window.innerWidth/innerHeight . Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?

Если есть полоса прокрутки, и она занимает какое-то место, то свойства clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.

А window.innerWidth/innerHeight включают в себя полосу прокрутки.

Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения:

В большинстве случаев нам нужна доступная ширина окна: для рисования или позиционирования. Полоса прокрутки «отъедает» её часть. Поэтому следует использовать documentElement.clientHeight/Width .

Обратите внимание, что геометрические свойства верхнего уровня могут работать немного иначе, если в HTML нет <!DOCTYPE HTML> . Возможны странности.

В современном HTML мы всегда должны указывать DOCTYPE .

Ширина/высота документа

Теоретически, т.к. корневым элементом документа является documentElement , и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight .

Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight ! С точки зрения элемента это невозможная ситуация.

Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств:

Почему? Лучше не спрашивайте. Эти несоответствия идут с древних времён. Глубокой логики здесь нет.

Получение текущей прокрутки

Обычные элементы хранят текущее состояние прокрутки в elem.scrollLeft/scrollTop .

Что же со страницей? В большинстве браузеров мы можем обратиться к documentElement.scrollLeft/Top , за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement .

К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств window.pageXOffset/pageYOffset :

Эти свойства доступны только для чтения.

Прокрутка: scrollTo, scrollBy, scrollIntoView

Для прокрутки страницы из JavaScript её DOM должен быть полностью построен.

Например, если мы попытаемся прокрутить страницу из скрипта в <head> , это не сработает.

Обычные элементы можно прокручивать, изменяя scrollTop/scrollLeft .

Мы можем сделать то же самое для страницы в целом, используя document.documentElement.scrollTop/Left (кроме основанных на старом WebKit (Safari), где, как сказано выше, document.body.scrollTop/Left ).

Есть и другие способы, в которых подобных несовместимостей нет: специальные методы window.scrollBy(x,y) и window.scrollTo(pageX,pageY) .

Метод scrollBy(x,y) прокручивает страницу относительно её текущего положения. Например, scrollBy(0,10) прокручивает страницу на 10px вниз.

Кнопка ниже демонстрирует это:

Метод scrollTo(pageX,pageY) прокручивает страницу на абсолютные координаты (pageX,pageY) . То есть, чтобы левый-верхний угол видимой части страницы имел данные координаты относительно левого верхнего угла документа. Это всё равно, что поставить scrollLeft/scrollTop . Для прокрутки в самое начало мы можем использовать scrollTo(0,0) .

Эти методы одинаково работают для всех браузеров.

scrollIntoView

Для полноты картины давайте рассмотрим ещё один метод: elem.scrollIntoView(top).

Вызов elem.scrollIntoView(top) прокручивает страницу, чтобы elem оказался вверху. У него есть один аргумент:

• если top=true (по умолчанию), то страница будет прокручена, чтобы elem появился в верхней части окна. Верхний край элемента совмещён с верхней частью окна.
• если top=false , то страница будет прокручена, чтобы elem появился внизу. Нижний край элемента будет совмещён с нижним краем окна.

Кнопка ниже прокрутит страницу так, что она сама окажется вверху:

А следующая кнопка прокрутит страницу так, что она сама окажется внизу

Запретить прокрутку

Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно установить document.body.style.overflow = "hidden" .

Первая кнопка останавливает прокрутку, вторая возобновляет её.

Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для document.body .

Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.