No related posts.

Testene er inspirert av en artikkel i smashingmagazine.com :

http://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/

There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.

Wordbreak

etlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrom

enlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomromenlaaaaanglenkeutenmellomrom

CSS for testen:

.typo {word-wrap: break-word;text-wrap:normal;}

Text overflow

Original tekst:

etlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometetlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometetlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometetlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometetlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometetlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrometlaaaaangtordutenmellomrom

CSS for testen:

.typobox {
white-space: nowrap;
width: 100%;
height:40px;
overflow: hidden
;-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

Relaterte eksterne lenker:

• CSS3 Text (Editor’s Draft), W3C
• Hyphenation, W3C
• CSS3 Fonts, W3C
• The Elements of Typographic Style Applied to the Web
• Five Simple Steps to Better Typography
• Type Experiments with HTML
• Styling a Poem With Advanced CSS Selectors
• CSS3: Examples and Best Practices

Related posts:

• Fontlek med html5 og css3
• Handling multiple columns in list-elements with CSS

Notes on the interaction of ClearType with DXTransforms in IE7

(…)Today I want to give you a little heads up on an issue we have seen with DXTransforms and ClearType,  and let you know what we have done to ensure good readability of text in IE.  

During our testing we noticed that DXTransforms are sometimes applied to elements that contain text (now rendered in ClearType).  As our users also noticed, the ClearType text then looks extremely blurry – unfortunately these two technologies just don’t mix well.  This is because the basic convolution transform used by DXTransforms does not take into account the spatial nature of ClearType. 

To ensure good readability of Text in IE, in the Release Candidate build we decided to disable ClearType on elements that use any DXTransform.  We will render the text in those elements as aliased text, in order to increase readability.  The rest of the text in the page will render with ClearType.  This may explain why some sites (or portions of sites) will render as aliased text, rather than ClearType.

DEMO for IE6 og IE7 (og IE8)

Jeg har satt opp fire tester som viser tekst som er lagt over et bilde. Teksten ligger på en hvit, transparent bakgrunn ( filter:alpha(opacity=70) ).

Bildetekst for bilde i demoen for ie og cleartype. Denne bildeteksten viser hvordan cleartype er slått av for ie6 – 7 fordi alpha filter er tatt i bruk (i css) for å sette en gjennomsiktig bakgrunn. Denne teksten har ingen fix for mangel av cleartype.

Bildetekst for bilde i demoen for ie6-7 cleartype. Denne bildeteksten viser hvordan cleartype er slått av for ie6 – 7 fordi alpha filter tatt i bruk (i css) for å sette en gjennomsiktig bakgrunn. Denne teksten har en javascript fix for mangel av cleartype:

$('#myDiv').myClass({
    cleartype:  1 // enable cleartype corrections
});

Bildetekst for bilde i demoen for ie6-7 cleartype. Denne bildeteksten viser hvordan cleartype er slått av for ie6 – 7 fordi alpha filter tatt i bruk (i css) for å sette en gjennomsiktig bakgrunn. Denne teksten har en css fix for mangel av cleartype. Position:relative på p-elementet hjelper for IE8.

Bildetekst for bilde i demoen for ie6-7 cleartype. Denne bildeteksten viser hvordan cleartype er slått av for ie6 – 7 fordi alpha filter tatt i bruk (i css) for å sette en gjennomsiktig bakgrunn. Denne teksten har egen div for den transparente bakgrunnen. Teksten ligger en annen div, og er plassert "over" bakgrunnen. Løsningen er jeg ikke spesielt stolt av, men den er en mulighet. Teksten kommer uansett godt ut av det fordi den ikke lider under at cleartype er slått av. Mer informasjon kommer.

Relaterte eksterne lenker som omhandler IE og cleartype

http://www.malsup.com/jquery/cycle/cleartype.html?v3

http://mattberseth.com/blog/2007/12/ie7_cleartype_dximagetransform.html

http://davidchambersdesign.com/captions-over-images/

No related posts.

Dersom du selv ønsker å teste hvordan fonter oppfører seg i en nettleser (som støtter @font-face import), kan dette gjøres på http://labs.thecssninja.com/font_dragr/. 

Programmet lar deg dra og slippe TrueType (TTF), OpenType (OTF), Scalable Vector Graphics (SVG) eller Web Open Font Format (WOFF) skrifter i siden for en umiddelbar forhåndsvisning av hvordan skriften vil bli gjengitt i nettleseren.

Mine tester:

Dette er GeosansLight

Kilde: www.dafont.com

Dette er Chopin Script

Kilde: www.dafont.com

Dette er Chopin Script med tekstskygge

Kilde: www.dafont.com

Dette er Orial OpenType uten tekstskygge

Orial OpenType bold

Kilde: www.dafont.com

Dette er Orial OpenType med tekstskygge

Orial OpenType bold

Kilde: www.dafont.com

Dette er Orial OpenType med rgba opacity 0,5 og tekstskygge

Orial OpenType bold

Kilde: www.dafont.com

Eksempler på CSS kode for importen:

.OrialOpenType {
font-size:60px;
left:70px;
position:relative;
top:35px;
text-shadow: 2px 2px 2px #fff;
}
.TextShadow {
text-shadow: 4px 4px 4px #666;
}
.textOpacity {
color: rgba(0, 0, 0, 0.5);
text-shadow: 5px 5px 5px #bbb;
}

Styling av fonten i css

Jeg testet litt fram og tilbake med endring av presentasjon av fonten, ved f.eks å sette font-weight til bold, og å endre på letter-spacing. Teknisk sett lar dette seg gjøre, men jeg synes ikke resultatet ble spesielt bra. Jeg tror det vil variere fra font til font. 

Nettleserstøtte

Dette eksperimentet fungerte i Google Chrome 3.0, Firefox 3.5, Opera 10.0 og Safari 4 for windows

Min opplevelse med bruk av denne måten å importere fonter direkte inn i nettleseren, er så langt blandede. Nettleserne gjengir fontene med ulik kvalitet, og IE evner ikke å gjengi fontene overhodet.

Her er en artikkel fra position-absolute.com som tar for seg noen av de samme problemstillingene som jeg opplever: 

Related posts:

• Import av egne fonter i html 5

Kilde: blogs.msdn.com

Related posts:

• Windows Internet Explorer Testing Center
• Learning Silverlight2 -loving Expression Blend!

Dette er GeosansLight

Kilde: www.dafont.com

Dette er Chopin Script

Kilde: www.dafont.com

Orial OpenType bold

Kilde: www.dafont.com

Eksempler på CSS kode for importen:

@font-face {
font-family: GeosansLight;
src: url(fonts/GeosansLight.ttf);
}
@font-face {
font-family: chopinScript;
src: url(fonts/CHOPS.ttf);
}
h4.geosanslight {
font-family:GeosansLight;
font-size: 26px;
}
h4.chopin_script {
font-family:chopinScript;
font-size:36px;
}

Styling av fonten i css

Jeg testet litt fram og tilbake med endring av presentasjon av fonten, ved f.eks å sette font-weight til bold, og å endre på letter-spacing. Teknisk sett lar dette seg gjøre, men jeg synes ikke resultatet ble spesielt bra. Jeg tror det vil variere fra font til font. 

Nettleserstøtte

Dette eksperimentet fungerte i Google Chrome 3.0, Firefox 3.5, Opera 10.0 og Safari 4 for windows

Min opplevelse med bruk av denne måten å importere fonter direkte inn i nettleseren, er så langt blandede. Nettleserne gjengir fontene med ulik kvalitet, og IE evner ikke å gjengi fontene overhodet.

Her er en artikkel fra position-absolute.com som tar for seg noen av de samme problemstillingene som jeg opplever: 

Related posts:

• Fontlek med html5 og css3

http://www.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/

No related posts.

Which Video Format Will Win?

Obviously one of our favorite blogs, TechCrunch, has posted a very interested article on the current battle of Standard Video formating for the web. The players are the current Flash vs. H.264 vs. the new open sourced HTML 5: Ogg Theora. Here is what they had to say: With YouTube and other video sites serving up over a billion streams a day, it’s beyond contention that web-based video is not only mainstream, but has become fundamental to the web experience. Why, then, is a huge majority of web video in a wrapped in a proprietary Flash candy coating — essentially making Adobe the gatekeeper of video content? It’s worked okay so far, but it’s hardly a fertile ground for innovation, not to mention the fact that Flash is a real dog on OS X and any kind mobile browser (if it’s even supported).

No related posts.

Fra: http://www.internetblog.org.uk/post/372/microsoft-joins-the-html-5-discussion.

Last month we discussed the current state of HTML 5, particularly regarding its video component. Not only were the major browser makers, Mozilla, Google, Apple, and Opera, all duking it out over what should be considered standard, but the largest browser maker, Microsoft, had barely contributed to the debate at all.

Now Microsoft has begun to open up to the HTML 5 development mailing list, indicating that they are interested in joining the discussion. Their latest browser, Internet Explorer 8, includes some HTML 5 features, although it is far behind Mozilla Firefox, Apple Safari, Google Chrome, and Opera. Microsoft clearly wants to be involved now, a move that more than likely is the result of website owners embracing HTML 5 even in its development state and Google’s willingness to adopt it, with its huge Web presence.

HTML or hypertext markup language, is the technical language of the World Wide Web. It is standardized by the World Wide Web Consortium or W3C. Much of the HTML 5 development, however, has come from an outside organization called Web Hypertext Application Technology Working Group (WHATWG), which the major browser makers established as a reaction to their disappointment with XHTML 2.0. There has been a highly publicized debate about embedded video standards, whether to use Ogg Theora or H.264. Until now, Microsoft has been largely silent.

Related posts:

• Html 5 og audio video

Hva er nytt i forhold til html4/xhtml 1.x ?

Nye parsing regler rettet mot fleksibel parsing og kompatibilitet

Nye elementer – section, article, footer, audio, video, progress, nav, meter, time, aside, canvas, datagrid

Nye typer av form controls – dates and times, email, url, search

Nye attributter – ping (on a and area), charset (on meta), async (on script), data-x (where x is a user supplied custom attribute name.)

Globale attributter (som kan bli lagt til på alle elementer) – id, tabindex, hidden

Utgåtte elementer – center, font, strike

Ny markup

HTML 5 tilbyr en rekke nye elementer og attributter som gjenspeiler vanlig bruk på moderne nettsider. Noen av dem er semantiske erstatninger for felles bruk av generiske blokkere (<div>) og inline (<span>) elementer, for eksempel <nav> (nettsted navigasjon blokkere) og <footer>. Andre elementer som gir ny funksjonalitet gjennom et standardisert grensesnitt som <audio> og <video> elementer. 

Noen deprecated elementer fra HTML 4.01 har blitt droppet, inkludert elementer som <font> og <center>, der effektene er oppnådd ved hjelp av CSS. Det er også en fornyet vekt på betydningen av DOM scripting i Web oppførsel. 

HTML5 syntaksen er ikke lenger basert på SGML selv om markupen er veldig lik. Den har imidlertid blitt utviklet for å være bakover-kompatibel med eldre versjoner av HTML. Det følger med en ny innledende linje som ser ut som SGML dokumenttype erklæringen <! DOCTYPE html>, noe som utløser standarder-kompatibel gjengivelsesteknologi i alle nettlesere som bruker "DOCTYPE sniffing". Man kan bruke XHTML 1.x Syntaks på HTML5 dokumentet, eller vanlig HTML-syntaks. Enten det er uppercase attributter og element (tag) navn, kode elementer som ikke er lukket, og ingen anførselstegn for innpakning attributter verdier.

Nye APIer

I tillegg til å angi markup, spesifiserer HTML 5 scripting APIer (Application Programming Interfaces). Eksisterende Document Object Model (DOM) blir utvidet og de facto funksjoner dokumentert. Det er også nye APIer, for eksempel: 

Canvas elementet for umiddelbar modus 2D tegning 

Tidsbestemt media-avspilling 

Offline lagring database 

Dokumentredigeringsprogrammet 

Dra-og-slipp 

Meldinger på tvers av dokumenter

Nettleserhistorie management

MIME-type og protokollbehandler registrering 

Nye funksjoner 

• Canvas elementet gir en enkel og effektiv måte å trekke tilfeldig grafikk på en webside ved hjelp av JavaScript. 
• Video element som mål å gjøre det så enkelt å legge inn video på en nettside som det er å legge inn bilder i dag. Ingen plugins, ingen feilaktige kodeker. 
• Geolocation APIene angir lokasjon, enten via GPS, celle-tårnet triangulation eller wi-fi databaser tilgjengelig for noen HTML 5-kompatibel nettleser-basert program. 
• AppCache og Database gjør det enkelt å bygge offline apps. 
• Web arbeidstakere er en mekanisme for å kjøre aktiviteter i bakgrunnen for å gjøre behandling som ellers gjør nettleseren tregere.

Html 5 DOCTYPE

<!DOCTYPE html>

En betydelig enklere enn de fleste DOCTYPEs vi har sett tidligere – og det var tilsiktet. Poenget med denne forenklingen (blant mange andre) i HTML5, er et forsøk på å gjøre det enda enklere å utvikle en standard-basert nettside, og at det skal virkelig lønne seg.

Denne DOCTYPEn innebærer at man slipper unna frustrasjon over den nye metakoden til IE8. Dette betyr at du kan skrive dine websider basert på riktige standarder (CSS, HTML5, JavaScript) uten å måtte bruke nettleser-sentriske koder for å gjøre det. 

Det som også er bra med denne nye DOCTYPEn,  er at alle aktuelle nettlesere (IE, FF, Opera, Safari) vil se på den og lese innholdet i standard modus – selv om de ikke implementere HTML5. Dette betyr at vi kan begynne å skrive websider ved hjelp HTML5 i dag og gjøre dem gjeldende lenge.

Eksempler på html 5 markup

Section

<section> Section innhold plasseres her.
</section>

Article

<article> Article innhold plasseres her.
</article>

Footer

<footer>
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
</footer>

Gjenbruk av elementer på en side : f.eks bruk av footer elementet

Et viktig punkt å merke seg er at du ikke er begrenset til å bruke ett <footer> element per side, kan du bruke flere bunntekster, som hver vil bli <footer> for denne delen av dokumentet. Eksempelvis:

Section

<section> Section content appears here.
<footer> Footer information for section. </footer>
</section>

Article

<article> Article content appears here.
<footer> Footer information for article. </footer>
</article>

Mer informasjon om footer elementet: http://www.w3.org/TR/html5/semantics.html#the-footer-element

Aside -elementet 

HTML 5 tilbyr et nytt element for å merke ytterligere informasjon som kan forbedre en artikkel, men som ikke nødvendigvis er nøkkelen til å forstå det. Men i tolkningen av <aside> det ligger forvirring med hensyn til hvordan den kan brukes.

Først en titt på hvordan HTML 5-spesifikasjonen definerer <aside>: 

Aside elementet representerer en del av en side som består av innhold som er relatert til innholdet rundt , og som samtidig kan anses som atskilt fra selve innholdet. Slike deler blir ofte fremstilt som sidefelt i trykkverk. 

Hvor strengt bør dette forholdet være? Veldig. Godt <aside> innhold omfatter pull-sitater, en ordliste eller relaterte koblinger.

Oktober 2009. 

Oktober er siste deadline for arbeidsutkastet for HTML 5. 

Det betyr at problemene med spec, forbedringer av bugs, alt må være på plass og sendt og skrevet til spec i oktober i år.

Bakoverkompatibilitet

HTML 5 er definert på en måte som gjør den bakoverkompatibel med måten brukeragenter håndterer publisert innhold.

Brukeragenter kreves imidlertid alltid å støtte eldre elementer og dette er grunnen til spesifikasjonen klart skiller kravene til forfattere og brukeragenter. Dette betyr at forfatterne ikke kan bruke isindex eller klartekstgodkjenning element, men brukeragenter er nødvendig for å støtte dem på en måte som er forenlig med hvordan disse elementene har opptrådt tidligere. 

Siden HTML 5 har separat conformance kravene til forfattere og brukeragenter, er det ikke lenger behov for å merke ting med "deprecated".

Bane "krøtterstier" 

Når en praksis allerede er utbredt blant forfatterne, kan du vurdere å vedta det i stedet for å frastøte det eller finne opp noe nytt. 

Forfattere bruker allerede <br/> syntaks i motsetning til <br> i HTML og det er ingen skade gjort ved at det brukes. 

Evolusjon, ikke revolusjon 

Revolusjoner søker ofte å forandre verden til det bedre. Oftest er det imidlertid bedre å videreutvikle et eksisterende design i stedet for å kaste dem bort. På denne måten trenger ikke forfattere å lære nye modeller, og innhold vil leve lenger. Nærmere bestemt betyr dette at en helst bør designe funksjoner slik at gammelt innhold kan dra nytte av nye funksjoner uten å gjøre urelaterte endringer. Og implementasjoner skal kunne legge til nye funksjoner til eksisterende kode, heller enn å måtte utvikle helt separate modi. 

Bytte til XML-syntaks krever en global endring, så fortsett å støtte klassiske HTML-syntaks også.

The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML 4, such as <em/content/. Documents using this "custom" syntax must be served with the text/html MIME type.

HTML 5 also defines detailed parsing rules (including "error handling") for this syntax which are largely compatible with popular implementations. User agents will follow these rules for resources that have the text/html MIME type. Here is an example document that conforms to the HTML syntax:

<!doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Example document</title>

  </head>

  <body>

    <p>Example paragraph</p>

  </body>

</html>

The other syntax that can be used for HTML 5 is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML MIME type and elements need to be put in the http://www.w3.org/1999/xhtml namespace following the rules set forth by the XML specifications. [XML]

Below is an example document that conforms to the XML syntax of HTML 5. Note that XML documents must have an XML MIME type such as application/xhtml+xml or application/xml.

<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Example document</title>

  </head>

  <body>

    <p>Example paragraph</p>

  </body>

</html>

No related posts.