Jump to content

W3_Bill

Members
  • Posts

    22
  • Joined

  • Last visited

Posts posted by W3_Bill

  1. > XHTML is actually an old and outdated standard, I would not suggest sticking with it.

    That's news to me!  But I'm not surprised.  Can't use greater than or less than symbols?  That makes for harder-to-read code.  I also repeatedly find character entity names (like &nbsp) rejected; I have to use their numbers.  That is specific to xhtml, right?  It certainly makes the code harder to read, understand, and maintain.

    So I'm taking your suggestion and going back to html.

    Suggestion to W3Schools: The xhtml tutorial page should say what Ingolme said, and recommend to programmers that have the choice to forget xhtml and use the current version of html.

    Thank-you, Ingolme.  I consider this thread closed.

  2. 6 hours ago, Ingolme said:

    Your document is not XHTML, it's HTML 5, so the XHTML validator is going to find problems with it and XML parsers will as well. Save it with a .html extension rather than .xhtml so that the browser doesn't try to use the XML parser on it.

    My objective is the opposite.  I'm putting in a lot of effort to make all my documents much more strictly compliant with standards.  I want my docs to be xhtml docs.  I've invested a lot of time and effort in the W3Schools site (and other places) learning xhtml, figuring out how to convert my docs, and trying to figure out what's wrong with debug.xhtml.

    What do I need to do to make debug.xhtml valid xhtml?

  3. Results of all the above...  When mixing languages within sentences,

    • "span" is needed.
    • the "lang=___" is needed within the spans.
    • font terminology is somewhat confusing, as is the hierarchal organization of fonts.  (not W3Schools' problem or fault)
    • part of my problem was my Firefix "about:config" settings.  they were overriding html/css font settings.
    • the generic font for kaiti fonts is "cursive" (without the quotes).  The font-family is "kaiti" (should be in quotes).

    Two long-term suggestions:

    • a W3Schools page teaching best practices for mixing languages within sentences/paragraphs, etc. in (x)html web pages.
    • a page showing the hierarchal organization of fonts would be a big help.  the page should include generic font names and font-family names.  I saw somewhere that there are thousands of fonts, so I understand such a page would take a lot of time and effort.

    Firefox bug 1523688 was a false alarm and is closed.  I consider this thread closed.  Thank-you, Ingolme, for your help.

  4. My javascript is within a 39-line xhtml file "debug.xhtml", which is attached.

    When I load the file into Firefox 65 on a Fedora-28 workstation, I get the following error message:

    XML Parsing Error: not well-formed Location: file:///[private path]/debug.xhtml Line Number 29, Column 21:
       if  (picturenum < 10)  {
    --------------------^

    W3C's validator gives the following message:

    Warning Line 27, Column 20: character "<" is the first character of a delimiter but occurred as data

       if  (picturenum < 10)  {

    I've wrestled with this for hours.  What's wrong?

    If it helps, the validator also gives 5 additional messages:

    (1)

    Error Line 6, Column 18: there is no attribute "charset"

       <meta charset="UTF-8" />

    (2)

    Error Line 6, Column 27: required attribute "content" not specified

       <meta charset="UTF-8" />

    (3)

    Error Line 14, Column 39: document type does not allow element "img" here; missing one of "ins", "del", "h1", "h2", "h3", "h4", "h5", "h6", "p", "div", "address", "fieldset" start-tag

    <img id="BianzhongPic" src="x" alt="" >

    (4)

    Error Line 14, Column 40: end tag for "img" omitted, but OMITTAG NO was specified

    <img id="BianzhongPic" src="x" alt="" >

    (5)

    Info Line 14, Column 1: start tag was here

    <img id="BianzhongPic" src="x" alt="" >

    These all look like false alarms to me.

    Thank-you in advance.

    Bill.

    debug.xhtml

  5. There is a hierarchical organization of fonts, but hardly anyone calls it a "taxonomy".  I am not aware of a formal accepted term for that hierarchical organization.  I chose the term "taxonomy" because readers would understand what I meant, though it might not be the accepted term.  The "generic family"  list you gave in your first reply is probably the first, highest level breakdown of the hierarchy.  "Times",  "Courier", "Deja Vu Sans", "Deja Vu Serif", "Free Mono", etc. are likely in the next level.

    My searching took me to the W3C site, and this web page: "https://www.w3.org/TR/css-fonts-4/".  Your first reply was correct in saying that "cursive" is the correct "generic family" for kaiti fonts.  Since my last post, I've realized that in my "playing around", I've been putting "generic family" values in quotes.  Those values are "keywords", and must not be in quotes.  (I found that out in the that same W3C web page.)  So I did yet more "playing" today.  Unfortunately, it still doesn't work.  I'm now thinking the problem is likely to be in Firefox.  I've posted a question there.  From that, I'll see if a bug needs to be filed against Firefox.  I'll post something here if/when I get something useful from Mozilla.

  6. After previously playing around with "lang" quite a bit, I had the feeling that "<span>" would end up being the answer.  My newest round of "playing" with this shows me that "<span>" is the only thing that works.  It think it was you (Ingolme) that introduced me to "<span>" in some previous thread.  Now back to "font-family"....

    In biology, one way living things are organized is by "taxonomy".  A common taxonomy of living things goes like this: "life - domain - kingdom - phylum - class - order - family - genus - species".  When I look at the W3CSchools page on font-family, my impression is that there is a "taxonomy" for fonts.  So "Times New Roman" is a detailed-level name (like genus or species), "Times" is an intermediate-level name, and "serif" is a high-level name (like domain or kingdom).  It seems the list you gave earlier ("generic fonts are serif, sans-serif, monospace, cursive, fantasy and system-ui") is high-level (like domain or kingdom).  I understand that "AR PL UKai CN" is a detailed-level name (like genus or species), and probably won't work on most non-Linux systems (and even some Linux systems).  What is the "taxonomy" for "AR PL Ukai CN"?  ...or what is the taxonomy of Chinese fonts?  I've tried many things, none have worked.  I've searched, no luck.  I'm surprised at how difficult this has turned out to be.

  7. Having read your posting, I went to the W3Schools site and studied the "lang" feature, and dug in more to UTF-8, and related topics.  I played around some with "lang".

    Take a look at the attached screen-capture.  It shows an x-term in which I used the Linux "cat" command to display a file with mixed Chinese and English.   Notice that the English and Chinese are mixed within a single sentence as well as within a single paragraph.  My apologies that when I launched this thread, I did not realize that it would be relevant that the Chinese and English are mixed within a paragraph, and even within a single sentence.  My playing around shows that it does matter.  My hope was that for the whole web page, I could specify one font family for all English text on the page, and a separate font family for all the Chinese text on the page, and the browser's rendering engine would know from the (UTF-8?) character codes which font family to use without me telling it what text is Chinese and what text is English.   Is there any way of handling this other than using "span"?

    I also played around with the font-family itself.  I tried each of "regular script", "kaiti", "kaishu", "zhengshu", "zhengkai", and cursive, all also with spaces and dashes as well as one word.  I also tried "serif", "sans-serif", and "monospace" as well as "cursive".  The only way I can get a kai-like font is to use "ar pl ukai cn".  I checked my workstation's font tool to look for family or generic names.  No luck.  I also tried looking in the W3Schools references.  If an answer is there, I missed it.  Any ideas?

    sample.png

  8. I have a few web pages that contain a mix of Chinese and English text.  I know from the W3Schools CSS "Fonts" page how to specify the default font for a web page containing English text only, so that I get Times (serif) regardless of the browser and operating system.  But how do I also set the default font for Chinese text so that I get, in all browsers and on all operating systems, something looking very closely like what my home workstation (a Fedora system) calls "AR PL UKai CN"?

    I see in wikipedia that what on my Fedora system is "AR PL UKai CN" can be called "kaiti", "kaishu", "zhengshu", "regular script", "zhengkai", and possibly other names.  What are the correct "font family" and "generic family" names for "AR PL UKai CN" to use in the CSS "font-family" property?  What I'm looking for is like the middle column in the attached png image, which came from "https://en.wikipedia.org/wiki/List_of_CJK_fonts".

    Thank-you in advance for your help.

    Bill.

    ChineseFonts.png

  9. 1.

    I have some HTML in which I've embedded some JavaScript.  In Firefox-62, it works on a Fedora-27 workstation as I want, but on a windows-7 box, the browser seems to act as if the script does not exist.  Here is an HTML extract showing the embedded JavaScript:
     

    <table>
       <tr>
          <td style="padding: 0;">
             <img id="BianqingPic" src="x" alt=""/>
          </td>
       </tr>
    </table>
    
    <p id="BianqingCaption"  class="photocaption">
    </p>
    
    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    
    <script type="text/javascript">
    
       "use strict";
    
       var newPic = "BianQing_";
       var d = new Date();
       //--------------------------------------------------------------------------
       // picture choice is based on deci-hours (1 deci-hour = 6 minutes).
       // all_minutes = (60 * hours) + minutes; range is 0 to 1439.
       // (day-of-month - 1) is then added to throw this "out of sync" with the
       //    ErHu picture choice; range is 0 to 1469.
       // deci-hours = all_minutes / 6; range is 0 to 244.
       //--------------------------------------------------------------------------
       var all_minutes = (d.getMinutes() + (60 * d.getHours())) +
                         (d.getDate() - 1);
       var picnum = (Math.floor ( all_minutes / 6  ) % 7) + 1;
       document.getElementById ( "BianqingCaption" ).innerHTML =
            "Biān Qìng" + "&nbsp&nbsp(picture #" + picnum + " of 7; " +
            "based on deci-hours)";
       newPic = newPic + picnum + ".jpg";
       document.getElementById("BianqingPic").src = newPic;
    
    </script>

    I tried adding "console.log" statements just after the "use strict;" line, and between the last two lines of the script body.  Absolutely nothing shows up in the web console or the browser console.  Why is the script (apparently) being ignored?  The windows-7 and the Fedora-27 systems were updated last week, as was Firefox.

    By the way,  the w3schools page "https://www.w3schools.com/js/js_debugging.asp" is out of date.  Firefox no longer uses Firebug, and the web site pointed to by the link provided for getting Firebug no longer exists.

    Thank-you in advance for your help.

    Bill.

  10. Background:

    In C++, I can put a group of definitions into a separate file, and then in the C++ source, do a "#include <include_file_path>" to bring those definitions into the C++ file at the desired location.  An example would be putting basic physics constants (gravitational constant, electron charge, dry gas constant, electron mass, speed of light in a vacuum, Plank's constant, etc.) into a file "physics_constants.H", and then a physics application program would have a line

    #include "physics_constants.H"

    In a JavaScript, I have an array of photo captions (text).  Here's a piece:

    var captions = [
            "Longs Peak on March 17, 2016" + "<br />" +
                 "Colorado, USA" ,
            "Mt. McKinley on January 19, 2015" + "<br />" +
                 "Alaska, USA" ,
            [etc.]
            "Medicine Bow Peak on February 14, 2000" + <br/>" +
                 "Wyoming, USA"
        ];

    The array actually has 58 entries.  Rather than embedding that into the JavaScript (which is in turn a part of an html file), I'd like the array definition to be in a separate file by itself, and then put a JavaScript equivalent of the C++ "#include <include_file_path>" at the appropriate place in the JavaScript.

    Questions:

    Does JavaScript have such a capability?  If yes, how do I do it?

    Thank-you for your help.

    Bill.

  11. > You can set innerHTML instead of textContent and then it will interpret <br> tags properly.

     

    That works. Thank-you.

     

    > Additional spaces can be added with " "

     

    That works. Thank-you.

     

    > You should use CSS to style the text. You can set the text-indent property to push the text further in.

     

    I don't understand this. The double space that I want is in the midst of the line of text. For example, I want to use JavaScript to put together a single line of text that looks like this:

    caption for picture (picture #3 of 5)

    I'm wanting two spaces between the first occurrence of the word "picture" and the left-parenthesis character. How will CSS help with that?

     

    thanks,

    Bill.

  12. Good morning,

    I'm using Firefox on a Fedora-23 system, both current as of 2016-08-18.

    In an html file, I have a Javascript script to randomize the selection of an image and its caption by choosing it based on the time when the page is loaded. The selection works great. But the caption strings (in a Javascript array) are long. I've tried a few different ways of putting a line break in the string, so that they display in the web page as two lines. I've also tried "<br/>" (no space before the slash). Nothing works. What is the elegant, best practice way of putting a line break in the place where I want it within a long caption in this scenario? (I very probably could come up with a "brute force" way - like two arrays, but that's tedious, especially if I have a much larger number of pictures and captions.) By the way, it's curious that when I go to the W3Schools JavaScript Strings tutorial, run the second "Try it Yourself", embed "<br />" in a one of the strings, and run it, I do get the line break where I want it in the output string!

    I'd also like the caption to end with " (picture #i of n)". I want *two* spaces before the '('; it looks much better that way. But additional spaces beyond one apparently get parsed off when the page loads. What is the elegant, best practice way of getting the desired amount of additional space there?

    I am unable to attach the html and css files, so I've included them at the end of this message's body, below the signature.

    Thank-you for your help.

    Bill.


    <!-- ============= -->
    <!-- "testjs.html" -->
    <!-- ============= -->

    <!DOCTYPE html>

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

    <!-- ===================================================================== -->

    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="testjs.css"/>
    <title>Test Javascript Page</title>
    </head>

    <!-- ===================================================================== -->

    <body>

    <!-- ===================================================================== -->

    <table id="page_table" style="width:100%">
    <tr>
    <td id="page_cell">

    <!-- ===================================================================== -->

    <h1> <a id="pagetop"></a> Test Javascript Web Page</h1>

    <p> <br /> </p>

    <table>
    <tr>
    <td style="padding: 0;">
    <img id="TestPic" alt=""/>
    </td>
    </tr>
    </table>
    <p id="TestCaption" class="photocaption">
    </p>

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    <script type="text/javascript">

    var captions = [
    "first line of long caption for first test image<br>meta-data part of long caption for first test image" ,
    "second test image, long caption, top line<br />second test image, long caption, meta-data part" ,
    "1st line of long caption for 3rd test image\nmeta-data line of long caption for 3rd test image" ,
    "4th test image, long caption, top line" + "<br />" + "4th test image, long caption, meta-data line" ,
    "upper line of long caption for test image #5" + '\n' + "meta-data line of long caption for test image #5"
    ];

    var d = new Date();
    var newPic = "TestImage";
    var picnum = d.getSeconds()%5;
    document.getElementById ( "TestCaption" ).textContent =
    captions[picnum] + " (picture #" + (++picnum) + " of 5)";
    newPic = newPic + picnum + ".jpg";
    document.getElementById ( "TestPic" ).src = newPic;

    </script>
    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

    <!-- other stuff goes here -->

    <!-- ===================================================================== -->

    </td>
    </tr>
    </table>

    <!-- ===================================================================== -->

    </body>
    </html>

    <!-- ================= -->
    <!-- end "testjs.html" -->
    <!-- ================= -->


    ************************* (here is the associated css file) *************************


    /*==============*/
    /* "testjs.css" */
    /*==============*/

    /*------*/
    /* body */
    /*------*/

    body { background-color: #000000;
    margin-top: 5mm;
    margin-bottom: 5mm;
    margin-left: 5mm;
    margin-right: 5mm;
    color: #ff8f6f;
    text-align: center; /* needed in IE for table centering */
    font-family: Times, serif;
    font-size: 5.6mm; }

    /*----------*/
    /* headings */
    /*----------*/

    h1 { background-color: transparent; text-align: center; color: #ffff00; }
    h2 { background-color: transparent; text-align: left; color: #ffff00; }
    h3 { background-color: transparent; text-align: left; color: #ff9faf; }

    /*-------------------*/
    /* named text styles */
    /*-------------------*/

    .photocaption { text-align: center;
    background-color: transparent;
    font-style: italic;
    font-size: 100%;
    color: #ff9faf; }

    /*===================================*/

    /*------------*/
    /* page table */
    /*------------*/

    table#page_table { margin: auto;
    background-color: #e7a070;
    color: #ff8f6f;
    border-collapse: separate;
    border-spacing: 5mm;
    border: outset 2mm; }

    /*-----------------*/
    /* page table cell */
    /*-----------------*/

    td#page_cell { text-align: center; vertical-align: middle;
    background-color: #270f00;
    color: #ff8f6f;
    border: inset 2mm #ff8f6f;
    padding: 15mm; }

    /*===================================*/

    /*-------*/
    /* table */
    /*-------*/

    table { margin: auto;
    background-color: #e7a070;
    color: #ff8f6f;
    border-collapse: separate;
    border-spacing: 2mm;
    border: outset 1.4mm; }

    /*------------*/
    /* table cell */
    /*------------*/

    td { text-align: center; vertical-align: middle;
    background-color: #3f1700;
    color: #ff8f6f;
    border: inset 1mm #ff8f6f;
    padding: 3mm; }

    /*==================*/
    /* end "testjs.css" */
    /*==================*/

  13. I think you should be aware that even today different monitors display the same colors differently. It's not something a web developer should worry about, you will never get your page to look exactly the same on different computers. Some screens show richer colors, some screens have a warmer tint, some screens have a smaller amount of colors.

     

    There are many color standards out there already outside of sRGB. Screen hardware changes all the time, we went from CRT to LCD to LED and OLED. There are even screens with yellow pixels these days. Web standards have not changed to adapt to it. The web is not going to be affected by another change.

     

    Browsers do the work of converting from color codes on the web to values that the screen can use.

    I am aware.

     

    I would not call CRT, etc. color standards. Those are technologies. "We went from CRT..."? Hmmm... I started with teletypes with rolls of yellow paper, black ribbons, and typeballs! And I can't forget the chain printers. Oh, the memories. We've come a long way.

     

    I think I'm convinced. I don't need to concern myself with web standards regarding color.

     

    Thank-you.

    Bill.

  14. The main point of the new color standard (Rec. 2020) is its larger gamut. That is, it can represent a greater range of colors. The sRGB standard (about the same as the Rec. 709 standard) can represent only about 36% of the range of colors that people (with approximately normal color vision) can see. The Rec. 2020 standard can represent about 75%. Look at the CIE diagram image near the top of this web page:

    "https://en.wikipedia.org/wiki/UHDTV"

    to see the comparison. Mainly what the Rec. 2020 standard gives us is richer, more saturated colors. I've long noticed that on computer monitors, "red" (RGB coordinates 255-0-0, HSL coordinates 0-100-100 or 360-100-100) actually appears (and scientifically is) orange-red. Rich (more saturated) reds, purples, magentas, and violets cannot be displayed on sRGB monitors. Unless monitors using tunable lasers covering the whole visible range (~400 to ~700 nm) of the spectrum are invented, we'll never get 100% coverage of the range of color we can see; we'll never get 100% saturation. But the Rec. 2020 standard gives us good improvement in that regard, and I'll welcome it. This new standard is already adopted, and monitors capable of displaying it are already being made.

     

    I agree that the extra color depth (from 8 bits to 10 or 12 bits) is not needed for much of what is done in web pages such as text, color fill. But it is needed for other things such as photography. Take a close, careful look at the "H" (Hue) color bar on this web page:

    "http://www.w3schools.com/colors/colors_hsl.asp"

    I see quantization (step changes) in the orange-yellow to yellow-green part and the cyan-blue area of that color bar. With 10 or 12 bits per primary, that would not happen. With the larger gamut (range of colors) of Rec. 2020, this problem will become more serious. This is why Rec. 2020 calls for more bits per primary.

     

    The greatest part of the impact of the new standard is hardware - out of this forum's scope. Some of the impact is in operating systems and device drivers - out of this forum's scope. But my sense is that the color representations will have to change/adapt. I also get a sense that what we've already coded and what we code now in web pages may change in appearance as Rec. 2020 monitors catch on. Will RGB 255-0-0 (HSL 0-100-100) look redder on Rec. 2020 monitors? Will magentas, cyans, and greens look richer? Thus will we have to re-code some colors?

     

    This is a looking-ahead topic. I believe looking ahead is wise. And I suspect we'll be feeling significant impact sooner than 10 years.

     

    Bill.

  15. In the W3Schools tutorials on web color, a few different representations of color are presented. Examples: red-green-blue, hue-saturation-lightness, hue-whiteness-brightness, cyan-magenta-yellow-black, and a few different color-naming standards. A new color-space standard has been created and adopted: "Rec. 2020"; it provides a much larger color space than what most computer monitors can display (the sRGB color space). Eventually, computer monitors that support the new Rec. 2020 color space should become available.

     

    When the Rec. 2020 monitors become available (a few already are!), will colors coded in the representations currently used in HTML, CSS, etc. look the same on those as they do on current sRGB monitors? Will we have to re-code those colors, or will the representations themselves adapt?

     

    I notice that current color representations assume 8 bits per primary (red-green-blue). The Rec. 2020 color space requires 10 or 12 bits per primary. It seems from this that color representation in HTML, CSS, etc. will have to adapt. Is W3C ready? What can we web programmers do to be ready?

     

    If this belongs in a different forum (HTML? CSS?), please let me know.

×
×
  • Create New...