Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

"Vertical" fonts not rendering

Status
Not open for further replies.
OsakaWebbie

OsakaWebbie

Programmer
Feb 11, 2003
628
JP
Background info: In languages where vertical writing is possible (in my case, Japanese), fonts come in two flavors: the regular one for horizontal writing, and the same font name with "@" in front of it for vertical writing (the only difference is that the characters are sideways, like ">" instead of "V"). Japanese versions of installed software such as Word do not show the "@ fonts" in the font list, but automatically use them when the document is set to vertical writing.

Situation: I have an online app that (among other things) lays out data from a database for printing on envelopes. I need to use those "@ fonts" to get things to work right. I set the font in CSS, but of the four browsers I have on my machine to test, IE and Opera work, but Firefox and Safari for Windows do not. In the case of FF and Safari, it appears like the browser ignores the @ and just uses the regular version of the font. I know this is probably an obscure question for an English-based forum, but does anyone have any experience with anything like this, or even just clues as to what I could try in order to force the browser to use those fonts?
 
Sort by date Sort by votes
I've not got one of these fonts to test (perhaps you can make one available to download?)... but have you perhaps tried setting the font using JS instead of in CSS?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Dan, to reduce copyright problems with font files, I have submitted a form email on your website with the location of a sample HTML output (UTF-8, with some text in Japanese, including the font name) and the relevent font pack. The code is generated by various pieces of data from a database, both for formatting the envelope (the CSS) and for the names & addresses. Even the font name is a piece of database data.

I'll try JS, but it'll require a little time - I don't instantly know the names of the DOM objects I need to access and the name of the parameter for the "font-family", so I'll need to do that research. Of course, if you know off the top of your head before I get a chance to do it, by all means let me know.
 
Upvote 0 Downvote
Update: I tried (in vain) to do it with Javascript, and in the process discovered something I didn't realize: FF and Safari are ignoring my font-family designations entirely! It has nothing to do with @ fonts or Japanese fonts.

So I made a simplified version of the kind of HTML/CSS that is in my application, plus a bit of JS I added but doesn't work (in any browser) - the error is probably something really silly but I can't see it. Here you go:
Code: 
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
#test1 {
    font-family: "serif";
    font-size: 40px;
}
#test2 {
    font-family: "sans-serif";
    font-size: 25px;
}
</style>
<script type="text/javascript">
window.onload=setfont;
function setfont() {
  document.getElementById('test1').fontSize = "10px";
}
</script>
</head>
<body>
    <div id="test1">
      Test1 - should be serif
    </div>
    <div id="test2">
      Test2 - should be sans-serif
    </div> 
</body>
</html>
I had more in my JS originally, but when I wasn't seeing it respond, I simplified it to just do one obvious action (shrink the first line of text to 10px), but I never see it happen.

I have tested this little code snippet in Firefox 3.5.5 and Opera 10.10. In Opera I see the first line in a serif font, but in FF I don't.

Occluded in Osaka,
Karen
 
Upvote 0 Downvote
Hi

Code: 
window[teal].[/teal]onload[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'test1'[/i][/green][teal])[highlight].[/highlight][/teal][highlight]style[/highlight][teal].[/teal]fontSize [teal]=[/teal] [green][i]"10px"[/i][/green][teal];[/teal]
[teal]}[/teal]

Feherke.
 
Upvote 0 Downvote
Have you tried it without the quotes around serif and sans-serif?

The reason is that these are keywords that mean "pick a font on this machine that is (sans) serif". By putting them in quotes, FF/Saf are probably looking for fonts with those particular names instead.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Have you tried it without the quotes around serif and sans-serif?
Click to expand...
That causes even Opera to stop showing the first line in a serif font. And naturally my real code doesn't use "serif" or "sans-serif" but an actual font name, which starts with "@" and continues with Japanese characters - what you see in my previous post is very simplified.

Feherke, thanks for the little correction to my DOM structure. It's strange that I didn't get some sort of error about fontSize/fontFamily/etc. not being valid properties of the DIV object... I guess I can't always trust my error console.

Now that the JS actually runs, I see that what works in CSS or JS is really unpredictable - all four of my browsers behave differently. And I don't get the full picture until I actually try an @font. The attached file is a screen shot of the following new test code. Sorry for the Japanese text, but that's the only way to know for sure what is going on (if you don't have a Japanese font on your computer, the font name and the Japanese text in the code below will be garbled, but you should be able to get the idea by my naming conventions and the attached screenshot). The font I am assigning is a standard Japanese Windows serif fixed-space font that I almost never use, but it's easy to recognize in the test (note the tallish typewriter look).
Code: 
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
#cssnormal { font-family: "?? ??"; }
#cssat { font-family: "@?? ??"; }
</style>
<script type="text/javascript">
window.onload=function() {
  document.getElementById('jsnormal').style.fontFamily = "?? ??";
  document.getElementById('jsat').style.fontFamily = "@?? ??";
}
</script>
</head>
<body style="font-size:20px;font-weight:bold">
    <div id="cssnormal">CSS Normal - ???</div>
    <div id="cssat">CSS @font - ???</div> 
    <div id="jsnormal">JS Normal - ???</div>
    <div id="jsat">JS @font - ???</div>
</body>
</html>
So IE is the only browser that shows @fonts from both CSS and JS, Opera only shows them if from CSS, and FF and Safari not at all. Curiously, in Safari CSS, the browser substitutes the non-@ equivalent, whereas Safari JS, Opera JS, FF CSS, and FF JS revert to the browser's default font.

Is there another solution? This code will be used in a semi-closed environment, so I don't need wide browser support, but I'm tired of using only IE for this - my first choice would be Firefox if I can get it to work somehow.
 
 http://proverbs2525.org/tektips/at-fonts.jpg
Upvote 0 Downvote
I only have Fx 3.0.15 installed on this laptop, and it doesn't work on that... but perhaps Safari or Fx 3.5 might suport the CSS3 property "glyph-orientation-vertical"?


Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Reading the page you referenced, it sounds like "glyph-orientation-horizontal" is actually the one that would apply to me, because I'm not really using vertical mode in the browser (if I did, the user would have to feed the envelopes open-end first, which I'm afraid would jam in the printer). I would dread having to detect each character to see if it is Japanese or Western to see whether I would need to apply it or not, but it would have been possible, anyway.

But it does not appear to work in Firefox 3.5.5, Opera 10.10, Safari for Windows 4.0.4 (Japanese version, no less!), or IE 8 Japanese. Here is the code I used to test - if there is something I missed, let me know:
Code: 
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
.at { font-family: "@?? ?????"; }
.normal { font-family: "?? ?????"; }
.rotated { glyph-orientation-horizontal: 270; }
</style>
</head>
<body style="font-size:20px;font-weight:bold">
    <div class="normal">Normal Gothic Font ???</div>
    <div class="at">Gothic At Font ???</div> 
    <div class="normal rotated">Gothic Font Rotated ???</div>
    <div class="rotated">Default Font Rotated ???</div>
</body>
</html>
So I guess I'm still stuck with IE. I need print setting controls, for which there are plugins for IE and Firefox, but the plugin for IE is finicky (and I simply don't like IE). Opera works with the @fonts, but it's not as common a browser and doesn't have a plugin for print controls, as far as I know.

Actually, to deal with these issues and several others that are print-layout related (like spotty support for flowing two-column layouts, "page-break:avoid", "ruby" text, etc.), I have considered trying to learn how to make a PDF programmatically server-side, but the learning curve looks pretty steep, and there is still no guarantee that I would be able to control everything that needs controlling. If anyone has experience with dynamic PDF generation who can tell me if it's worth making the effort to learn, let me know.
 
Upvote 0 Downvote
Yeah, from doing a Google search to find examples, I see that you're right. But it still doesn't do anything in my three non-IE browsers. There is something mentioned on the Opera website called "Opera Presto 2.2" that supposedly supports it, but that's apparently not a browser (interestingly, the site doesn't seem to describe what it is at all, only what CSS properties it supports).
 
Upvote 0 Downvote
Is this issue dead in the water? It got quiet. [sleeping2]

I'm really thinking about learning dynamic PDF creation (when I get the time - that would be a big project, I know). I know this isn't exactly the forum for that (PHP, perhaps), but if anyone has a link to a good tutorial or something, let me know.
 
Upvote 0 Downvote
One more bump, and if I still don't hear anything, I'll give up and let this thread die...[cry]
 
Upvote 0 Downvote
Okay, thanks! I'm not likely to work on it in the meantime unless someone else has a revelation, because I'm at the end of my ideas.

P.S. Can you send some of that thermal energy up here?[sunshine] We have sunshine in Japan also this time of year, but it doesn't seem to do much...[frosty]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
402
spamjim
spamjim
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
136
ChrisHirst
ChrisHirst
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
88
pendle666
pendle666
k4ghg
  • Locked
  • Question
Liquid vertical bar 1
Replies
2
Views
95
k4ghg
k4ghg
lupidol
  • Locked
  • Question
input:hover[type=&quot;submit&quot;] 1
Replies
4
Views
210
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top