As you may have noticed, we’ve not written one of these posts in a while. That’s not down to us not receiving them, though.
Government cutbacks have hit health services hard, so decisions had to be made. Well, that and the fact that we’ve all just been manically busy with our day jobs.
Enough waffle, though. We’ll try to get these posts going regularly again. This time, we cover marking up poems, how to add an element to HTML5, using
target="_blank", adding text to
<canvas>, and which element to use for price or money.
Poem Markup #
Hi there Doc,
On this site should I mark up the poems as sections or articles?
Thank you so much for your mighty wisdom and super helping hand.
Cheers, Greg from Hungary
I can’t read Hungarian so can’t tell in detail, but I’d use one
<article> per poem. If it’s a long poem — e.g. The Waste Land — divide it into sections:
<article> <h1>The Waste Land</h1> ... <section> <h2>The Burial of the Dead</h2> <p>April is the cruellest month<br> Breeding lilacs out of the dead land<br> Mixing memory with desire.</p> <p>Winter kept us warm ... </p> </section> <section> <h2>The Game of Chess</h2> ... </section> ... </article>
Adding a New Element to HTML5 #
I want to propose adding a new HTML5 element. Do you know who I should write email to?
Join the WHATWG mailing list, and carefully search the archive to see if your idea has already been discussed. If it hasn’t, email the list. Be sure to state a problem and give use cases.
Read more at the WHATWG Wiki.
Just wondering if you’d like to tackle the age old question: now that we have HTML5 and it’s not as fussy as XHTML was, what with it’s fancy X and all, is
target="_blank"okay to use again instead of
What was the big deal in the first place?
The answer to the first bit is “yes”.
What was the big deal in the first place?,
Placing Text on
How can I place HTML text on a canvas? Actually, I have an editable text area where I can add/edit/modify the text like a text editor. Now I want to place this customized text on the canvas. This is the HTML text example:
<p style="text-align: center;"><span style="color: rgb(255, 0, 0);">EVERYDAY SPENT WITH YOU IS A GIFT.</span></p> <p style="text-align: center;"><span style="color: rgb(255, 0, 0);">ALL MY LOVE</span></p> <p style="text-align: center;"><span style="color: rgb(255, 0, 0);">Della</span></p>
Thanks in advance.
If you like, you can read the full specification for the 2D drawing API.
But placing text is relatively simple, so long as what you’re doing is straightforward. It gets trickier when you have multiple bits of text, as you need to measure the height of the text and ensure the subsequent lines are clearing the previous lines. For example:
// code goes here! ctx.fillStyle = 'rgb(255, 0, 0)'; // red // comic sans == the new black ctx.font = 'italic 400 18px/2 comic sans ms, sans-serif'; ctx.fillText('Comic sans will always bring funs to dull content', 25, 50); // not
Here’s a working example.
Good luck. — Remy
Marking Up a Price #
I asked this question on Stack Overflow and so far the tag
varwas proposed. What do you think?
Thanks in advance.
I disagree with using
<var> for prices based on the examples you provided. I’ve posted an answer on Stack Overflow and repeated it below.
The HTML spec for
The var element represents a variable. This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a function parameter, or just be a term used as a placeholder in prose.
To me, this means that
<var> is not suitable for the prices in your examples. It depends on what you’re trying to accomplish, but it seems your options are:
- Use microdata — for example, Schema.org’s
offervocabulary for a product’s price.
- Use the
<b>element if you’d like to draw attention to the price without indicating that it’s more important.
<strong>if the price is important, such as the total price of an itemised receipt.
<span>with a class if you need an element to style the price differently but
<strong>are not appropriate.
- If nothing above is suitable and you don’t want to style the price, don’t do anything.
From the examples you’ve given, there doesn’t seem to be any need to mark up prices. If the examples are from a table displaying financial information, make sure they’re in a column headed by
<th scope="col">Income</th> or
<th scope="col">Price</th>, respectively, for accessibility.
Hope that helps! — Oli
Got a question for us? #
That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.