Having problems viewing fonts? (Call for Guinea Pigs!)
-
- Posts: 74
- Joined: June 3rd, 2011, 4:55 pm
- Location: Sydney Australia
- Contact:
Re: Having problems viewing fonts? (Call for Guinea Pigs!)
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
Nigel Chapman | http://chapman.id.au
-
- Posts: 3351
- Joined: May 11th, 2011, 10:51 am
- Location: Melbourne
- Contact:
Re: Having problems viewing fonts? (Call for Guinea Pigs!)
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
Stephen C. Carlson, Ph.D.
Melbourne, Australia
Melbourne, Australia
-
- Posts: 4159
- Joined: May 5th, 2011, 5:34 pm
- Location: Durham, NC
- Contact:
Re: Having problems viewing fonts? (Call for Guinea Pigs!)
OK, I demoted it: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.
Code: Select all
font-family: "Arial Unicode MS", "Liberation Sans", Tahoma, "Lucida Grande", sans-serif;
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/
http://jonathanrobie.biblicalhumanities.org/
-
- Posts: 3351
- Joined: May 11th, 2011, 10:51 am
- Location: Melbourne
- Contact:
Re: Having problems viewing fonts? (Call for Guinea Pigs!)
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
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
Melbourne, Australia
-
- Posts: 4159
- Joined: May 5th, 2011, 5:34 pm
- Location: Durham, NC
- Contact:
Re: Having problems viewing fonts? (Call for Guinea Pigs!)
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/
http://jonathanrobie.biblicalhumanities.org/
-
- Posts: 3351
- Joined: May 11th, 2011, 10:51 am
- Location: Melbourne
- Contact:
Re: Having problems viewing fonts? (Call for Guinea Pigs!)
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.)
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
Melbourne, Australia
-
- Posts: 4159
- Joined: May 5th, 2011, 5:34 pm
- Location: Durham, NC
- Contact:
Re: Having problems viewing fonts? (Call for Guinea Pigs!)
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.
Both postbodies and message boxes seem to use the right fonts now, at least on my system.
ἐξίσταντο δὲ πάντες καὶ διηποροῦντο, ἄλλος πρὸς ἄλλον λέγοντες, τί θέλει τοῦτο εἶναι;
http://jonathanrobie.biblicalhumanities.org/
http://jonathanrobie.biblicalhumanities.org/
-
- Posts: 951
- Joined: June 2nd, 2011, 5:28 pm
- Location: Tel Aviv, Israel
- Contact:
Re: Having problems viewing fonts? (Call for Guinea Pigs!)
χαίρετε, ὦ φίλοι.
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.
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
The Hebrew Café
Tel Aviv, Israel
-
- Posts: 4159
- Joined: May 5th, 2011, 5:34 pm
- Location: Durham, NC
- Contact:
Re: Having problems viewing fonts? (Call for Guinea Pigs!)
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://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/
http://jonathanrobie.biblicalhumanities.org/
-
- Posts: 74
- Joined: June 3rd, 2011, 4:55 pm
- Location: Sydney Australia
- Contact:
Proposed JS Markup solution for Greek characters
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)
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)
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).
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.
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%;
}
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'>
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
Nigel Chapman | http://chapman.id.au