ugrás a tartalomhoz

Drop Caps: Historical Use And Current Best Practices With CSS

Joó Ádám · 2012. Ápr. 5. (Cs), 02.39
Iniciálék régen és ma
 ■
1

moderálás...

TeeCee · 2012. Ápr. 11. (Sze), 19.09
LOL, kimoderálják, amit véleményként írtam...

Mégpedig, hogy használjon 'em'-et 'px' helyett a CSS-ben, és csináltam egy mintát is, amit belinkeltem...

Az 'em'-re vonatkozó részt kitörölték az egyetlen meghagyott postomból, a példa URL-t meg kiszedték...

Kötsögök!
2

azért leírod

Poetro · 2012. Ápr. 11. (Sze), 19.18
Azért leírod ide még egyszer, csakhogy legalább a Weblabor olvasói meg tudják nézni?

Gyorsan én is csináltam egy változatot, nem kell hozzá semmilyen markup, mondjuk csak IE8+ esetén működik.
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
* {
	margin:0px;
	padding:0px;
}

body {
	background-color:#8C8273;
}

#text_container {
	width:450px;
	height:auto;
	margin:20px auto;
	padding:28px 16px 20px 34px;
	background-color:#ffffff;
}

p {
	font-family:georgia;
	font-size:15px;
	line-height:27px;
	margin-bottom:18px;
	padding-right:20px;
	color:#47331F;
}

.drop:first-letter {
	float: left;
	width: 72px;
  line-height: 0px;
  font-size: 0px;
	padding-bottom: 80px;
	padding-right: 80px;
	color: rgba(0,0,0,0);
}

.f:first-letter {
	background: url(http://media.smashingmagazine.com/wp-content/uploads/2012/02/f_small.jpg) 0 0 no-repeat;
}
    </style>
</head>
<body>
<div id="text_container">
<p class="drop f">Fine typography does not require using an illustrated letter. But should you choose to use one, use your eyes, too. Pay attention to spacing around the letter. Too tight, and the letter will look like it&rsquo;s been crammed in. Too loose, and the letter will look like it&rsquo;s floating away from the rest of the text.</p>

<p>Use a margin-top to place the illustrated letter where you want it. Traditionally, the top of a drop cap lines up horizontally with the text block. Use a padding-right to create space between the illustrated letter and the text. Use a good line-height on the p tag, so as text wraps around the illustrated letter, you don&rsquo;t end up with a big gap between the image and the text.</p>

<p>Thanks to illustrator Bruce Maddocks for permission to use his illustrated letter F.</p>
</div>
<body>
</html>
3

valóban...

TeeCee · 2012. Ápr. 11. (Sze), 20.13
... csak felhúztam magam, azt hittem, az egy 'normális' oldal :o)

Itt a példa: http://www.teecee.hu/desktop/ini/iniciale.html

A javaslatom szerint IMG-t kell képként, TITLE és ALT-ba a betűt, így értelmezhető marad, még ha nem is szemantikus. Illetve, ha a képek le vannak tiltva/nem elérhetőek, akkor is látszik.

Illetve arra hívtam volna fel a figyelmet, hogy ne 'px'-ben, hanem 'em'-ben adják meg a padding-ot, margin-t, így szépen nagyítható a nézet, illetve a betűméret változtatásakor is marad a táv...