As the question title states, is it okay to write just
<math>a <msup>x 2</msup> + b x + c</math>
or do you really need to write
<math>
<mrow>
<mi>a</mi> <mo>⁢</mo> <msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo><mi>b</mi><mo>⁢</mo><mi>x</mi>
<mo>+</mo><mi>c</mi>
</mrow>
</math>
As far as Firefox goes it doesn't render a
Invalid Markup
error, but that hardly means other browser might not in the future if the spec actually prohibits it officially.
As the question title states, is it okay to write just
<math>a <msup>x 2</msup> + b x + c</math>
No, it isn't.
do you really need to write
<math>
<mrow>
<mi>a</mi> <mo>⁢</mo> <msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo><mi>b</mi><mo>⁢</mo><mi>x</mi>
<mo>+</mo><mi>c</mi>
</mrow>
</math>
Yes, see http://www.w3.org/TR/MathML3/chapter2.html#fund.syntax.
As far as Firefox goes it doesn't render a "Invalid Markup" error, but that hardly means other browser might not in the future if the spec actually prohibits it officially.
At the begin browsers render a "Invalid Markup" error for anything that doesn't follow the spec. Today browsers try to correct the markup. For example
<p>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
<p>
is invalid since you need to use
<p></p>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
<p></p>
but no browser will stop rendering the page because of it.
MathML is intended for mathematics presentation markup. It is aimed to provide all information needed for correctly typesetting a mathematical formula.
In mathematical typesetting, identifiers (or, simply "variables"), operators and numbers are typeset differently. There are a lot of subtle differences, but to name a few: identifiers are normally italic style (and use a mathematical serif font), whereas numbers are roman style. Operators use subtle spacing rules on either side. These are just a few examples.
As presentation MathML is not intended to describe the meaning of a formula, merely how it looks, all this information must be encoded in the markup. The MathML renderer does not interpret the formula, either. It looks at the markup and renders accordingly.
Authoring MathML directly is not easy, and, in fact, it is mostly done programmatically, rather than inputting directly. If you need a more straightforward way, try ASCIImath or LaTeX. A renderer like MathJax renders those as well.
Related
Important Edit—
It appears that there's nothing wrong with my language code here, something else somewhere I've done in my CSS has stopped my code from working. This means all my guesses as to why it's not working were completely wrong. (lol)
When I find out what went wrong, I'll update this question; but if I can't find the error, I may just redo it from scratch— the project isn't so monolithic that that still is an option.
For now, the question is effectively solved.
Original Question—
I've been writing a mixed-language HTML document —primarily in English— and have been using different formatting for Japanese language text. For example, since Japanese doesn't use italicized/oblique or bold text, emphasis must be done with text-emphasis instead. However, romanized Japanese —Romaji— inherits these text effects when I'd rather it not.
This initial interaction was expected, so I tried to use :not(:lang(ja-latn)) to prevent this. While admittedly a bit messy, it ought to work… but it does not. I think the issue is that ja-latn, Romaji, is a kind of Japanese as far as HTML & CSS is concerned, and doesn't understand what I'm trying to do. Not labeling the Romaji or changing it to English would be textually inaccurate, confuse screen readers, and generally be a be a bit of a hack.
This is how I had done this (in a condensed form) provided as an example of what I mean. If I made some mistake in formatting not described in this post, that's only because I keep getting "Secure Connection Failed" errors whenever I try to test the snippet, and missed it.
i,em{font-style:italic;}
b,strong{font-weight:bold;}
:is(i,em):lang(ja):not(:lang(ja-latn)){
font-style:normal;
font-weight:normal;
text-emphasis: open currentcolor;
text-emphasis-position: over right;}
ruby{ruby-position:under;}
.goodhappy{color:green}
.wrongangry{color:red; text-emphasis-color:red;}
<div lang="en" >
English text, because I <em class="goodhappy" >don't</em> speak Japanese.<br />
<ruby lang="ja"><!--
-->日<rt lang="ja-hira" >に</rt><!--
-->本<rt lang="ja-hira" >ほん</rt><!--
-->語<rt lang="ja-hira" >ご</rt><!--
--><em class="goodhappy" >わ</em><rt lang="ja-hira" >わ</rt><!--
-->話<rt lang="ja-hira" >はな</rt><!--
-->せません<!--
--></ruby>
<br />
<span lang="ja-latn" >Nihongo <em class="wrongangry" >wa</em> hanasemasen</span>
</div>
How would I go about selecting only CJK japanese characters, but not Romaji text? To be clear, I realize this could be easily done by using a span.class and not using em/i/b/strong etc.. What I mean is, is there a way to accomplish this only in CSS, without more HTML markup than is strictly necessary?
In your question you stated that you tried :not(:lang(ja-latn)) with no success, but in your code you have :not(ja-latn) which is invalid. I changed your code using :not(:lang(ja-latn)) and as you can see it works properly leaving the romaji without the emphasis on top of it
i,em{font-style:italic;}
b,strong{font-weight:bold;}
:is(i,em):lang(ja):not(:lang(ja-latn)){
font-style:normal;
font-weight:normal;
text-emphasis: open currentcolor;
text-emphasis-position: over right;}
ruby{ruby-position:under;}
.goodhappy{color:green}
.wrongangry{color:red; text-emphasis-color:red;}
<div lang="en" >
English text, because I <em class="goodhappy" >don't</em> speak Japanese.
<ruby lang="ja"><!--
-->日<rt lang="ja-hira" >に</rt><!--
-->本<rt lang="ja-hira" >ほん</rt><!--
-->語<rt lang="ja-hira" >ご</rt><!--
--><em class="goodhappy" >わ</em><rt lang="ja-hira" >わ</rt><!--
-->話<rt lang="ja-hira" >はな</rt><!--
-->せません<!--
--></ruby>
<br />
<span lang="ja-latn" >Nihongo <em class="wrongangry" >wa</em> hanasemasen</span>
</div>
Is it possible to transform a phrase to plural using just CSS, based on the number within the element?
I'm guessing this breaks a presentation/data separation boundary philosophy, but just wondering if it's possible. It's easy with JavaScript, but wondering if CSS can take care of it.
<span class="plural">0 book</span>
outputs: 0 books
<span class="plural">1 book</span>
outputs: 1 book
<span class="plural">2 book</span>
outputs: 2 books
No. CSS cannot read the content of the element to determine what number it is, and CSS doesn't have if conditions.
If you would only apply .plural to items that should be regularly pluralized, you could do:
.plural:after {content: "s"}
But then we run into the problem of how English is irregular, and not all plurals are guaranteed to end in "s".
Going to try answer this myself, as it seems a pure CSS solution is not possible. I've found a small workaround here that works for me. It's not ideal, but may work for others too..
I just render the number behind the plural class name and wrap this around the s. Then I use a class for plural1 that hides the s.
This works for me because I use templates to render my html and it's easy to slot the numbers in.
.plural1 {
display: none;
}
<div>-1 book<span class="plural-1">s</span>
</div>
<div>0 book<span class="plural0">s</span>
</div>
<div>1 book<span class="plural1">s</span>
</div>
<div>2 book<span class="plural2">s</span>
</div>
Pros: This can work for other endings and other languages too. Negative numbers are supported.
Cons: Adds unused classes to your elements (plural2, plural3, etc.) that the browser will need to read and ignore. Not really an issue for a small number of object though (eg. 100).
I did a page and did a check on it using a software called WebKing and it tells me I have duplicate anchors??
<ul >
<li>About The Code</li>
<li>Link 2 is boring</li>
<li>3rd line in</li>
<li>Contact Manny</li>
<h3><a name="toc1" id="toc1">About the code</a></h3>
<h3><a name="toc2" id="toc2">Link 2 test</a></h3>
<h3><a name="toc3" id="toc3">3rd test</a></h3>
<h3><a name="toc4" id="toc4">Contact Manny</a></h3>
</ul>
So what am I doing wrong?? Do I change the id to something else?
This looks like it is just some bad heuristics in the analysis software you are using. There isn't anything technically wrong with that code.
That said, a modern approach (i.e. not pandering to Netscape 4) would be to say:
<h3 id="toc1">About the code</h3>
… and I suspect this would also avoid triggering the aforementioned bad heuristic.
You should probably have better ids too. id="about" — URLs that inform readers where they go are generally better than URLs that don't so /mypage/#about beats /mypage/#toc1
On the subject of bad style, the title attribute is there to provide advisory information about an element. It should contain helpful extra information. Your example has it duplicating the main text of the links. At best this will just be some extra bytes to download. At worst, you can expect some screen reader users to have to listen to the destination of every link being repeated.
The name and id attribute share the same namespace so they need to be different.
http://www.w3.org/TR/html401/struct/links.html#h-12.2.3
If you are writing valid XHTML try not to use the name tag.
http://www.w3.org/TR/xhtml1/
Section 4.10. The elements with 'id' and 'name' attributes
Note that in XHTML 1.0, the name attribute of these elements is formally deprecated, and will be removed in a subsequent version of XHTML.
Also you have some h3's that aren't inside li's but are inside of a ul.
I found many different views on many articles on presentation tags, with some people thinking all tags are presentational, but some others do not think so.
For example: in the HTML 5 specification, they do not think <small> is presentational.
In this list of tags - which are all HTML 5 supported - which tag is presentational and which is not?
<abbr>
<address>
<area>
<b>
<bdo>
<blockquote>
<br>
<button>
<cite>
<dd>
<del>
<dfn>
<dl>
<dt>
<em>
<hr>
<i>
<ins>
<kbd>
<map>
<menu>
<pre>
<q>
<samp>
<small>
<span>
<strong>
<sub>
<sup>
<var>
Who decides which HTML tag is presentational and Which is not - and how do they make that decision? Is it a particularly large group such as the W3C or is it based on groups of web developers, i.e. the web community? Also, between the two, which advice we should follow for deciding which tags are presentational?
If a tag is valid as according to the W3C in accepted doctypes, then what are the pros to not using any xhtml tag from any point of view?
in user/usability/accessibility point of view
if we use more HTML tags then pages without CSS will better.
in developer point of view
if we make use of more available tags in HTML, than we do not need to use <span class=className">
it takes more time to write and it uses more charter space than tags in HTML and CSS both.
For example:
instead of using:
<span class="boldtext">Some text<span>
.boldtext {font-weight:700}
We can use:
<b>Some text<b>
b {font-weight:700}
it looks cleaner, it is easier to use , it uses less characters - which will reduce the page size - and it is more readable in source. It also does not break the rule of content and presentation separation.
We can also do this:
<b class="important">Some text<b>
b.important {font-weight:700}
and whenever we want to change font-weight then we can change css only in both examples.
If a tag is considered valid by w3c in their recognized doctypes, then what are the pros to not using any X/HTML presentational tags which are not directly recognized by either the W3C, or by the HTML specifications?
Can we change any design parameters without changing anything in HTML? Does this fit within the meme of content and presentation separation?
If any HTML tag breaks the rule of separation, then does not the css property Content break as well?
see this article.
Why are the HEIGHT and WIDTH attributes for the IMG element permitted?. does it not break the rule of separation? A good debate on this matter can be found here.
W3C decides the semantics of tags. The specification documents of HTML5 gives conditions on the use of the various tags.
HTML5
To continue with your example, there is nothing wrong with using <b> to bold some text unless:
The text being bolded is a single entity already represented by a tag:
Incorrect:
<label for="name"><b>Name:</b></label>
Correct: (Use CSS to style the element)
label { font-weight: bold; }
<label for="name">Name:</label>
The text is being bolded to put added emphasis and weight on a section or words of a block of text.
Incorrect:
<p>HTML has been created to <b>semantically</b> represent documents.</p>
Correct: (Use <strong>)
<p>HTML has been created to <strong>semantically</strong> represent documents.</p>
The following is an example of proper use of the <b> tag:
Correct:
<p>You may <b>logout</b> at any time.</p>
I realize that there doesn't seem to be a lot of difference between the above example and the one using <strong> as the proper example. To simply explain it, the word semantically plays an important role in the sentence and its emphasis is being strengthened by bold font, while logout is simply bolded for presentation purposes.
The following would be an improper usage.
Incorrect:
<p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>
Correct: (This is used to add strong emphasis, therefore use <strong>)
<p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>
Using <span class="bold"> is markup-smell and simply shouldn't be allowed. The <span> element is used to apply style on inline elements when a generic presentation tag (ie.: <b> doesn't apply) For example to make some text green:
Incorrect:
<p>You will also be happy to know <span class="bold">ACME Corp</span> is a <span class="eco-green">certified green</span> company.</p>
Correct: (Explanation below)
<p>You will also be happy to know <b>ACME Corp</b> is a <em class="eco-green">certified green</em> company.</p>
The reason here why you would want to use <em> as opposed to <span> for the word green is because the color green here is used to add emphasis on the fact that ACME Corp is a certified green company.
The following would be a good example of the use of a <span> tag:
Correct:
<p>You may press <kbd>CTRL+G</hbd> at any time to change your pen color to <span class="pen-green">green</span>.</p>
In this example, the word green is styled in green simply to reflect the color, not to add any emphasis (<em>) or strong emphasis (<strong>).
The whole distinction between "presentation" elements versus "structure" element is, in my opinion, a matter of common sense, not something defined by W3C or anyone else. :-P
An element that describes what its content is (as opposed to how it should look) is a structure element. Everything else is, by definition, not structural, and therefore a presentation element.
Now, I'll answer the second part of your post. I understand this is a contentious topic, but I'll speak my mind anyway.
Well-made HTML should not concern itself with how it should look. That's the job of the stylesheet. The reason it should leave it to the stylesheet, is so you can deliver one stylesheet for desktop computers, another one for netbooks, smartphones, "dumbphones" (for lack of a better term), Kindles, and (if you care about accessibility, and you should) screen readers.
By using presentation markup in your HTML, you force a certain "look" across all these different types of media, removing the ability of the designer to choose a look that works best for such devices. This is micromanagement of the worst sort, and designers will hate you for it. :-)
To use your example, instead of using <b>, you should ask yourself what the boldness is supposed to express. If you're trying to express a section title, use one of the header tags (<h1> through <h6>). If you're trying to express strong emphasis, use <strong>. You get the idea. Express the what, not the how; leave the how to the stylesheet designers.
</soapbox>
It's not that presentational elements should be avoided, it's that markup should be as semantic as possible. When designing a document structure, default styling should be considered a secondary affect. If an element is used solely for presentation, it's not semantic, no matter what element is used.
The example usage of <b> isn't semantic, because <b> imparts no meaning. <span class="boldtext"> also isn't semantic. As such, their usage is mixing presentation into the structure.
Is this the correct use of Blockquote, q and cite?
<p>
<blockquote>Type HTML in the textarea above, <q>and it will magically appear</q> in the frame below.
</blockquote>
<cite>refrence url
</p>
Is use of Blockquote, q semantically correct? or both are presentational element , so should not be used?
Yes. They are not presentational elements — blockquote represents a block quotation, q represents an inline quotation, and cite represents a reference to a name, work, standard, URL, etc.
You do have some validation errors that are fairly common with blockquote. A blockquote element cannot be inside a paragraph, and in HTML4 actually needs to contain paragraphs. The nesting of the p and blockquote elements in your fragment needs to be reversed.
The blockquote element (also the q element) can optionally have a cite attribute to specify a URI where the quote came from. HTML5 says user agents should make that link available to the user, and HTML4 doesn't say anything at all. I would include the URI both in the cite attribute and as an inline link, since browsers don't handle it.
Here's how I would write that fragment, with those revisions in mind:
<blockquote cite="http://stackoverflow.com">
<p>Type HTML in the textarea above, <q>and it will magically
appear</q> in the frame below.</p>
</blockquote>
<p>
<cite>reference url</cite>
</p>
Validate this fragment
The other answers on this page are out of date, but the question is still valid.
The q element semantically represents a quotation, and is an inline element. It should be used like so (ie. no block elements inside it):
<p>
In the words of <cite>Charles Bukowski</cite> -
<q>An intellectual says a simple thing in a hard way.
An artist says a hard thing in a simple way.</q>
</p>
Another example:
<p>
<q>This is correct, said Hillary.</q> is a quote from the
popular daytime TV drama <cite>When Ian became Hillary</cite>.
</p>
The q element should not be placed inside a blockquote element, as it would be redundant -- both denote a quote.
A blockquote is a block element, allowing other block elements to be placed inside:
<blockquote>
<p>My favorite book is <cite>At Swim-Two-Birds</cite>.</p>
- <cite>Mike Smith</cite>
</blockquote>
<cite> is an inline element representing the title of a body of work. Since the W3C and WHATWG have now agreed to work together, we have one answer as to what it may contain: The name of a book, a film, a TV show, a game, a song, a play, etc, etc.
It should NOT be a URL or an author's name (a URL can be added with a normal a element and an author is not a piece of work that you're citing).
This is a valid usage:
<figure>
<blockquote>
<p>The truth may be puzzling. It may take some work to grapple with.
It may be counterintuitive. It may contradict deeply held
prejudices. It may not be consonant with what we desperately want to
be true. But our preferences do not determine what's true.</p>
</blockquote>
<figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February
1995)</figcaption>
</figure>
You could consider BLOCKQUOTE analogous to a DIV and Q analogous to SPAN.
Recommended usage is to enclose large quotes in BLOCKQUOTE and small, single line or sentence quotes in Q.
<blockquote>
<p>This is a big quote.</p>
<p>This is the second paragraph with a smaller <q>quote</q> inside</p>
</blockquote>
Cite is an attribute on either which merely points to the source.
Using attributes such as the cite attribute of the blockquote or q doesn't make it easily displayable (without JS or tricky CSS) and so does not address the aim of displaying a reference link easily. It is now conforming to include cite (and/or footer) into blockquote to specify the source, either textually of through a URL, of the quote, like below :
<blockquote>
<p>Beware of bugs in the above code; I have only proved it correct, not tried it.” </p>
<cite>Donald Knuth: Notes on the van Emde Boas construction of priority deques: An instructive use of recursion, March 29th, 1977
</blockquote>
Note that :
cases of cite that are part of the quote contents (not the source reference) are also deemed quite rare, and should be handled through a differenciating class on the relevant cite subtag)
Regarding q, it is indeed aimed to quote inline, but it is more likely to be used outside of blockquotes (quotes into quotes are quite rare).
According to this, "cite" is an attribute of q - and is not well supported at that.
The semantic (and valid) use of the <cite> element is still under debate even if "in HTML5, use of this element to mark a person's name is no longer considered semantically appropriate."
You'll find a very detailed and useful article about "<blockquote>, <q> and <cite>" here:
http://html5doctor.com/blockquote-q-cite/