Изнесени цитати с HTML5 и CSS

Original on http://miekd.com/articles/pull-quotes-with-html5-and-css/

Разтегателен цитат е печатна техника, в които откъс или цитат от статия се дублира в рамките на статията, използвайки различен стил за форматиране, така че тя скача на читателя.

Безсрамно копиране на откъс от привличащ цитат в собствен елемент не е начин да отида. Разтегателен цитат е чисто визуални техника, и следователно не трябва да променят структурата на тялото. Освен това, структурно представяне на извлечение се вижда два пъти от хора, с използване на фуражни читатели или услуги като Instapaper, както и да бъдат повторно четене от хора, които използват екранни четци. И така, как можем най-добре автор в нашата надценка?

Нашият добър приятел, атрибутни данни

HTML5 въведе възможността за авторите да създадат обичай не са видими данни и атрибути. Тези атрибути могат да съдържат данни, че няма да се отрази оформление или представяне.

Потребителски атрибути данни са предназначени за съхранение на потребителски данни частни страница или приложение, за които има не по-подходящо атрибути или елементи.

Чрез добавяне на data-pullquote атрибут на елемент, ние отдаваме текста на притегляне оферта, за да, все още не добавяйте видим съдържание.

Показване на притегляне цитат

Използване на CSS content имот със стойност на attr(data-pullquote) , ние може да покаже на привличащия цитат с или :before или :after псевдо-клас на посочените по-горе елемент блок ниво. В момента, аз :before преди псевдо-клас, тъй като аз вярвам, че това дава възможност за по-последователен стил с поплавъци . По-обширен поглед към СГО ще бъде както следва:

.has-pullquote:before {
	/* Reset metrics. */
	padding: 0;
	border: none;

	/* Content */
	content: attr(data-pullquote);

	/* Pull out to the right, modular scale based margins. */
	float: right;
	width: 320px;
	margin: 12px -140px 24px 36px;

	/* Baseline correction */
	position: relative;
	top: 5px;

	/* Typography (30px line-height equals 25% incremental leading) */
	font-size: 23px;
	line-height: 30px;
}

При изпълнението на този блог, аз съм привеждане на привличащия цитат право на съдържанието по подразбиране. С вторичен име на класа, издърпайте цитат могат да бъдат приведени в съответствие в различни стандартизирани мода.

.pullquote-left:before {
	float: left;
	margin: 12px 31px 24px -102px;

	width: 251px;
}

Освен това, това, което би сте забелязали, в кода: изнесени цитати, тук са базирани на вертикален ритъм с постепенно съотношението на 05:04. Марк Boulton е написал голяма статия за постепенно водеща .

Различна и облицовки дръпнете цитат

Различни предмети могат да имат нужда от различни кавички дръпнете. Чрез създаването на няколко стандартизирани classnames за тези различни случаи, можем да го направим лесен за себе си по време на процеса на. Ето няколко примера по отношение на различни шрифтове, включително подробно на различни вертикални отмествания на шрифт, за да бъдат приведени в съответствие с вертикален ритъм типографските.

.pullquote-adelle:before {
	font-family: "adelle-1", "adelle-2";
	font-weight: 100;

	top: 10px !important;
}

.pullquote-helvetica:before {
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-weight: bold;

	top: 7px !important;
}

.pullquote-facit:before {
	font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
	font-weight: bold;

	top: 7px !important;
}

Тези изнесени цитати са подкрепени от всеки съвременен браузър IE8.