Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About W3_Bill

  • Rank

Profile Information

  • Location
  • Interests
    atmospheric science;
    China and Chinese culture and language;
    classical music;
    pipe organ.

Previous Fields

  • Languages
    CSS, HTML, Javascript, XHTML
  1. I have submitted bug # 1523688 against Firefox to address this issue.
  2. 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.
  3. 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.
  4. 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?
  5. Ingolme, I think a key part of the question was missed. A web page has both English text and Chinese text. How do I specify one font family for the English text, and a different font family for the Chinese text, using at most two font-family specifications, each applicable to the whole page?
  6. 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.
  7. Thank-you for your response. Well, I can't explain it, but now it works as desired. I didn't do anything but reboot and try it on different days! Don't you just love it when problems mysteriously fix themselves or disappear?! Bill.
  8. 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.
  9. W3_Bill

    How to do something like C++ "include file"

    Wow! That worked! That was easy! Thank-you. This question is "solved". 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. Wow. You're fast. Thank-you. I haven't seen a way of tagging a question "solved" (like the Fedora users forum does), but I consider this "solved". Bill.
  12. > 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.
  13. 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" */ /*==================*/
  14. W3_Bill

    color: looking ahead.

    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.
  15. W3_Bill

    color: looking ahead.

    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.