Check out Modern Chess, our featured variant for January, 2025.


[ Help | Earliest Comments | Latest Comments ]
[ List All Subjects of Discussion | Create New Subject of Discussion ]
[ List Earliest Comments Only For Pages | Games | Rated Pages | Rated Games | Subjects of Discussion ]

Comments/Ratings for a Single Item

EarliestEarlier Reverse Order LaterLatest
Improving Typography[Subject Thread] [Add Response]
🕸Fergus Duniho wrote on Sun, Oct 8, 2017 08:37 PM UTC:

Strange. The ad shows up on the House of Staunton, and it does include height and width values that should prevent this. Right now, as I'm writing this comment, there is a House of Staunton banner ad that is showing only the TITLE text, but it is not taking up extra space. Curiously, none of these have ALT text. So I just copied the TITLE text to ALT text with a macro.


Greg Strong wrote on Sun, Oct 8, 2017 08:56 PM UTC:

I should also mention that I do get some HoS ads fine- I have no idea what's wrong with this one, but it comes up a lot.


🕸Fergus Duniho wrote on Sun, Oct 8, 2017 09:00 PM UTC:

Greg, Is this problem not happening on Chrome? Or are you just not using Chrome enough to notice if it does? Most of the time I'm here, I'm using Chrome.


Greg Strong wrote on Sun, Oct 8, 2017 09:13 PM UTC:

I don't really use Chrome.  Don't even have it installed on Windows.  I do have Chromium installed on Mint, as that's the only way I can watch Amazon Prime Video, and I just tested and it does seem to work - I refreshed about 50 times and didn't get the problem.  But this doesn't make sense to me; why should your choice of browser have any effect on whether or not a link is dead?  I do have a couple plugins for Firefox, but I've disabled them and it didn't make any difference.  And I don't have any plugins at all for IE, (not sure if IE even has plugins), and it malfunctions also...


🕸Fergus Duniho wrote on Sun, Oct 8, 2017 09:15 PM UTC:

For testing purposes, I have just set the comments page to use only the particular ad you are having trouble with. I'll now check it on different browsers.


🕸Fergus Duniho wrote on Sun, Oct 8, 2017 09:18 PM UTC:

Internet Explorer failed to show the ad, but it did show the ALT text without getting really large. Has the ALT text stopped it from getting large on your computer?


🕸Fergus Duniho wrote on Sun, Oct 8, 2017 09:22 PM UTC:

It failed to show once on Linux Mint Chrome, but when I refreshed it, it did show up. When it didn't, it displayed the ALT text without sizing large. It has displayed fine on Windows Chrome and Waterfox and on Linux Firefox.


Greg Strong wrote on Sun, Oct 8, 2017 09:24 PM UTC:

The Alt text has indeed kept it from eating all the screen space.  I still get the dead link, but at least it's really tiny, so I consider that a win.  Thanks for looking into it.


H. G. Muller wrote on Sun, Oct 8, 2017 09:26 PM UTC:

It worked after I fixed these problems, but now I have the problem that the text from the object cannot be styled from outside.

Is that a problem? I suppose it could be styled from the inside. The style of the menu bar seems to be defined between <STYLE> tags on the pages itself (line 21-69 for the page I am looking at), rather than from an external CSS file. These lines could be just as well in the external file included by the <object>. If they are always the same, one could argue it is even better to have them there, as this external file is supposed to be cached.

I admit that I am puzzled by the fact that the browser tries to keep the styles separate, but perhaps that also means that the main page and the external html can each link to their own CSS file, without the styles interfering with each other.


🕸Fergus Duniho wrote on Sun, Oct 8, 2017 09:34 PM UTC:

Since the menu includes up to four submenus with varying content, it cannot be encapsulated into a single object. These are the Favorites submenu, designated by a heart, the Play submenu, the Related submenu, and the submenu for the signed in person. I had been thinking of including the static parts into an object, but it would require a duplication of the CSS required by the non-static parts.


Greg Strong wrote on Sun, Oct 8, 2017 10:28 PM UTC:

The listcomments.php page is not longer working on IE - the left ad sidebar floats on top of and conceals the comments as seen below. I almost never use IE so I have no idea if this is new.


🕸Fergus Duniho wrote on Sun, Oct 8, 2017 11:32 PM UTC:

I get this happening in Internet Explorer when the window is reduced in width, so that only the left ad is displayed. Did you give me a full screen shot or crop it? I do not get this in Chrome or Waterfox with the window set to the same size. Doing further tests with Internet Explorer, I did not have a problem with the rules of Chess page, not even with an Amazon ad, but I did have the same problem with the comments page showing the earliest comments, which are all text comments without any images or interactive diagrams in them.


Greg Strong wrote on Sun, Oct 8, 2017 11:38 PM UTC:

Confirmed - I don't have the issue if I make the window wide enough, but it has to be seriously wide - almost full-screen before both sidebars show up and the text is not obscured.


🕸Fergus Duniho wrote on Sun, Oct 8, 2017 11:47 PM UTC:

I added max-width: 100%; to the CSS for the ARTICLE element, and it seems to have fixed the problem.


Greg Strong wrote on Sun, Oct 8, 2017 11:52 PM UTC:

Yes, fixed for me now too.


H. G. Muller wrote on Mon, Oct 9, 2017 07:03 AM UTC:

I had been thinking of including the static parts into an object, but it would require a duplication of the CSS required by the non-static parts.

I was already afraid that splitting the menu in a constant and a variable part would give trouble. But it might be possible to treat the entire menu as variable, and put it externally. After all, the menu is not very variable; a given user will only need two different versions of it, one where he is signed in, and the other where no one is signed in.

I have never seen a PHP script, but I imagine the msdisplay.php looks something like this:

GenerateHeader();
GenerateMenuBar(USER);
GenerateAds();
GenerateArticle(SUBJECT);

The GenerateMenuBar part could be moved to a separate script, menu.php (say), which would also generate the styling instructions. The output of this script would then be included as an <object> in the main page. So the msdisplay.php script would become

GenerateHeader();
Generate('<object data="menu.php?user=USER"></object>');
GenerateAds();
GenerateArticle(SUBJECT);

and tne menu.php would contain

GenerateMenuBar($user);

The main script would only generate two different menu URLs in the <object> tag for a given user XXX: menu.php?user=none, and menu.php?user=XXX, and the browser would cache both, and from then on would only use these cached versions, not accessing the menu.php on the server anymore.

[Edit] Forget it, this idea does not work. I made a 'mockup' of the CVP website by copying the /g/global.css style file and all icons in /index (and /ads/showads.js) to my Linux VM, and put the page source of /invention/werewolf-chess on a file with .html extension. Showing the latter in my browser gives a reasnable reproduction of how the page looks on the site itself. (For reasons I have not identified yet the ebay ad below the menu bar stays blank, although the ebay ad in the banner does appear). This does result in a fully operational menu bar (at least as far as opening menus and sub-menus; when you actually select a menu item, the link is usually broken, as it points to a onsite file/script that I did not copy).

This allowed me to experiment with the menu bar. It was possible to migrate the menu section of the page source together with its styling to an external html file, and include that as an object (although that gave a margin of about 5 pixels around it that I did not managed to suppress yet). Such a wrapped menu bar responds to mouse hover for popping up the menus. But what kills the idea is that the menus that pop up are confined to the size reserved for the <object>:

 

I added  max-width: 100%;  to the CSS for the ARTICLE element, and it seems to have fixed the problem.

Good trick. I will try that in the diagram design wizard too. For some reason long lines in a <pre> element (like what I use to present the generated HTML code in the wizard) now force the element wide enough to completely contain them, rather than wrapping. That didn't use to be a problem in the past. But restricting the width as a percentage of the parent element might combat this problem.


🕸Fergus Duniho wrote on Mon, Oct 9, 2017 01:12 PM UTC:

Thanks for looking into this. It saves me the effort. Objects may still be useful for ads. So I'll look into that. PHP looks similar to JavaScript. Both can be mixed with HTML, and both use a C-like syntax. The main differences are that

  • JavaScript can access the DOM, and PHP can access the database and environment variables.
  • PHP can write files to the server, but JavaScript cannot.
  • When you look at the source of a PHP script in your browser, you will just see the generated HTML, not the PHP code actually written in the script.

🕸Fergus Duniho wrote on Wed, Oct 11, 2017 10:23 PM UTC:

Here I will be testing out some different text-rendering options. I will repeat the same text with multiple options for the sake of comparison. The first will use optimizeSpeed, the second optimizeLegibility, and the third geometricPrecision. Ligatures should not work, because I already turned them off in the CSS due to unwanted ligatures like an ff ligature that made the two f's look different. (ABCDEFGIJKLMNOPQRSTUVWXYZ) + [abcdefeghijklmnopqrstuvwxyz] 1234567890! Is this a question? The quick brown fox jumps over the lazy dog. Every good boy deserves favor. The rain in Spain falls mainly on the plain. Chess is related to the games Shogi and Xiangqi. What is a jiffy thing to say?

Here I will be testing out some different text-rendering options. I will repeat the same text with multiple options for the sake of comparison. The first will use optimizeSpeed, the second optimizeLegibility, and the third geometricPrecision. Ligatures should not work, because I already turned them off in the CSS due to unwanted ligatures like an ff ligature that made the two f's look different. (ABCDEFGIJKLMNOPQRSTUVWXYZ) + [abcdefeghijklmnopqrstuvwxyz] 1234567890! Is this a question? The quick brown fox jumps over the lazy dog. Every good boy deserves favor. The rain in Spain falls mainly on the plain. Chess is related to the games Shogi and Xiangqi. What is a jiffy thing to say?

Here I will be testing out some different text-rendering options. I will repeat the same text with multiple options for the sake of comparison. The first will use optimizeSpeed, the second optimizeLegibility, and the third geometricPrecision. Ligatures should not work, because I already turned them off in the CSS due to unwanted ligatures like an ff ligature that made the two f's look different. (ABCDEFGIJKLMNOPQRSTUVWXYZ) + [abcdefeghijklmnopqrstuvwxyz] 1234567890! Is this a question? The quick brown fox jumps over the lazy dog. Every good boy deserves favor. The rain in Spain falls mainly on the plain. Chess is related to the games Shogi and Xiangqi. What is a jiffy thing to say?


Greg Strong wrote on Thu, Oct 12, 2017 02:33 AM UTC:

If the three paragraphs are supposed to appear different, either they don't or it's too subtle to see.

I'm starting to worry about you, dude.  You migth be getting a little OCD with the font stuff :)


🕸Fergus Duniho wrote on Thu, Oct 12, 2017 11:10 AM UTC:

It's just a test, Greg. I learned about a new CSS property, and I was testing what effect its different values would have. For the fonts I chose, they appear to have none.


🕸Fergus Duniho wrote on Thu, Oct 12, 2017 12:09 PM UTC:

Using the Android Browser on my Toshiba Thrive tablet, I do see a difference. Less text fits on the line with optimizeSpeed than with the other two. For the latter two, the spacing is narrowed between some letters, such as the two l's in will, the two f's in different, the ow in brown, the ov in over, or the whole word jiffy. I have not noticed any difference between the effects of optimizeLegibility and geometricPrecision.


🕸Fergus Duniho wrote on Thu, Oct 12, 2017 12:17 PM UTC:

I am seeing the same effect with Boat Browser, which uses Droid Serif instead of the Google fonts. I also noticed that words like main and spain are tighter with oL or gP.


🕸Fergus Duniho wrote on Thu, Oct 12, 2017 12:27 PM UTC:
And I see the same effect in UC Mini. Unfortunately, I can't use Chrome or Firefox on my Thrive, but I will check them out on my phone.

🕸Fergus Duniho wrote on Thu, Oct 12, 2017 02:27 PM UTC:

I tested browsers on my two Android phones, but I waited until I turned on my computer to report the results. On my large Android 6 Marshmellow phone, I tested Chrome, Firefox, Boat Browser, and the default Android Browser, and I saw no difference between any of the text samples with any of them. On my small Android 4.1.2. Jelly Bean phone, I tested Chrome, Firefox, Boat Browser, Dolphin, Maxthon, and the default Android Browser. Of these, I saw a difference between the text samples in the Android browser, in Boat Browser, and in Maxthon, but I did not see any difference in Chrome, Firefox, or Dolphin. For reference, my Thrive runs Android 4.0.4. Ice Cream Sandwich.


🕸Fergus Duniho wrote on Thu, Oct 12, 2017 03:46 PM UTC:

I just installed Safari for Windows, since at least some of the browsers that I saw a difference in on Android were Safari-based. Although there is no difference in which word each each line ends with, I could detect small differences by taking a screenshot and using a veritical line in a graphics program as a guide. Unfortunately, optimizeLegibility and geometricPrecision are both turning on ligatures in Safari.


25 comments displayed

EarliestEarlier Reverse Order LaterLatest

Permalink to the exact comments currently displayed.