Having problems viewing fonts? (Call for Guinea Pigs!)

Questions and discussion about B-Greek policies or the B-Greek forum.

Can you see the text correctly?

Yes
24
96%
No
1
4%
 
Total votes: 25

Nigel Chapman
Posts: 74
Joined: June 3rd, 2011, 4:55 pm
Location: Sydney Australia
Contact:

Re: Having problems viewing fonts? (Call for Guinea Pigs!)

Post by Nigel Chapman »

Hi Jonathan, -- Yes, Didot has Latin chars but they're serifs too, and so aren't as readable as the sans-serifs for the small English text; we'd need to bump up the font size. Though that might not be a bad idea generally: I'm on a 24" monitor and the default is TINY. 1.5em works well for Didot in English and Greek in .postbody .content -- it's actually rather elegant, even if the Greek seems slightly smaller than the Latin -- but 1.5em would be an ungainly font size if a browser defaulted to the sans-serifs for any of several reasons. So I incline toward the JS solution still; I'll see if I can work out how to naturally accommodate that in phpBB. - Nigel.
"When eras die their legacies are left to strange police." -- Clarence Day
Nigel Chapman | http://chapman.id.au
Stephen Carlson
Posts: 3351
Joined: May 11th, 2011, 10:51 am
Location: Melbourne
Contact:

Re: Having problems viewing fonts? (Call for Guinea Pigs!)

Post by Stephen Carlson »

As far as I can tell, Lucida Grande for Windows does not have the pre-composed Greek glyphs in its font, so it should not be first in the list of fonts.

Stephen
Stephen C. Carlson, Ph.D.
Melbourne, Australia
Jonathan Robie
Posts: 4159
Joined: May 5th, 2011, 5:34 pm
Location: Durham, NC
Contact:

Re: Having problems viewing fonts? (Call for Guinea Pigs!)

Post by Jonathan Robie »

sccarlson wrote:As far as I can tell, Lucida Grande for Windows does not have the pre-composed Greek glyphs in its font, so it should not be first in the list of fonts.
OK, I demoted it:

Code: Select all

font-family: "Arial Unicode MS", "Liberation Sans", Tahoma, "Lucida Grande", sans-serif;
I wonder if that will help the Windows 98 / Internet Explorer 6 people? If not, I think installing Opera (http://www.opera.com) is the first thing I would suggest for them.

Update: No, it doesn't help the Windows 98 / Internet Explorer 6 people. But installing the free Opera browser probably will.
ἐξίσταντο δὲ πάντες καὶ διηποροῦντο, ἄλλος πρὸς ἄλλον λέγοντες, τί θέλει τοῦτο εἶναι;
http://jonathanrobie.biblicalhumanities.org/
Stephen Carlson
Posts: 3351
Joined: May 11th, 2011, 10:51 am
Location: Melbourne
Contact:

Re: Having problems viewing fonts? (Call for Guinea Pigs!)

Post by Stephen Carlson »

Tahoma has all the glyphs, and I think Arial Unicode MS has them too, so either of those will be better to list ahead of Lucida Grande.

The text box has a different font family list, which is: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;" Listed first is Trebuchet MS, but this too lacks the pre-composed glyphs. Same lack with the following Verdana. Helvetica is not on my system, and Arial (rather than the Arial Unicode MS) lacks the pre-composed glyphs too. This means that, for text box entry, none of the listed fonts have the pre-composed glyphs on my system.

Stephen
Stephen C. Carlson, Ph.D.
Melbourne, Australia
Jonathan Robie
Posts: 4159
Joined: May 5th, 2011, 5:34 pm
Location: Durham, NC
Contact:

Re: Having problems viewing fonts? (Call for Guinea Pigs!)

Post by Jonathan Robie »

I'll have to find the right CSS tag for textbox entry. In the meantime, Preview is your friend. (I need to put my head down and do my day job for now.)
ἐξίσταντο δὲ πάντες καὶ διηποροῦντο, ἄλλος πρὸς ἄλλον λέγοντες, τί θέλει τοῦτο εἶναι;
http://jonathanrobie.biblicalhumanities.org/
Stephen Carlson
Posts: 3351
Joined: May 11th, 2011, 10:51 am
Location: Melbourne
Contact:

Re: Having problems viewing fonts? (Call for Guinea Pigs!)

Post by Stephen Carlson »

I'm still getting Lucida Grande displayed for my content (even outside of text boxes). This appears to be the case because the .content style on line 1180 of style.php is overriding any other font family specified elsewhere.

As for text box, the relevant CSS style is #message-box textarea on line 2532 of style.php.

(This is all according to my Chrome "inspect element" feature.)
Stephen C. Carlson, Ph.D.
Melbourne, Australia
Jonathan Robie
Posts: 4159
Joined: May 5th, 2011, 5:34 pm
Location: Durham, NC
Contact:

Re: Having problems viewing fonts? (Call for Guinea Pigs!)

Post by Jonathan Robie »

OK, I'm beginning to learn the tools for understanding what's going on here. I've always been a server guy, fairly far from the user interface. Chrome's "inspect element" is very helpful here.

Both postbodies and message boxes seem to use the right fonts now, at least on my system.
ἐξίσταντο δὲ πάντες καὶ διηποροῦντο, ἄλλος πρὸς ἄλλον λέγοντες, τί θέλει τοῦτο εἶναι;
http://jonathanrobie.biblicalhumanities.org/
Jason Hare
Posts: 951
Joined: June 2nd, 2011, 5:28 pm
Location: Tel Aviv, Israel
Contact:

Re: Having problems viewing fonts? (Call for Guinea Pigs!)

Post by Jason Hare »

χαίρετε, ὦ φίλοι.

I use Firefox (most updated) on Windows 7, and it looks great for me with Arial Unicode in both the textbox and regularly. So far, so good.
Jason A. Hare
The Hebrew Café
Tel Aviv, Israel
Jonathan Robie
Posts: 4159
Joined: May 5th, 2011, 5:34 pm
Location: Durham, NC
Contact:

Re: Having problems viewing fonts? (Call for Guinea Pigs!)

Post by Jonathan Robie »

This is looking good even on Internet Explorer 6 running on SP2:

http://crossbrowsertesting.com/users/31 ... 487/public

Full results on all platforms tested here:

http://crossbrowsertesting.com/users/31 ... 732/public

Not sure how long those links will be alive, I suspect they will expire.
ἐξίσταντο δὲ πάντες καὶ διηποροῦντο, ἄλλος πρὸς ἄλλον λέγοντες, τί θέλει τοῦτο εἶναι;
http://jonathanrobie.biblicalhumanities.org/
Nigel Chapman
Posts: 74
Joined: June 3rd, 2011, 4:55 pm
Location: Sydney Australia
Contact:

Proposed JS Markup solution for Greek characters

Post by Nigel Chapman »

This post is intended to encapsulate all test cases for Greek markup, and specify a phpBB solution.

REQUIREMENTS

1. Inline Greek should be attractive and readable without disrupting the flow of the text.
2. Large blocks of Greek should have adequate line-spacing and should not use more than one tag per clause or sentence.
3. When Greek is embedded in a link (usually meaning a '/', '=' or '+' character immediately preceding), it should not be marked up as that would break the link.

EXAMPLES OF USAGE

1. With Cross Browser Compatibility, as Epictetus said, Τῶν ὄντων τὰ μέν ἐστιν ἐφ᾽ ἡμῖν, τὰ δὲ οὐκ ἐφ᾽ ἡμῖν. Long sample follows:

2. Τῶν ὄντων τὰ μέν ἐστιν ἐφ᾽ ἡμῖν, τὰ δὲ οὐκ ἐφ᾽ ἡμῖν. ἐφ᾽ ἡμῖν μὲν ὑπόληψις, ὁρμή, ὄρεξις, ἔκκλισις καὶ ἑνὶ λόγῳ ὅσα ἡμέτερα ἔργα: οὐκ ἐφ᾽ ἡμῖν δὲ τὸ σῶμα, ἡ κτῆσις, δόξαι, ἀρχαὶ καὶ ἑνὶ λόγῳ ὅσα οὐχ ἡμέτερα ἔργα. [2] καὶ τὰ μὲν ἐφ᾽ ἡμῖν ἐστι φύσει ἐλεύθερα, ἀκώλυτα, ἀπαραπόδιστα, τὰ δὲ οὐκ ἐφ᾽ ἡμῖν ἀσθενῆ, δοῦλα, κωλυτά, ἀλλότρια. μέμνησο οὖν, [3] ὅτι, ἐὰν τὰ φύσει δοῦλα ἐλεύθερα οἰηθῇς καὶ τὰ ἀλλότρια ἴδια, ἐμποδισθήσῃ, πενθήσεις, ταραχθήσῃ, μέμψῃ καὶ θεοὺς καὶ ἀνθρώπους, ἐὰν δὲ τὸ σὸν μόνον οἰηθῇς σὸν εἶναι, τὸ δὲ ἀλλότριον, ὥσπερ ἐστίν, ἀλλότριον, οὐδείς σε ἀναγκάσει οὐδέποτε, οὐδείς σε κωλύσει, οὐ μέμψῃ οὐδένα, οὐκ ἐγκαλέσεις τινί, ἄκων πράξεις οὐδὲ ἕν, οὐδείς σε βλάψει, ἐχθρὸν οὐχ ἕξεις, οὐδὲ γὰρ βλαβερόν τι πείσῃ. [4] τηλικούτων οὖν ἐφιέμενος μέμνησο, ὅτι οὐ δεῖ μετρίως κεκινημένον ἅπτεσθαι αὐτῶν, ἀλλὰ τὰ μὲν ἀφιέναι παντελῶς, τὰ δ᾽ ὑπερτίθεσθαι πρὸς τὸ παρόν. ἐὰν δὲ καὶ ταῦτ᾽ ἐθέλῃς καὶ ἄρχειν καὶ πλουτεῖν, τυχὸν μὲν οὐδ᾽ αὐτῶν τούτων τεύξῃ διὰ τὸ καὶ τῶν προτέρων ἐφίεσθαι, πάντως γε μὴν ἐκείνων ἀποτεύξη, δι᾽ ὧν μόνων ἐλευθερία καὶ εὐδαιμονία περιγίνεται. [5] εὐθὺς οὖν πάσῃ φαντασίᾳ τραχείᾳ μελέτα ἐπιλέγειν ὅτι "φαντασία εἶ καὶ οὐ πάντως τὸ φαινόμενον". ἔπειτα ἐξέταζε αὐτὴν καὶ δοκίμαζε τοῖς κανόσι τούτοις οἷς ἔχεις, πρώτῳ δὲ τούτῳ καὶ μάλιστα, πότερον περὶ τὰ ἐφ᾽ ἡμῖν ἐστιν ἢ περὶ τὰ οὐκ ἐφ᾽ ἡμῖν: κἂν περί τι τῶν οὐκ ἐφ᾽ ἡμῖν ᾖ, πρόχειρον ἔστω τὸ διότι "οὐδὲν πρὸς ἐμέ"

It looks like the 3rd requirement, which is the one that's technically complex, is something we needn't consider. The board simply won't accept links of that kind in the first place.

3.a. http://example.com/service/ἐστιν http://example.com/service.php?q=ἐστιν+ἐφ᾽+ἡμῖν
3.b. http://example.com/service/ http://example.com/service.php?q=ἐστιν+ἐφ᾽+ἡμῖν (and it won't accept Unicode even within URL tags)
3.c. Example 1 Example 2 (or when given explicitly as a href property)

IMPLEMENTATION

The most reliable way to grab a set of elements by class is to use a library like jQuery; it's a 30K library file, but allows for extremely powerful, concise and (most importantly) maintainable JS work. However, since phpBB's own JS is happy to use getElementsByTagName -- which I wasn't otherwise persuaded was widely-enough-supported -- I suggest we just go with that.

1. We create a function to do the markup, and trigger it on page load.

In styles/prosilver/template/forum_fn.js (anywhere, top is better)

Code: Select all

function markup_greek() { 
  var regexp = /([\u0370-\u037D\u0386-\u0386\u0388-\u03FF\u1F00-\u1FFF][\u0370-\u037D\u0386-\u0386\u0388-\u03FF\u1F00-\u1FFF\s]*[\u0370-\u037D\u0386-\u0386\u0388-\u03FF\u1F00-\u1FFF]?)/g;
  var markup = '<span class="greek">$1</span>';
  var divs = document.getElementsByTagName("DIV");
  for (var d = 0; d < divs.length; d++) {
    if (divs[d].className.indexOf('postbody') == 0) {
      divs[d].innerHTML = divs[d].innerHTML.replace(regexp, markup); 
    }
  } 
}

onload_functions.push('markup_greek()');  //  phpBB convention; this means execute when all page elements have loaded. 


This is inelegant in that it includes a single trailing space in the span, but appears robust and easily maintainable.

2. We define .greek in the CSS.

In styles/prosilver/theme/common.css (anywhere, but top is better)

Code: Select all

.greek {
    font-family: /* PRFERRED FONTS GO HERE,*/ "GFS Didot", serif;
    font-size: 115%;
    line-height: 125%;
}
We can add other preferred fonts to that list, but note that we won't have previewed them on every system. The point of using exactly 115% size is that seriffed Greek needs a boost to be optimally readable, but this size doesn't look out-of-place even if the remote font can't load for any reason; it still highlights the Greek text slightly.

3. We remotely embed GFS Didot in supported browsers, giving us an elegant design without requiring any user action, but which users can override if they prefer (by installing fonts we have preferred in the CSS). But our experience with Gentium has shown that results aren't always as expected. Though Gentium DOES look good at 115%.

In styles/prosilver/template/overall_header.html (at line 90-93).

Code: Select all

<link href='http://fonts.googleapis.com/css?family=GFS+Didot&subset=greek' rel='stylesheet' type='text/css'>
GFS Didot is only 78K compressed and will usually be cached by the browser after the first download, so the bandwidth effect is negligible.

TESTING

Try this in the TEST environment first, of course. I've tested the pieces individually with Firebug, and have checked the best locations for the changes against a downloaded phpBB codebase, but haven't run them all together on a working copy.

My only implementation concern is that onload_functions.push() may need to be set in the overall_header.html file. It shouldn't, but it might. Plenty of ways around that though.

Louis, you have my phone number if you need me to help troubleshoot any of this.
"When eras die their legacies are left to strange police." -- Clarence Day
Nigel Chapman | http://chapman.id.au
Post Reply

Return to “Questions”