yuyuvn / KanColleViewer

Support both Horizontal & Vertical in one version
MIT License
109 stars 52 forks source link

Feature Request: Better Text Rendering #13

Open RadarNyan opened 9 years ago

RadarNyan commented 9 years ago

flash  directwirte Font rendering on Windows is shit, especially when it comes to CJK characters. If you compare the text shown in-game (left side, Saffron used in flash) and the text displayed in KCV (right side, DirectWrite-Cleartype?), it's not hard to find out flash renders text way better.

The problem is, even if DirectWrite do supported anti-aliasing on y-direction, it's not used for most CJK fonts (including what's used in KCV - Meiryo UI?) since they have hinting information which causes strong B/W rasterizer on y-direction.

Here's two method I can think of that could make the text rendering better for KCV:

1.Set DWRITE_RENDERING_MODE to DWRITE_RENDERING_MODE_OUTLINE

Specifies that rendering should bypass the rasterizer and use the outlines directly. This is typically used at very large sizes. source: https://msdn.microsoft.com/en-us/library/jj710196.aspx

Discard it sais that this mode is intend to be used for very large sizes, the point is it bypasses the rasterizer, which means the font will be rendered without grid-fitting (a.k.a hinting) - truth provides a better result for CJK characters.

2. Change to a custom font that do not have hinting information

I have successfully used this method in IE11 with a DIY font. Most CJK fonts on Windows contains hinting information (and most of them sucks) which means it's hard to find such a font. If possible, please go with the first method.


Off topic: If you don't understand how hinting could be bad for CJK characters, check this link

yuyuvn commented 9 years ago

I have tested some methods to improve text rendering. It seem the most effective way is change to a font contains embedded bitmaps.

capture

Line 1: Font Meiryo UI Line 2: Font Meiryo UI with TextFormattingMode="Display" Line 3: Font MS Gothic, Batang (for korean) Line 4: Font MS Gothic, Batang with TextFormattingMode="Display"

http://blogs.msdn.com/b/text/archive/2009/08/24/wpf-4-0-text-stack-improvements.aspx

RadarNyan commented 9 years ago

1-kcv 1-ie

I'm no programmer so I created a mock-up in IE. On the left there's a screenshot from KCV for comparision.

AFAIK, KCV currently renders font at a GDI-Cleartype style (I tried to replace font but it turns out all jagged - no vertical aa. In my mock-up I used Meiryo UI but without font hinting (rendered by IE11's DirectWrite) As you can see it's not as sharp as in KCV, but the font renders in a better shape (although a bit blurred) I personally prefer shape over sharp, but that's just a personal taste.

![Uploading 1.5-kcv.png . . .]()

The thing is, when it comes to today's high dpi screens, there's no doubt that DirectWrite would be much better than old GDI-Cleartype

RadarNyan commented 9 years ago

(sorry about that close&reopen, hit the wrong button by accident)

1-kcv  1-ie

I'm no programmer so I created a mock-up in html and renders it in IE11 (which uses DirectWrite) Left: KCV (GDI-Cleartype?)  Right: mock-up (DirectWrite)

As you can see in the mock-up, the texts are not as sharp as in KCV, but the shape is over all better (check "霧" for example. I got some worse cases in the link at the end of OP) I prefer correct shape over sharp but that's just a personal taste. BTW, I thought KCV renders font using DirectWrite but when I tried to replace the font with a modded one (no hinting) it turns out jagged - just like the old GDI-Clertype.

1 5-kcv  1 5-ie

The thing is, when it comes to today's high dpi screens, there's no doubt DirectWrite overrun the old GDI-Cleartype. As you can see, GDI-Cleartype doesn't even align the text vertically, not to mention the shape is still messed up even in 150% zoom.

xupefei commented 9 years ago

In fact the DirectWrite in IE11 is tweaked by MS, which appears different with in other applications.

I found that the Yu Gothic font that shipped with Windows 8.1 (https://msdn.microsoft.com/en-us/library/windows/apps/dn263115.aspx#Japanese_fonts_in_Windows_8.1) have the best performance under all font sizes, while MS Gothic in small FontSize is a bitmap font.

Here is the screenshot with Yu Gothic and MS Gothic: yu gothic

ms gothic

Because this font only exists in Windows 8.1 OS, I think it is better to use FontFamily="Yu Gothic,MS Gothic" to specify the fallback font.