afspatiëren letters in div

Status
Niet open voor verdere reacties.
P

Pellekaart

Gebruiker
Lid geworden
25 jun 2012
Berichten
48
Ik zou graag letters onafhankelijk van elkaar willen aan of afspatiëren.

In dit geval het woord ''Vorm'', dat in een div (class) staat.
Er zit te veel ruimte tussen de V en en o.
Als ik het in de CSS-style .vorm wil aanpassen, dan wordt de letterspatiering in het hele woord aangepast wat niet de bedoeling is.

<aside id="VORM">
<div class="vorm">Vorm</div>
<div class="VORspeech">Gelijkstellen is een geavanceerde manier van aanspatiëren</div>
</aside>

Iemand een idee hoe ik dit simpel kan oplossen?

Zie de link met het woord V orm;
http://robertheemskerk.nl/Hover3.html

groeten Robert
 
Maak er een plaatje van. Dan kan je elke letter plaatsen waar je wilt.
 
Ik was begonnen dit met plaatjes te maken maar die hebben het nadeel dat ze bij vergroting niet meer scherp zijn.
De woorden wil ik nu maken uit zegmaar '(puur) CSS-letters'.
 
Ik heb het denk ik opgelost.

Twee div class'en gemaakt;
- V
- orm
en deze in het menu 'positioneren' optisch gelijkgesteld (je kunt ze nu onafhankelijk van elkaar een eigen x-positie geven)

Misschien is er een veel eenvoudigere manier op dit te doen, nu maar even zo.

Pellekaart
 
Je zou kunnen kijken naar de pseudo class first-letter.

HTML: 
<!doctype html>
<html>
<head>
	<style type="text/css">
	#test:first-letter{
		color:blue;
	}
	</style>
</head>
<body>
<div id="test">Vorm</div>
</body>
</html>

Wellicht is dat niet helemaal wat je wilt, dan kan ik je aanraden hier een kijkje te nemen: Lettering.js
 
Pellekaart zei:
Ik heb het denk ik opgelost.

Twee div class'en gemaakt;
- V
- orm
en deze in het menu 'positioneren' optisch gelijkgesteld (je kunt ze nu onafhankelijk van elkaar een eigen x-positie geven)

Misschien is er een veel eenvoudigere manier op dit te doen, nu maar even zo.

Pellekaart
Klik om te vergroten...

De methode die je zelf ontdekte is inderdaad correct, alleen nog een tip: gebruik de span tag deze bestaat immers voor dit soort situaties. Voorbeeldje:
HTML: 
<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
	</head>
	<body>
		<div id="divContainer">
			<div>V</div>
			<div>orm<div>
		</div>
		<div id="spanContainer">
			<span>V</span>
			<span>orm</span>
		</div>
	</body>
</html>

* De div tag wordt gebruik om elementen in een "block" te groeperen (dus met een na elke div zal er standaard een endline gezet worden).
* De span tag wordt gebruikt om inline elementen te groeperen (er zal dus geen newline geplaatst worden).
 
Hoi-hoi,
Ik had al een tijdje geleden een testpagina met wat varianten voor letter-spacing gemaakt, maar nog niet ingestuurd.



Attentie-attentie!
Ik was vrolijk begonnen wat opties voor Firefox uit te werken, en daar slaat de tekst van de pagina op.
Na afloop maakte ik wat screenshots in verschillende browsers (zie vervolgpagina), en wat blijkt: Firefox heeft uit zichzelf een andere afspatiëring tussen de "V" en de "o" als alle andere geteste browsers (Chrome, Opera, Safari, IE7, IE8, IE9).
  • Oftewel: als je het voor Firefox in orde maakt, staat het anders in de rest, en vice versa. :shocked:
En er zijn nog een aantal verschillen tussen de browsers onderling, bv. wel/geen opacity, en verschillende hoogtes en breedtes van het achtergrondblok dat om de letters heen wordt gezet.

M'n conclusies:
  • Je kunt er niet van op aan, dat je het met eigen afspatiëring beter maakt, cq. cross-browser hetzelfde kunt krijgen.
  • Dit zal bij alle proportionele lettertypes spelen.
  • Het kan ook per aangrenzende letters verschillen: "Ao" anders dan "Vo" of "oo"; met dus kans op browserverschillen bij hetzelfde letterpaar.
  • Het kan per lettertype verschillen, resp. bij types met schreef en schreefloze types anders kunnen zijn (niet getest).
  • In de test is een groot letterformaat gebruikt, dan heeft een afrondingsverschil van 1px niet zoveel invloed. Zit je op kleine letterformaten, dan kan 1px méér of minder een heel verschil maken (en wellicht het tegenovergestelde bewerkstelligen van wat de bedoeling was)!
  • Wil wil, kan met dit alles waarschijnlijk een hele mooie database tot de nok toe vullen. :p

In feite is pixel-precisie voor letterteksten in browsers onhaalbaar.
De resolutie van een beeldscherm is stukken kleiner dan het oplossend vermogen als je met een ouderwets foto-negatief of een dia-positief werkt, of met een drukpers (een printer zal er tussen in zitten).
Een browser is geen letterbak waar vaste maten in zitten waar geen ontkomen aan is, maar een rekenmachine.
Browsers zijn wel knappe rekenmachines, maar waar gerekend wordt moet afgerond worden: naar hele pixels, want kleiner kan een beeldscherm niet gaan.
De manier waarop browsers hetzelfde lettertype (uit de font-map van de pc/Mac) bij dezelfde lettergrootte weergeven ... is verschillend (o.a. in het "bovenwit" boven een letter en het "onder-wit" er onder. Met de css-eigenschap line-height kan je daar iets aan doen, maar er blijven altijd verschillen.
Voor het renderen van letters worden door browsers ook verschillende methoden gebruikt (bv. Internet Explorer heeft een ingebouwd anti-alias systeem bedacht met gebruikmaking van de kleurpuntjes binnen een pixel, die net iets naast elkaar liggen; de rest niet).
En dan ook nog eens: site-bezoekers gebruiken verschillende schermresoluties, en kunnen zelf de lettergrootte aan hun behoefte aanpassen.


  • Dus ook hier geldt: voor een consciëntieus grafisch ontwerper moet het vormgeven van zo'n onnauwkeurig ding als een webpagina een gruwel zijn die dwars door zijn/haar hart kerft. ;) *)

Met vriendelijke groet,
CSShunter
_________
*) Zie ook: "The Graphical Designer and the CSS Zen Guru"
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan