The horror of HTML5

[Tim W]

This probably isn't news to you lot but I am a beginner in this html
lark and I am teaching myself a bit of what I thought would be the
latest and slickest HTML5 but the more I learn the more I recoil in
horror at the mess that it is. Look at this site. I have no idea who
this guy is but clearly not an idiot - he has written a book about HTML5
and I thought I might read what he has to say:
http://diveintohtml5.info/index.html

But what do we find on the index page? Nice embedded font, but the
attempt (Ithink)at a drop cap reads "[blob]ive into HTML5...." in FF so
we open it in Opera and it's just a slightly different blob and now I
look at it the other browser is displaying half the text (not all)in a
different size. Sheesh, what a mess up and this is from an expert. What
hope for someone like me?

Tim w

Here is a screenshot of what I saw:
http://i995.photobucket.com/albums/af79/Timbowps/html5screen.jpg

 

[mayeul.marguet]

This probably isn't news to you lot but I am a beginner in this html
lark and I am teaching myself a bit of what I thought would be the
latest and slickest HTML5 but the more I learn the more I recoil in
horror at the mess that it is. Look at this site. I have no idea who
this guy is but clearly not an idiot - he has written a book about HTML5
and I thought I might read what he has to say:
http://diveintohtml5.info/index.html

But what do we find on the index page? Nice embedded font, but the
attempt (Ithink)at a drop cap reads "[blob]ive into HTML5...." in FF so
we open it in Opera and it's just a slightly different blob and now I
look at it the other browser is displaying half the text (not all)in a
different size. Sheesh, what a mess up and this is from an expert. What
hope for someone like me?

Long story short, you will like HTML5 way better if you stay with what
it does offer, rather than try to make things you want but it does not
offer.

Yeah, it is indeed frustratring on many accounts and there are many
reasons for it. If you want to make a website you will need to make do
with how you make a website. Otherwise, one can always develop native apps.

Also, presentational features are best kept with CSS realms and out of
HTML. That was the case here. No HTML5 at all for these drop caps.

 

[Jonathan N. Little]

"These are the properties that apply to :first-letter pseudo-elements:
font properties, 'text-decoration', 'text-transform', 'letter-spacing',
'word-spacing' (when appropriate), 'line-height', 'float',
'vertical-align' (only if 'float' is 'none'), margin properties, padding
properties, border properties, color property, background properties.
UAs may apply other properties as well."
http://www.w3.org/TR/CSS2/selector.html#first-letter

So you shouldn't expect to be able to set the dimensions using width and
height. Consequently, most browsers these days will use some small box
for the element. What we see users is just the tiny part of the
background image that was supposed to be shown as large.

Adding "border: 1px solid #f00;" to .f:first-letter will confirm it. A
hack that will approximate what the author was hoping for is to for that
rule (.f:first-letter) remove:

"width: 6em;" and "height: em;" and add "padding: 100px;" and
"background-repeat" no-repeat;". The results will no longer scalable
with the base font.

 

[P E Schoen]

"Tim W" wrote in message

Here is a screenshot of what I saw:
http://i995.photobucket.com/albums/af79/Timbowps/html5screen.jpg

My screenshot using IE9:

http://www.enginuitysystems.com/pix/HTML5.jpg

Paul

 

[Jukka K. Korpela]

My screenshot using IE9:

http://www.enginuitysystems.com/pix/HTML5.jpg

The page http://diveintohtml5.info/index.html has been modified now (I
informed its maintainer about the problem). It now has the letter "D"
marked up and styled as a separate real element, instead of using the
:first-letter pseudo-element. This is a little clumsier, but it avoids
the limitations on styling the pseudo-element.

 

[Tim W]

Look at this site. I have no idea who
this guy is but clearly not an idiot - he has written a book about HTML5
and I thought I might read what he has to say:
http://diveintohtml5.info/index.html

But what do we find on the index page? Nice embedded font, but the
attempt (Ithink)at a drop cap reads "[blob]ive into HTML5...." in FF so
we open it in Opera and it's just a slightly different blob

Embedded fonts are CSS3, not HTML5.

Yes you made that distinction before I think, and technically correct,
no question but to my ear 'html' is common parlance whereas 'CSS' is a
technical term so to say for instance 'html is the language that
websites are written in' is totally acceptable. iow 'html' can mean al
ot of other stuff as well as html.

And the style sheet settings for creating a drop cap aren't even CSS3
but CSS 2.1. Whoever wrote the page made a mistake in trying to turn
the first letter to a drop cap, using :first-letter, failing to note
this restriction:

"These are the properties that apply to :first-letter pseudo-elements:
font properties, 'text-decoration', 'text-transform',
'letter-spacing', 'word-spacing' (when appropriate), 'line-height',
'float', 'vertical-align' (only if 'float' is 'none'), margin
properties, padding properties, border properties, color property,
background properties. UAs may apply other properties as well."
http://www.w3.org/TR/CSS2/selector.html#first-letter

So you shouldn't expect to be able to set the dimensions using width
and height. Consequently, most browsers these days will use some small
box for the element. What we see users is just the tiny part of the
background image that was supposed to be shown as large.

This does not tell anything about the author's competence in HTML5
matters, or about HTML5.

Right

 

[Tim W]

The page http://diveintohtml5.info/index.html has been modified now (I
informed its maintainer about the problem). It now has the letter "D"
marked up and styled as a separate real element, instead of using the
:first-letter pseudo-element. This is a little clumsier, but it avoids
the limitations on styling the pseudo-element.

I am still getting different font sizes in the paras with different
browsers. Is that a result of stying with words , font-size:large; in
the CSS?

Tim W

 

[Gene Wirchenko]

On 11/06/2012 12:09, Jukka K. Korpela wrote:
[snip]

Embedded fonts are CSS3, not HTML5.

Yes you made that distinction before I think, and technically correct,
no question but to my ear 'html' is common parlance whereas 'CSS' is a
technical term so to say for instance 'html is the language that
websites are written in' is totally acceptable. iow 'html' can mean al
ot of other stuff as well as html.

This is a technical newsgroup for HTML. It should not be
surprising that we tend to use the technical definition of "HTML"
here.

[snip]

Sincerely,

Gene Wirchenko

 

[dorayme]

I am still getting different font sizes in the paras with different
browsers. Is that a result of stying with words , font-size:large; in
the CSS?

Have a look at your browser settings (options or preferences) and see
if they differ. There are differences between browsers independent of
this but start with this.

 

[Neil Gould]

Yes you made that distinction before I think, and technically correct,
no question but to my ear 'html' is common parlance whereas 'CSS' is a
technical term so to say for instance 'html is the language that
websites are written in' is totally acceptable. iow 'html' can mean al
ot of other stuff as well as html.

Right. Around here, it could mean "How's The Meat Loaf"? ;-^

 

[Gene Wirchenko]

Right. Around here, it could mean "How's The Meat Loaf"? ;-^

When I was in discussions against HTML in E-mail, my expansion
was "Has Too Many Lines".

Sincerely,

Gene Wirchenko

 

[Jukka K. Korpela]

2012-06-12 23:52, Tim W wrote under
Re: The horror of HTML5:

I am still getting different font sizes in the paras with different
browsers. Is that a result of stying with words , font-size:large; in
the CSS?

Yes, you should very much expect different browsers to use different
font sizes when font-size: large is used:

"An <absolute-size> keyword is an index to a table of font sizes
computed and kept by the UA. Possible values are:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]"

http://www.w3.org/TR/CSS21/fonts.html#font-size-props

So their being "absolute" is very relative. (UA = user agent = browser)

In an ideal world, such "absolute" values would work well, since we
could expect browsers, controlled by users, to know better than authors
what is the suitable size for large text.

In this sublunar world into which we have been thrown, they are a mess.
Look what the CSS 2.1 spec adds in a note: "In CSS1, the suggested
scaling factor between adjacent indexes was 1.5, which user experience
proved to be too large. In CSS2, the suggested scaling factor for a
computer screen between adjacent indexes was 1.2, which still created
issues for the small sizes. Implementation experience has demonstrated
that a fixed ratio between adjacent absolute-size keywords is
problematic, and this specification does not recommend such a fixed ratio."

As if this were not messy enough, the CSS3 Fonts working draft suggests
a "guideline" for scaling factors:

3/5 3/4 8/9 1 6/5 3/2 2/1

http://www.w3.org/TR/css3-fonts/#font-size-prop

Here 6/5 is what they "suggest" for large, and it happens to coincide
with the previously "suggested" fixed ratio of 1.2. But there's no
guarantee that browsers actually behave that way, and you have no legal
case against a browser that decides that large is 42 times as large as
normal, or 1.001 or 1 times as large. I'm afraid the "standards" have
been written so that you might not even have a legal case against a
browser that uses a factor of 0.001.

So why go into this obscurity instead of simply setting a factor that is
reasonable in your context, like font-size: 115% or, if you happen to
agree with the "suggestion", 120%?

 

[Tim W]

Right. Around here, it could mean "How's The Meat Loaf"? ;-^

What was it that Humpty Dumpty said about words?

Tim W

 

[Gus Richter]

Look at this site. I have no idea who this guy is but clearly not an
idiot - he has written a book about HTML5 and I thought I might read
what he has to say: http://diveintohtml5.info/index.html

"Dive Into HTML5" by Mark Pilgrim
<http://www.diveintohtml5.org/peeks-pokes-and-pointers.html> was a very
popular web site/page/document. It then all of a sudden went off the
air. Mark Pilgrim no longer maintains the site, but due to its
popularity it was retrieved from archives, maintained, updated and
rebroadcasted by html5doctor.com/ as:

<http://diveinto.html5doctor.com/>

You will note the difference in the opening page from that of the link
provided in this thread. If you read the first page completely you will
note the various other archives also available.

The document is also updated to reflect changes since the original
document was authored.