Я хочу сделать что-то вроде следующего:Align текст на основе, если страница влево или вправо
@page :left{
h1 {text-align: left;}
}
@page :right {
h1 {text-align: right;}
}
, но этот синтаксис не работает в CSS. Как изменить выравнивание текста в зависимости от того, находится ли страница слева или справа?
Я не проверял это, я полагаю, вы можете сделать это:
@page :left h1 {text-align: left;}
@page :right h1 {text-align: right;}
Просто попробовал, не работал (в Chrome). –
В настоящее время нет браузера, поддерживающего правило @page. Вы можете попробовать оценочную копию PrinceXML – pwavg
Если настройка выравнивания для всего текста на странице является приемлемым, это должно работать:
@page :left {text-align: left;}
@page :right {text-align: right;}
Если страница содержит один элемент h1, плюс один или несколько других элементов, вы можете поместить h1 в заголовок страницы, см. this related question.
Спасибо, но мне нужно уметь стилизовывать отдельные элементы. –
@Nate: отредактированный ответ – Hobbes
Спасибо. Я думаю, что в настоящее время нет ответа CSS на более общий вопрос о стилизации вещей, основанный на текущей или левой стороне страницы, но решение, которое вы указали, будет работать с Flying Saucer или WeasyPrint (но не с любыми браузерами). –
Согласно https://www.w3.org/TR/css3-page/#margin-property-list, синтаксис:
@page :left {
h1 { text-align: left; }
}
@page :right {
h1 { text-align: right; }
}
правильно; однако, как говорят другие, в настоящее время нет поддержки браузера для @page, а последняя версия PrinceXML не поддерживает text-align.
Это означает, что к настоящему времени это невозможно.
Однако PrinceXML поддерживает margin в контекстах поля страницы. Таким образом, если можно позволить проталкивать текст, используя статические поля, например:
@page :left{
h1 { margin-right: 10000em; } // We all know 10000em equals to infinity.
}
@page :right {
h1 { margin-left: 10000em; }
}
тогда это ОК kludge.
Редактировать: На самом деле PrinceXML поддерживает text-align, но не для заголовков; видимо, он работает только с созданным строковым содержимым.
Вы хотите изменить выравнивание только для h1 или для всех стилей абзацев на этой странице? – Hobbes
Совместимость кажется ограниченной, что может быть основной проблемой. Https://developer.mozilla.org/en-US/docs/Web/CSS/:left Но вы пробовали «margin-left:» и «margin-right» : '? Text-align выравнивает текст только в ваших тегах h1, и если нет набора ширины, вы не увидите выравнивания с обеих сторон, поскольку блок h1 будет только шириной, чем текст внутри него. –
@Hobbes У меня есть только один элемент текста на этой странице, поэтому я предполагаю, что в любом случае все будет в порядке. @HastigZusammenstellen, это имя слишком длинное для сообщения '@'. В любом случае, любое решение прекрасно, если я могу указать некоторое форматирование в зависимости от того, оставлена ли страница или нет. –