📜 ⬆️ ⬇️

Ruble sign and XHTML 1.0 Strict. What common?

It will be about Document Type Definition (or DTD, <! DOCTYPE ...> in short).
On the way to a completely semantic layout, we need a DTD or the XML Schema standard. In this article, I will look at the first one and show you how to make a cross-browser, W3-valid document with your own tag - <rur> using 2 lines and one CSS-style
Having dealt with the method outlined by me, anyone can create valid documents using their own tags, which can not only make the document layout more flexible, but also more semantically correct, logical and understandable, both for robots and for people who will be engaged in further his support.


So, we need to embed our tag in XHTML, which would indicate the ruble sign. In order for the page to be approved by the validator, it must be not only well-formed ( Note: syntactically correct in terms of “XMLSpec”), but also valid, that is, compiled according to a document type descriptor known as DTD.
I use DTD XHTML 1.0 Strict, a description of valid documents for which can be found at the familiar URL http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
After examining the structure of the document, we find the following lines:
<!--=================== Text Elements ====================================--> <! ENTITY % special . pre "br | span | bdo | map" > * This source code was highlighted with Source Code Highlighter .
  1. <!--=================== Text Elements ====================================--> <! ENTITY % special . pre "br | span | bdo | map" > * This source code was highlighted with Source Code Highlighter .
  2. <!--=================== Text Elements ====================================--> <! ENTITY % special . pre "br | span | bdo | map" > * This source code was highlighted with Source Code Highlighter .
  3. <!--=================== Text Elements ====================================--> <! ENTITY % special . pre "br | span | bdo | map" > * This source code was highlighted with Source Code Highlighter .
<!--=================== Text Elements ====================================--> <! ENTITY % special . pre "br | span | bdo | map" > * This source code was highlighted with Source Code Highlighter .

These lines show that the document can use the br, span, bdo, map tags. Our tag is called rur. Now it remains to somehow inject it into the already created DTD. The DTD standard allows you to scale up document type descriptors. I will not dwell on this, but I will immediately show the DOCTYPE header code for a valid XHTML 1.0 - Strict document:
  1. <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
  2. [& # 60 ;! ENTITY % special . pre "br | span | bdo | map | rur" >
  3. <! ELEMENT rur (# PCDATA ) >
  4. <! ATTLIST rur > ] >
* This source code was highlighted with Source Code Highlighter .

The code above means that we add the rur tag type for the entity special.pre, which has no parameters and may contain Parsed Character Data Data.
To test the functionality of the code, embed the above header and the following code into any valid XHTML layout:
  1. A ruble sign ( < rur > RUB </ rur > ) appeared in circulation on July 1, 2007.
  2. < script type = "text / javascript" >
  3. // <! [CDATA [
  4. i = 0;
  5. while ( true )
  6. {
  7. var elem = document .getElementsByTagName ( 'rur' ) [i];
  8. if (! elem) { break ;}
  9. elem.innerHTML = "P" ;
  10. i ++;
  11. }
  12. //]]>
  13. </ script >
* This source code was highlighted with Source Code Highlighter .


The JS code, I think is quite understandable - it searches for the <rur> tags in the body of the document and inserts content into them - the letter “P”, which is the graphic basis of the ruble sign. If the client does not have JS, then the result is simply “rub.”
Yes! And I completely forgot CSS for our ruble!
  1. / * ruble sign * /
  2. rur
  3. {
  4. text-decoration: line-through;
  5. margin: 0.1em;
  6. }
* This source code was highlighted with Source Code Highlighter .

By the way, you can have it completely different!
Something like that. I think that Habrolyudians will fully appreciate this modest work and understand its value. Thanks for attention!
For verification, you can open the source code from my server at: http://www.ridev.ru/valid-rur.htm
I intentionally shoved CSS inside to have one file.
')

Source: https://habr.com/ru/post/63647/


All Articles