Макет

Размер экрана, плотность пикселей и масштабирование

Не знаю о вас, но я, когда впервые узнал, что зона прикрепленного просмотра всегда имеет 320 пикселей в ширину - реальных пикселей, а не некое значение, выраженное в процентном выражении от ширины экрана - это меня озадачило. Не даст ли это совершенно разные впечатления от программы на разных дисплеях? Ответ на этот вопрос отрицательный. 320 пикселей - это около 25% от базового размера монитора 1366х768, что означает, что оставшиеся 75% - это вполне знакомые нам 1024х768. На 10-дюймовом дисплее это примерно 2.5 дюйма физического пространства дисплея. Пока всё понятно.

На более крупных мониторах, с другой стороны, таких, как 2560x1440, эти 320 пикселей займут лишь 12,5% ширины, таким образом, макет полного экрана выглядит совершенно иначе. Однако, учитывая то, что подобные мониторы имеют 24-дюймовую диагональ, эти 320 пикселей снова занимают примерно 2.5 дюйма физического пространства экрана, что означает, что зона прикрепленного просмотра выглядит так же, как и ранее. Она лишь имеет больше вертикального пространства и оставляет после себя больше свободного места на экране.

Это приводит нас к вопросу о плотности пикселей (pixel density). Что произойдёт, если ваше приложение окажется на по-настоящему маленьком дисплее, имеющем высокое разрешение? Очевидно, что на подобном дисплее зона в 320 пикселей будет немногим более дюйма. Есть у кого-нибудь увеличительное стекло?

К счастью, это не тот вопрос, о котором беспокоятся приложения для Магазина Windows… Почти. Основное преимущество, которое получает пользователь от подобного дисплея - это более высокая чёткость изображения, но не большая плотность информации. Сенсорные цели должны быть одинаковых размеров на мониторах любых размеров, не важно, сколько пикселей они занимают. Ведь человеческие пальцы не меняются с развитием технологий! Для того, чтобы это учитывать, Windows автоматически уменьшает масштаб эффективного разрешения, которое сообщается приложению, что означает, что любые координаты, которые вы используете внутри приложения (в HTML, CSS и JavaScript) автоматически масштабируются к разрешению того устройства, на котором осуществляется вывод пользовательского интерфейса приложения. Это производится на низком уровне подсистем рендеринга HTML/CSS в хост-процессе приложения, всё выводится в соответствии с особенностями пикселей конкретного устройства для максимальной чёткости изображения.

Что касается "почти", сказанного выше, единственное место, где вам нужно заботиться о плотности пикселей, касается растровой графики для экрана-заставки и плиток приложения, как мы уже говорили в лекции 3. Скоро мы к этому вернемся, в разделе "Графические элементы, которые хорошо масштабируются" ниже.

Разные размеры экрана, разная плотность пикселей может быть протестирована с помощью имитатора в Visual Studio, или на закладке Устройства (Device) в Blend. Последний вариант показан на Рис. 6.5. Здесь отображены применимый DPI и фактор масштабирования. 100% масштаб означает, что приложению напрямую сообщают о разрешении устройства. 140% и 180%, с другой стороны, что означает, что имеет место масштабирование. При размерах экрана 10.6 дюйма, разрешении 2560х1440 и масштабировании в 180%, например, приложение увидит данный экран как экран с размерами 1422х800 (2560/1.8 на 1440/1.8), что очень близко к стандартному дисплею 1366х768. Похожим образом, при размерах экрана 10.6 дюйма и разрешении 1920х1080 масштабирование в 140% покажет приложению экран размером 1371х771 (1920/1.4 на 1080/1.4). И в том и в другом случаях макет, разработанный в расчёте на экран 1366х768 полностью подходит, хотя вы, конечно, можете настроить его так точно, как захотите.

Как отмечено ранее, работая с состояниями просмотра, вы можете программным способом определять точный размер окна вашего приложения посредством свойств window.innderWidth и window.innerHeight, свойствами document.body.clientWidth и document.body.clientHeight, и свойствами clientWidth и clientHeight любого элемента, который занимает 100% тела страницы. Внутри window.onresize вы можете использовать их (или свойства args.view.outerWidth и args.view.outerHeight) для того, чтобы подстроить макет приложения под изменения, касающиеся общего режима отображения приложения. Конечно, если вы используете что-то наподобие CSS-сетки с дробными размерами строк и столбцов, большинство подобных настроек макета будет выполнено автоматически.

В любом случае, размер уже отражает автоматическое масштабирование с учетом плотности пикселей, таким образом, это - размеры, под которые вы адаптируете макет. Если вы хотите знать, каковы физические размеры дисплея, с другой стороны, вы можете воспользоваться свойствами window.screen.width и window.screen.height. Другие параметры дисплея можно обнаружить в объекте Windows.Graphics.Display.DisplayProperties (http://msdn.microsoft.com/library/windows/apps/br226143.aspx), в частности, такие, как logicalDPI и текущее значение resolutionScale. Последнее является значением перечисления Windows.Graphics.Display.ResolutionScale (http://msdn.microsoft.com/library/windows/apps/windows.graphics.display.resolutionscale.aspx), среди них - scale100Percent, scale140Percent, и scale180Percent. Возвращаемые значения этих идентификаторов - 100, 140 и 180, таким образом, вы можете использовать resolutionScale напрямую в вычислениях.

Врезка: Хорошая возможность для удалённой отладки

Работа с различными возможностями устройств предоставляет хорошую возможность поработать с удалённой отладкой, как описано в материале "Выполнение приложений для Магазина Windows на удаленном компьютере" (http://msdn.microsoft.com/library/windows/apps/hh441469.aspx). Такой подход позволит вам протестировать программу на различных дисплеях без необходимости устанавливать на каждом из устройств Visual Studio, и, кроме того, даст вам преимущества отладки с использованием нескольких мониторов. Вам лишь нужно установить и запустить средства удалённой отладки на целевом устройстве и убедиться, что оно подсоединено с помощью кабеля к той же сети, к которой подключен компьютер, на котором вы выполняете разработку. (Вам может понадобиться приобрести маленький USB-Ethernet-адаптер, если ваше устройство не имеет подходящего порта - удалённая отладка не работает через Интернет и при соединении устройств по беспроводной сети). Монитор удалённой отладки, выполняющийся на удалённой машине, сообщает о себе Visual Studio, исполняющемся на машине разработчика. Обратите внимание на то, что когда вы попытаетесь приступить к удалённой отладке в первый раз, вам предложат получить лицензию разработчика для целевого устройства, таким образом, это устройство должно быть подключено к Интернету в это время.

Графические элементы, которые хорошо масштабируются

Различные размеры экранов и плотности пикселей задают приложениям еще одну задачу, не связанную с макетом, касающуюся графических элементов, которые всегда должны выглядеть наилучшим образом. Конечно, вы можете рисовать графические элементы напрямую, используя элемен HTML5 canvas, на что мне хотелось бы обратить ваше внимание, так это на заранее сформированные графические ресурсы.

Масштабируемая векторная графика HTML5 (scalable vector graphics, SVG) в данном случае очень кстати. Вы включаете встроенный SVG-код в свой HTML (включая фрагменты страниц), или вы можете хранить их в отдельных файлах и ссылаться на них как на атрибуты img.src. Один из самых простых способов использовать SVG - разместить элемент img внутри пропорционально настраиваемой ячейки CSS-сетки и задать стили width и height этого элемента в 100%. SVG автоматически масштабируется для заполнения ячейки, и так как ячейка изменяет размер вместе с элементом, являющимся контейнером для SVG, всё обрабатывается автоматически.

У такого подхода есть одна проблема - SVG масштабируется с учетом соотношения сторон ячейки CSS-сетки, в которой находится, а оно не всегда может быть таким, как вам нужно. Для того, чтобы управлять этим поведением, убедитесь, что SVG имеет атрибуты viewBox и preserveAspectRatio, где cоотношение сторон, хранящееся в viewBox соответствует тому, которое задано свойствами SVG width и height:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0"
width="300"
height="150" viewBox="0 0 300 150" preserveAspectRatio="xMidYMid meet">

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

Что касается ресурсов в пакете приложения, мы уже видели, как работать с различными плотностями пикселей в лекции 3, посредством суффиксов к именам файлов .scale-100, .scale-140, и .scale-180. Этот подход работает для любых изображений в вашем приложении, используемых во всех случаях, будь это изображение для экрана-заставки, изображения плиток и другие графические ресурсы, на которые есть ссылки в манифесте. Таким образом, если у вас есть растровое изображение, имеющее имя banner.png, вы создатите три изображения в пакете приложения, которые будут называться banner.scale-100.png, banner.scale-140.png, и banner.scale-180.png. Затем вы можете просто ссылаться на базовое имя элемента в CSS или в конструкциях вида <img src= "images/banner.png"> и background-image: url('images/banner.png'), и загрузчик ресурсов Windows чудесным образом автоматически загрузит изображение, имеющее подходящий масштаб. (Если файлы с суффиксами .scale-* не найдены, загрузчик будет искать файл banner.png). Мы увидим даже больше подобных чудес в лекции 6 курса "Программная логика приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript и их взаимодействие с системой", где мы так же добавим варианты для различных языков и контрастных цветовых схем, которые представляют дополнительные собственные суффиксы.

Если вам не по душе подобная схема именования файлов, знайте, что вместо этого вы можете использовать похожим образом именованные папки. Таким образом, для реализации этого подхода вам понадобятся папки с именами scale-100, scale-140, и scale-180, расположенные в папке изображений и содержащие файлы с неизмененными именами (наподобие banner.png).

В CSS вы так же можете использовать медиа-запросы с установками max-resolution и min-resolution для управления тем, какие изображения будут загружены. Помните, однако, что CSS опирается на логическое DPI, а не на физическое DPI, граница для каждого фактора масштабирования указана далее (значения DPI здесь слегка отличаются от тех, которые даны в документации, так как они получены из эмпирических тетстов; документация предлагает, соответственно, значения в 134, 135 и 174 dpi).

@media all and (max-resolution: 134dpi) {
/* масштаб 100% */
}
 
@media all and (min-resolution: 135dpi) {
/* масштаб 140% */
}

@media all and (min-resolution: 174dpi) {
/* масштаб 180% */
}

Как разъяснено в "Руководстве по масштабированию в зависимости от плотности пикселей" (лекцию 2 курса "Программная логика приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript и их взаимодействие с системой", "Плитки, уведомления, экран блокировки и фоновые задачи", раздел "Использование локальных изображений и изображений, полученных из Web" для того, чтобы найти сведения о том, как при обновлении плиток данные механизмы используются для масштабирования, учёта контрастных схем и языковых особенностей.

Вы можете программным образом получить свойства logicalDpi и resolutionScale из объекта Windows.Graphics.Display.DisplayProperties. Событие logicaldpichanged (событие WinRT) может быть, так же, использовано для проверки изменений resolutionScale, так как эти два параметра всегда связаны. Использование данных API проиллюстрировано примером "Масштабирование в соответствии с DPI" (http://code.msdn.microsoft.com/windowsapps/Scaling-sample-cf072f4f).

Если ваше приложение поддерживает кэш графических ресурсов, кстати, особненно для тех, которые загружены из удалённого сервиса, организуйте их в соответствии с resolutionScale, для которого они были получены. Таким образом, вы можете получить наилучшие изображения если и когда нужно, или вы можете уменьшить масштаб изображений с более высоким разрешением, которые у вас уже есть. Следует так же учитывать, при использовании перемещаемых параметров приложения, что плотность пикселей и размеры дисплея могут варьироваться между различными устройствами пользователя.

Адаптивные и фиксированные макеты для дисплеев различных размеров

Так же, как каждая страница вашего приложения нуждается в подготовке для различных состояний просмотра, страницы нуждаются и в подготовке для экранов различных размеров. Я рекомендую почитать "Руководство по масштабированию для различных экранов" (http://msdn.microsoft.com/library/windows/apps/hh780612.aspx), где есть ценная информация о том, с дисплеями каких размеров может столкнуться ваше приложение. Из этого руководства мы можем сделать вывод о том, что размер самой маленькой области прикрепленного просмотра равняется 320х768, минимальный размер области заполняющего просмотра - 1024х768, и минимальный размер области полноэкранного просмотра (портретного и альбомного) - 1280х800 и 1366х768. Это - базовые параметры для вашего дизайна.

Таким образом, дисплеи лишь увеличиваются, по сравнению с базовыми параметрами, в итоге мы приходим к вопросу: "Что делать с дополнительным пространством?". Первая часть ответа заключается в том, чтобы заполнить экран. Ничего не выглядит глупее, чем приложение, запущенное на 27-дюймовом мониторе и использующее при этом лишь область размером 1366х768, для которой оно было разработано. В подобной ситуации приложение займёт лишь от четверти экрана, до, в лучшем случае, половины. Как я уже говорил много раз, представьте себе, какие обзоры и оценки может получить ваше приложение в Магазине Windows, если вы не будете обращать внимание на подобные детали!

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

Врезка: Параметр "Увеличить все элементы на экране"

Среди параметров компьютера (чудо-кнопка Параметры > Изменение параметров компьютера > Специальные возможности (Settings > Change PC Setings > Ease of Access)) есть тумблер Увеличить все элементы на экране (Make Everything on the Screen Bigger). Включение этого параметра позволяет эффективно увеличить размер экранных элементов примерно на 40%, что подразумевает то, что система сообщает приложениям о том, что размер экрана примерно на 30% меньше, чем текущее разрешение (похоже на уровень масштабирования в 140%). К сачтью, этот параметр отключён, если в итоге система вынуждена будет сообщить об экране, который меньше, чем 1024х768, в итоге, подобное разрешение - это самое меньшее, на что может рассчитывать ваше приложение. В любом случае, при изменении данного параметра вызывается событие Windows.Graphics.Display.DisplayProperties.logicalDpiChanged.

Фиксированные макеты и элемент управления ViewBox

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

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

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

Так как это - более распространённый подход, WinJS предоставляет встроенный элемент управления макетом именно для этой цели: WinJS.UI.ViewBox (http://msdn.microsoft.com/library/windows/apps/br229771.aspx) (не следует путать с атрибутом SVG viewBox). Как и в случае с другими элементами управления WinJS, вы можете объявить его, используя data-win-control в HTML, как показано ниже, где элемент viewBox может содержать один и только один дочерний элемент:

<div data-win-control="WinJS.UI.ViewBox">
<div class="fixedlayout">	
<p>Content goes here</p>	
</div>	
</div>

На самом деле, это всё, на что можно посмотреть при работе с ViewBox. У него нет параметров или свойств, нет методов и событий - всё очень просто! Обратите так же внимание на то, что так как ViewBox - это лишь элемент управления, вы можете использовать для любого содержимого с постоянным соотношением сторон в адаптивном макете. Он предназначен не только для создания макета целой страницы.

Для установки базисного размера ViewBox - размерностей, на которых будет основан ваш код - просто задайте параметры height и width его дочернего элемента в CSS. Например, для установки базисного размера в 1024х768, мы устанавливаем данные свойства в правиле для класса fixedLayout:

fixedlayout { width: 1024px; height: 768px;
}

Как только создан экземпляр объекта ViewBox, он прослушивает события window.onresize и затем применяет 2D-трансформацию CSS к дочерним элементам, основываясь на разнице между базисным размером и реальным размером. Это позволяет сохранить соотношение сторон. Это работает и для увеличения и для уменьшения масштабов отображения содержимого. Автоматически применяется и размещение полос пустого пространства сверху и снизу или справа и слева от дочернего элемента, вы можете задать внешний вид этих областей (на самом деле, любых областей, которые не перекрывает дочерний элемент), используя класс win-viewbox. Как всегда, используйте данный селектор в области видимости конкретного элемента управления, если вы в приложении пользуетесь более чем одним элементом ViewBox, если только вы не хотите, чтобы подобный стиль был применен ко всем элементам.

Базовая структура выше - это то, что вы получаете при создании нового приложения по шаблону Приложение с фиксированным макетом в Visual Studio и Blend. Как показано здесь, создаётся макет с базисным размером 1024х768, но вы можете использовать любой желаемый размер.

CSS для этого шаблона проекта показывает, что вся страница стилизована как гибкое окно CSS для того, чтобы ViewBox был отцентрован, и то, что элементу fixedLayout задана сетка по умолчанию:

html, body {	
height: 100%;
margin: 0;	
padding: 0;	
 }
body {	
-ms-flex-align: center;	
-ms-flex-direction: column;
-ms-flex-pack: center;	
display: -ms-flexbox;	
}
.fixedlayout {	
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;	
display: -ms-grid;	
height: 768px;
width: 1024px;
}

Если вы создаете проект по этому шаблону в Blend, добавьте стиль границы к правилу fixedLayout (наподобие border: 2px solid Red;), и поэкспериментируйте с режимами отображения и настройками дисплея на закладке Устройство (Device). Таким образом вы можете понаблюдать за тем, как ViewBox реализует возможности масштабирования без каких-либо усилий с вашей стороны. Для того, чтобы показать это ярче, упражнение fixedLayout для этой лекции содержит измененный на canvas дочерний элемент ViewBox, в котором нарисована сетка 4х3 (соответствующая соотношению сторон экрана 1024х768) из квадратных ячеек размером по 256 пикселей, содержащих окружности. Как показано на Рис. 6.6, квадраты и круги не превращаются в прямоугольники и овалы, когда мы переключаем состояния просмотра и размеры экранов, автоматически добавляются полосы пустого пространства (применяя стиль background-color к классу win-viewbox).

Врезка: Растровая графика и фиксированные макеты

Если вы используете с ViewBox растровую графику, настройте их в соответствии с максимальным разрешением 2560х1440, таким образом, они будут хорошо выглядеть на больших дисплеях и будут отображаться с уменьшением масштаба (вместо увеличения) на дисплеях меньшего размера. Вы можете воспользоваться и альтернативным подходом, загружая различные изображения (посредством различных URI для img.src), которые наилучшим образом подходят для наиболее широко распространённых размеров дисплея.

Обратите внимание на то, что всё еще применимо масштабирование разрешения. Если приложение исполняется на дисплее высокой плотности размером 10.6 дюймов и разрешением 2560х1440 (масштабирование 180%), приложение, и, таким образом, ViewBox опознают такой дисплей как дисплей меньшего размера. Но если вы поддерживаете графические элементы для собственного разрешения устройства, они будут выглядеть чётко при выводе на экран.

Адаптивные макеты

Адаптивные макеты - это те макеты, используя которые приложение отображает больше содержимого, если ему доступно больше экранного пространства.

Подобные макеты легче всего реализовать с использованием CSS-сетки, где пропорциональные строки и столбцы автоматически увеличиваются или уменьшаются; элементы внутри ячеек сетки соответствующим образом подстраивают свои размеры. Это можно наблюдать в шаблонах проектов для Visual Studio и Blend, особенно - в шаблоне Приложение таблицы. На типичном дисплее с разрешением 1366х768 вы можете видеть некоторое количество элементов, как показано в верхней части Рис. 6.7. Переход на 27-дюймовый дисплей с разрешением 2560х1440 позволит вам увидеть гораздо больше данных, это можно видеть в нижней части рисунка.

Честно говоря, проект Приложение таблицы не выполняет особой обработки макета при изменении размеров экрана, отличающейся от того, что он выполняет для различных режимов просмотра. Из-за использования CSS-сеток и пропорциональных размеров ячеек, ячейка, содержащая элемент управления ListView, автоматически увеличивается. Элемент управления ListView самостоятельно просшушивает событие window.onresize, в итоге, нам не нужно отдельно управлять обновлением его макета.

Общая стратегия работы с адаптивным макетом, таким образом, не вызывает затруднений:

В качестве другого ориентира вы можете воспользоваться примером "Адаптивный макет с использованием CSS" (http://code.msdn.microsoft.com/windowsapps/Adaptive-layout-with-sample-062e7fe2), который применяет тот же подход, что и шаблон проекта Приложение таблицы, полагаясь на самостоятельную подстройку своих параметров элементами управления. В примере, вы увидите, что приложение не выполняет никаких прямых расчётов, основанных на размерах окна.

Вам, как разработчику, должно быть понятно и то, что то, как приложение работает с экранами различных размеров - это вопрос дизайна. Вышеприведенная стратегия - это то, что вы используете для реализации дизайна, но дизайн определяет то, как всё будет выглядеть. Эти соображения, которых я здесь лишь кратко коснулся, описаны в материале "Руководство по масштабированию для различных экранов" (http://msdn.microsoft.com/library/windows/apps/hh780612.aspx):

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

Использование CSS-сетки

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

Так как этот курс направлен на особенности разработки для Windows 8, я оставляю задачу разъяснения всех подробностей о сетке спецификациям W3C: http://dev.w3.org/csswg/css3-grid-layout/ и http://www.w3.org/TR/css3-grid-layout/. Эти материалы представляют собой общие руководства, которые помогут в понмании того, как настраиваются размеры строк и столбцов, особенно когда некоторые из них объявлены с фиксированными размерами, кого размер некоторых зависит от содержимого, а другие заданы так, чтобы они заполняли оставшееся пространство. Здесь много тонкостей!

Так как эти спецификации, когда я пишу это, всё еще находятся в разработке, полезно точно знать, какие части спецификация реально поддерживаются подсистемой HTML/CSS, которой пользуются приложения для Магазина Windows.

Для элемента, содержащего сетку, поддерживаемые стили весьма просты. Во-первых, используйте модели отображения -ms-grid и -ms-inline-grid (стиль display:). Позже мы вернемся к -ms-inline-grid.

Во вторых, в элементах сетки используйте -ms-grid-columns и -ms-grid-rows для задания их расположения. Если оставить эти параметры незаданными, значение по умолчанию - это один столбец и одна строка. Поддерживается и синтаксис для задания повторяющихся конструкций, такой, как -ms-grid-columns: (1fr)[3];, что особенно удобно, когда у вас имеется повторяющиеся серии строк или столбцов, которые появляются внутри строк описаний. Как пример, следующие команды эквивалентны:

-ms-grid-rows:10px 10px 10px 20px 10px 20px 10px;
-ms-grid-rows:(10px)[3] (20px 10px)[2];	
-ms-grid-rows:(10px)[3] (20px 10px) 20px 10px;	
-ms-grid-rows:(10px)[2] (10px 20px)[2] 10px;

То, как вы задаёте строки и столбцы - вопрос достаточно интересный, так как вы можете сделать некоторые из них фиксированными, некоторые - гибко меняющими размеры, а некоторые - ориентированными на размер содержимого. Этих целей можно достичь, используя следующие значения. Опять же, посмотрите документацию по особенностями использования спецификаторов max-content, min-content, minmax, auto, и fit-content, вместе со значениями, которые задаются в таких единицах измерения, как px, em, %, и fr. Приложения для Магазина Windows, так же, поддерживают, в качестве единиц измерения, такие показатели, как vh (высота окна просмотра) и vw (ширина окна просмотра).

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

Обратите особое внимание на то, что нумерация строк и столбцов начинается с 1, а не с 0. Перепрограммируйте ваш ум, ориентированный на JavaScript для того, чтобы это запомнить, так как вам понадобится небольшая трансляция адресов в том случае, если вы храните дочерние элементы в массиве, нумерация которого начинается с 0.

Кроме того, обращаясь к любому из этих -ms-grid* стилей как к свойствам в JavaScript, опустите тире и переключитесь на написание адресов в "верблюжьем" (camel casing) стиле: msGrid, msGridColumns, msGridRowAlign, msGridLayer.

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

Переполнение ячейки сетки

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

Пример содержимого, которое выступает за пределы содержащей его ячейки можно найти в упражнении GridOverflow в дополнительных материалах к этой лекции. Здесь создана сетка из прямоугольных элементов, 4х4, но нижеприведенный код, размещенный в конце функции doLayout (js/default.js) размещает первый прямоугольник за пределами ячейки:

children[0].style.width = "350px"; children[0].style.marginLeft = "150px"; children[0].style.background = "#fbb";

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

У меня есть некоторые сомнения, касающиеся того, хорошая ли это возможность, если речь идёт о случаях, когда вы ожидаете иного поведения сетки, желая, чтобы она меняла размер, подстраиваясь под содержимое. Если это - именно то, что вам нужно - попробуйте воспользоваться HTML-таблицей.

Вертикальная центровка содержимого

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

В результате, для того, чтобы это реализовать, было разработано множество методов. Например, об этом идет речь здесь: http://blog.themeforest.net/tutorials/vertical-centering-with-css/. К несчастью, практически все эти методы основаны на фиксированной высоте - а это может работать для веб-сайта, но не подходит для адаптивных макетов, в которых нуждаются приложения для Магазина Windows. И единственный метод, который не использует фиксированную высоту, основан на применении встраиваемой таблицы. Эх.

К счастью, и CSS-сетка, и гибкое окно (смотрите раздел "Макет элемента" ниже) позволяют легко решить эту проблему. В случае с сеткой, вы можете просто создать родительский элемент div с сеткой 1х1 и использовать стиль -ms-grid-row-align: center для дочернего элемента div (значение по умолчанию для которого - ячейка 1,1):

<!-- В HTML -->	
<div id="divMain">	
<div id="divChild">	
<p>Centered Text</p>
</div>	
</div>

/* В CSS */
#divMain { width: 100%; height: 100%; display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 1fr;
}

#divChild {
-ms-grid-row-align: center;
-ms-grid-column-align: center;

/* Горизонтальное выравнивание текста так же работает с */
/* text-align: center; */	
 }

Решение этой проблемы даже проще с помощью макета на основе flexbox, где flex-align: center задаёт вертикальную центровку, flex-pack: center отвечает за горизонтальную центровку, и дочерний элемент div не нужен. Это тот же подход к стилизации, что применен в шаблоне Приложение с фиксированным макетом для центровки элемента ViewBox:

<!-- В HTML -->	
<div id="divMain">	
<p>Centered Text</p>
</div>	
/* В CSS */
#divMain { 
width: 100%; height: 100%;
display: -ms-flexbox;
-ms-flex-align: center;
-ms-flex-direction: column;
-ms-flex-pack: center;
}

Код обоих методов можно найти в упражнении CenteredText к этой лекции. (Упражнение так же используется для демонстрации применения многоточий, в итоге он выглядит не точно так же, как показано выше).

Масштабирование размеров шрифтов

Один из вопросов, обычно вызывающих затруднение при работе с HTML, заключается в принятии решения о том, как масштабировать размер шрифта в адаптивном макете. Я не предлагаю вам делать это с помощью стандартных типографских методов, рекомендованных для дизайна Windows-приложений, как мы увидим ниже в этой лекции. Это больше касается вопроса, когда вам нужно использовать шрифты в каком-то ином аспекте, как, например, в виде больших букв на плитке игры.

При работе с адаптивным макетом, обычно нужно, чтобы размер шрифта был пропорционален размерностям его родительского элемента. (Это не проблема, если родительский элемент имеет фиксированный размер, потому что так вы можете использовать шрифт фиксированного размера). К несчастью, процентные значения, используемые в стиле font-size в CSS, основаны на размере шрифта по умолчанию (1em), а не на размере родительского элемента, как в случае с height и width. Вам, вероятно, понравилось бы использование выражения наподобие font-size: calc(height * .4), но значения других CSS-стилей того же самого элемнта не доступны calc.

Одно исключение из этого правила касается значения vh (которое можно использовать в calc). Если вы знаете, например, что текст, который вы хотите масштабировать, содержится в ячейке сетки, которая всегда занимает 10% от высоты окна вывода, и вы хотели бы, чтобы размер шрифта равнялся половине от этого значения, вы можете воспользоваться выражением font-size: 5vh (5% от высоты окна просмотра).

Другой метод заключается в использовании SVG для вывода текста, где вы можете установить атрибут viewBox и задать font-size относительно этого viewBox. Затем, масштабирование SVG по отношению к ячейке сетки эффективно масштабирует и шрифт:

<svg viewBox="0 0 600 400" preserveAspectRatio="xMaxYMax">
<text x="0" y="150" font-size="200" font-family="Verdana"> Big SVG Text
</text>
</svg>

Так же вы можете воспользоваться JavaScript для вычисления желаемого размера шрифта, основываясь на свойстве clientHeight родительского элемента. Если данный элемент находится в ячейке сетки, размер шрифта (и высотра строки) могут составить некоторый процент от высоты ячейки, таким образом, позволяя масштабировать шрифт вместе с ячейкой.

Так же вы можете попытаться использовать элемент управления WinJS.UI.ViewBox. Если вам нужно, чтобы текст занял 50% элемента, содержащего его, поместите ViewBox в div, который настроен на размер, равняющийся 50% размера контейнера, и стилизуйте дочерний элемент элемента ViewBox с помощью position: absolute. Попытайтесь, для того, чтобы увидеть это, поместить нижеприведеннй код в default.html нового проекта, созданного на основе шаблона Пустое приложение:

<div style="height:50%;">	
<div data-win-control="WinJS.UI.ViewBox">	
<p style="position:absolute;">Big text!</p>
</div>	
</div>

Макет элемента

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

Важна и работа с шаблонами отдельных элементов, которые расположены в изменяющихся областях страницы. Таким образом, если вы задали сетку, определяющую общий вид страницы и получили с её помощью некоторое количество областей фиксированного размера (для заголовков, изображений в заголовке, панелей управления и так далее), оставшаяся область может сильно меняться в размере при изменении размеров окна. В этом разделе, таким образом, давайте взглянем на некоторые средства, которые мы можем применять в подобных областях: CSS-трансформации, гибкое окно, вложенные и встроенные сетки, многоколоночный текст, CSS-выражения и объединенные CSS-рамки. Информацию по этим и другим возможностям CSS, которые поддерживаются приложениями для Магазина Windows (такие, как фоны, границы, градиенты), можно найти в материале "Каскадные таблицы стилей" (http://msdn.microsoft.com/library/windows/apps/hh996828.aspx).

2D и 3D-трансформации в CSS

Практически невозможно размышлять о макетах для элементов не принимая во внимание CSS-трансформации. Трансформации - очень мощное средство, так как они делают возможным изменение отображения элемента, не воздействуя ни на последовательность элементов в документе, ни на общий макет. Это очень полезно для реализации анимаций и переходов. Трансформации широко используются библиотекой анимации WinJS, которые обеспечивают внешний вид и восприятие встроенных элементов управления, характерные для Windows 8. Как мы узнаем в лекции 5 курса "Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript", вы можете так же напрямую пользоваться этой библиотекой.

CSS-трансформации можно использовать непосредственно, конечно, в любое время, когда вам нужно преобразовать, масштабировать, повернуть элемент. Приложения для Магазина Windows поддерживают и 2D (двумерные) и 3D (трехмерные) трансформации (http://dev.w3.org/csswg/css3-2d-transforms/Во время написания этого материала префиксы -ms-* для данных стилей уже не нужны, но всё еще поддерживаются.:

Подробности можно найти на странице "Трансформации" (http://msdn.microsoft.com/library/windows/apps/hh453377.aspx). Знайте так же, что так как хост-процесс приложения использует те же механизмы, что и Internet Explorer, трансформации используют все преимущества аппаратного ускорения.

Гибкое окно (flexbox)

Так же, как сетка - отличный инструмент для решения проблем макетов страниц, модуль гибкое окно CSS, описанный в http://www.w3.org/TR/css3-flexbox/, прекрасно подходит для работы с областями, размеры которых могут меняться, содержимое в которых нуждается в "заполнении" доступного пространства. Процититуем спецификацию W3C:

В данной оконной модели, дочерние элементы окна размещаются либо горизонтально, либо вертикально, неиспользованное пространство может быть назначено конкретным дочерним элементом или распределено между такими элементами путём назначения 'flex' тем дочерним элементам, которые должны заполнять это пространство. Вложенность подобных окон (горизонтальное внутри вертикалного, или вертикальное внутри горизонтального) может быть использована для построения двумерных макетов.

Так как спецификации гибкого окна представлены в форме чернового стандарта, конкретные стили, используемые в приложениях для Магазина Windows - это Если вы привыкли к стилям -ms-box* для гибких окон, Microsoft с тех пор следует спецификациям W3C, где ожидается последняя старшая редакция перед финальным принятием стандарта. Когда новый синтаксис заменит старый, старый не будет работать ни в приложениях для Магазина Windows, ни в Internet Explorer 10.. Полную справочную информацию по другим поддерживаемым свойствам вы можете найти на странице "Макет на основе гибкого окна ("Flexbox")" (http://msdn.microsoft.com/library/windows/apps/hh453474.aspx):

Как и для всех остальных стилей, Blend - это отличный инструмент, с помощью которого можно экспериментировать с различными стилями гибких окон, так как вы можете сразу же видеть эффект от их применения. Также полезно знать, что гибкое окно используется во многих местах WinJS и в шаблонах проектов, как мы видели ранее в случае с шаблоном Приложение с фиксированным макетом. В частности, возможности гибкого окна использует элемент управления ListView, это позволяет ему отображать больше элементов, когда доступно больше пространства. Элемент управления FlipView использует гибкое окно для центровки элементов. Элементы управления Ratings, DataPicker и TimePicker организуют свои внутренние элементы с использованием встроенного гибкого окна. Весьма вероятно, что ваши собственные пользовательские элементы управления будут поступать так же.

Вложенные и встроенные сетки

Так же, как и гибкое окно имеет модели блочного уровня и встроенные модели, существуют и встроенные сетки: display: -ms-inline-grid. В отличе от сетки блочного уровня, встроенный вариант позволяет вам располагать несколько сеток на одной и той же линии. Это показано в упражнении InlineGrid, где у нас есть три элемента div в HTML, которые можно переключать между встроенной моделью (по умолчанию) и моделью блочного уровня:

//В обработчике activated	
document.getElementById("chkInline").addEventListener("click", function () {
setGridStyle(document.getElementById("chkInline").checked);	
});	
setGridStyle(true);

//В любом месте в default.js 
function setGridStyle(inline) {
var gridClass = inline ? "inline" : "block";

document.getElementById("grid1").className = gridClass;
document.getElementById("grid2").className = gridClass;
document.getElementById("grid3").className = gridClass;
}	

/* default.css */	
.inline {	
display: -ms-inline-grid;
}	

.block {
display: -ms-grid;
}

При использовании встроенной сетки элементы выглядят так:

При использовании сетки блочного уровня мы видим это:

Шрифты и переполнение текстом

Как упоминалось ранее, типографика - это важный элемент дизайна приложений для Магазина Windows, и, в основном, стандартные стили шрифтов, использующие Segoe UI, уже заданы в таблицах стилей WinJS. В Windows SDK есть очень полезный пример "CSS-типографика" (http://code.msdn.microsoft.com/windowsapps/typography-JS-sample-e2df9eb4), где сравнивается элементы заголовков HTML и стили win-type-*, показывая запасные варианты шрифтов и использование двунаправленных шрифтов (с направлением слева направо и справа налево).

Если говорить о шрифтах, пользовательские шрифтовые ресурсы, использующие правило @font-face в CSS, разрешены в приложениях для Магазина Windows. Для страниц локального контекста, свойство src правила должно ссылаться на шрифт файла, который находится в пакете (то есть, это URI, который начинается с / или с ms-appx:///). Страницы, исполняющиеся в веб-контексте, могут загружать шрифты из удалённых источников. Другой вопрос, касающийся текстов и типографики касается текста, который выходит за пределы выделенной для него области. Вы можете использовать стиль CSS text-overflow: ellipsis; для обрезки текста и добавления в конец текста …, и таблицы стилей WinJS содержат класс win-type-ellipsis для этих целей. В дополнение к установке text-overflow, этот класс так же добавляет overflow: hidden (для подавления появления полос прокрутки), и white-space: nowrap. Эти стили вы можете добавлять к любому текстовому элементу, когда вы хотите реализовать поведение, касающееся усечения текста.

Спецификация W3C, касающася переполнения текстом, http://dev.w3.org/csswg/css3-ui/#text-overflow, содержит полезные сведения о том, что можно и что нельзя сделать в этой области. Одно из ограничений текущей спецификации заключается в том, что многострочный обтекающий текст не работает с усечением текста. Таким образом, вы можете использовать обтекание текстом с помощью стиля word-wrap: breakpword, но не можете совместить его с text-overflow: ellipsis (word-wrap имеет преимущество). Я так же узнал, что перетекающий текст из многострочной CSS-области (смотрите следующий раздел) работает в однострочной области с возможностью усечения текста, но text-overflow не применим к областям. В итоге, сейчас вы нуждаетесь в сокращении текста и ручной вставке многоточий, если текст занимает несколько строк.

Для демонстрации сокращения текста и обтекания словами, посмотрите упражнение к этой лекции CenteredText.

Многоколоночные элементы и области

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

CSS3 предоставляет средства для создания многоколоночных макетов внутри элемента (смотрите http://www.w3.org/TR/css3-multicol/). С помощью этих средств вы можете настроить отдельный элемент так, чтобы он расположил своё содержимое в несколько колонок и указать множество параметров подобного макета. Соответствующие стили поддерживают и приложения для Магазина Windows (без необходимости использования префиксов поставщика):

Соответствующую документацию можно найти на странице "Многоколоночный макет" (http://msdn.microsoft.com/library/windows/apps/hh441204.aspx).

Blend предоставляет отличное окружение для того, чтобы увидеть, как работают эти стили. Если вы размещаете мнокоголоночный элемент внутри ячейки сетки, которая может менять размер, вы можете задать параметр column-width и позволить подсистеме макетов добавлять и удалять колонки при необходимости, или вы можете использовать медиа-запросы или JavaScript для самостоятельной установки свойства column-count.

Многоколоночная верстка CSS3, опять же, может быть применена лишь к содержимому одного отдельного элемента. Будучи весьма полезной, она имеет ограничения на использование прямоугольных элементов-контейнеров и прямоугольных колонок (увеличение их числа происходит в бок). Определенные приложения, наподобие электронных журналов, нуждаются в большей гибкости, в такой, как перетекание содержимого между несколькими элементами с более разнообразной формой, и в колонках, которые имеют смещение относительно друг друга. Эти взаимоотношения показаны на Рис. 6.8, где прямоугольник в левой верхней части может быть заголовком, блок-вставка может содержать изображение, и текстовое содержимое распределено между двумя колонками неправильной формы.

Для поддержки колонок неправильной формы, области CSS (CSS Regions) (http://dev.w3.org/csswg/css3-regions/) приходят в онлайн и поддерживаются приложениями для Магазина Windows (смотрите материал "Области" (http://msdn.microsoft.com/library/windows/apps/hh453722.aspx)). Области позволяют произвольно (это так - абсолютно) позиционировать элементы для взаимодействия со встроенным содержимым. На Рис. 6.8 изображение может быть позиционировано с использованием абсолютных параметров на странице и содержимое колонок будет его обтекать.

Ключевый стиль для позиционирования элемента это float: -ms-positioned, который следует сопровождать position: absolute. Обычно это всё, что вам нужно: разместить в нужном месте позиционированный элемент, а подсистема макета сделает всё остальне. Следует отметить, что CSS-перенос (Hyphenation), еще один модуль, близко связан со всем этим, так как выполняет динамическое макетирование текста, мгновенно предоставляя подобные возможности. К счастью, приложения для Магазина Windows поддерживают -ms-hyphens и стили -ms-hyphenation* (их эквивалентные им свойства JavaScript). Переносы описаны в http://www.w3.org/TR/css3-text/, документацию, относящуюся к приложениям для Магазина Windows можно найти в материале "Области" (http://msdn.microsoft.com/library/windows/apps/hh453722.aspx).

Вторая часть рассказа касается так называемых цепочек потоков или областей (которые, так же, являются частью спецификации, касающейся областей). Они обеспечивают возможность перетекания содержимого между множеством элементов-контейнеров, как показано на Рис. 6.9. Цепочки областей могут так же позволить стилизовать содержимое в соответствии со стилем контейнера, вместо того, чтобы стилизовать их так, как задано в их источнике. Каждый контейнер, другими словами, может задать собственный стиль и содержимое адаптируется к нему, но обычно, для обеспечения единообразия, все контейнеры имеют похожие стили.

Всё это работает следующим образом. Источник контента определяет элемент iframe, который указывает на HTML-файл (и iframe, конечно, может принадлежать и локальному и веб-контексту). Он стилизуется с помощью ms-flow-into: <element> (в JavaScript - msFlowInfo), где <element> - это id первого контейнера:

<!-- HTML -->	
<iframe id="s1-content-source" src="/html/content.html"></iframe>
<div class="s1-container"></div>	
<div class="s1-container"></div>	
<div class="s1-container"></div>	

/* CSS */
#s1-content-source {
-ms-flow-into: content;
}

Обратите внимание на то, что -ms-flow-into предотвращает отображение содержимого лишь в iframe.

Контейнером может быть любой незаменяемый (nonreplaced) элемент. То есть, любой элемент, внешний вид и размеры которого не определяются внешним источником, такой, как img. Он должен поддерживать включение содержимого между его открывающим и закрывающим тегами, наподобие div (он используется чаще всего), или p. Каждый контейнер стилизуется с помощью -ms-flow-from: <element> (msFlowFrom в JavaScript), где <element> - это первый контейнер в потоке. Расположение содержимого затем производится в том порядке, в котором элементы появляются в HTML (как выше):

.s1-container {
-ms-flow-from: content;
/* Другие стили */
}

Этот простой пример взят из примера "Статические области CSS" (http://code.msdn.microsoft.com/windowsapps/Static-Regions-sample-f2158049), который так же содержит несколько других сценариев. Есть еще два интересных проекта, пример "Динамические области CSS" (http://code.msdn.microsoft.com/windowsapps/Dynamic-Region-Templates-94bc9c95), и "Шаблоны динамических областей CSS" (http://code.msdn.microsoft.com/windowsapps/Dynamic-Region-Templates-94bc9c95), последний является источником рисунка 6.8. Во всех этих случаях знайте, что стилизация областей ограничена свойствами, которые воздействуют на контейнер, но не на содержимое. Стиль содержимого взят из HTML-источника iframe. Именно поэтому text-overflow: ellipsis не работает, так же не работает font-color и так далее. Но стили, наподобие height и width, вместе со стилями границ, полей, отступов и другие свойства, которые не влияют на содержимое, применять можно.

Что мы только что изучили