Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QtWebKit rotates glyphs in vertical layout



  • Hi Everyone,

    I would like to render Asian scripts in vertical mode. The WebKit version in PySide 1.2.1 (which we currently use) is AppleWebKit 534.34 does rot rencer it correctly. Even PyQt5 (5.1.1) AppleWebKit 537.21 has the same issue.

    A recent Chrome browser renders this fine. This is what it should look like:

    "Nice example":https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/css3writingModes/japanese.html

    When I render through Qt/Webkit, it comes out with all glyphs rotated 90 degrees to the right.

    Is there any way to fix this?

    Example:

    @#!/usr/bin/python

    -- coding: utf-8 --

    '''
    Created on Jan 8, 2014

    @author: PA
    '''
    import sys
    from PySide.QtCore import *
    from PySide.QtGui import *
    from PySide.QtWebKit import *

    content = r'''

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Japanese vertical layout example</title>
    <style>
    html {
    font-size: 10px;
    width: 100%;
    }
    body {
    font-size: 1.5rem;
    background-color: #eee;
    }

        article {
            width: 1280px;
            margin: 2rem auto;
            padding: 5rem 0;
    
            background-color: white;
            box-shadow: 0 0 5px silver;
            font-family: "Meiryo", sans-serif;
            color: #555;
        }
        header {
            width: 100%;
            height: 34rem;
            margin-bottom: 8rem;
    
            background-image: url("https://dl.dropbox.com/u/444684/OpenWebDemos/css3writingModes/images/2752501599_bdfb7a9258_b.jpg");
            background-size: 100% auto;
            
            -ms-writing-mode: tb-rl; /* old syntax. IE */
            -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: vertical-rl;
            writing-mode: vertical-rl; /* new syntax */      
        }
        
        h1 {
            text-shadow: 0 1px 1px grey;
            color: white;
            font-weight: bold;
            font-size: 3rem;
            padding: 11rem 12rem 0 0;     
        }     
        section {
            -ms-writing-mode: tb-rl; /* old syntax. IE */
            -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: vertical-rl;
    
            font-size: 1.2rem;
            margin-left: 5rem;
            height: 30rem;            
        }
        
        section p {
            text-indent: 1.3rem;
            margin: 0;
            text-align: justify;
        }  
        
        footer { 
            margin: 0 auto;
            width: 1280px;
            color: grey;
        }
    &lt;/style&gt;
    

    </head>
    <body>
    <article>
    <header>
    <h1>八幡平</h1>
    </header>
    <section>
    <h2>特徴</h2>
    <p>国立公園八幡平地域は40,489haの広さがあり、ほとんどが国有林である。手つかずの山岳公園で、アオモリトドマツやブナの原生林、山稜、湿原、噴気などの自然環境に多用な動植物が形成されている。</p>
    <p>およそ100万年前に噴出したいくつかの火山でできている。山頂部のなだらかな様子から楯状火山とされていたが、現在では山頂が台地状になった成層火山だといわれている。頂上部には9千~5千年前に発生した水蒸気爆発により多くの火口ができている。その火口に水がたまり、八幡沼やガマ沼、メガネ沼などの沢山の火口沼が作られている。周囲には広大な湿原や針葉樹林帯が形成されている。</p>
    <p>伝説によると、桓武天皇の勅命で奥州蝦夷征伐に訪れた坂上田村麻呂は、山賊の残党を追う途中に八幡平にたどり着き、その極楽浄土のような景色に感激した。そこで、戦の神である八幡神宮を奉り戦勝を祈り、残党を討伐後に再度高原の八幡神宮を訪れ、戦勝の報告を行うとともに、この地を「八幡平」と名付けたとされる。ただ、史実では坂上田村麻呂はこの地には至っていない。</p>
    <p>八幡平一帯は地形がゆるやかで、残雪が豊富なことから沼や湿原が多い。湿原にはさまざまな高山植物や湿原植物の群落が発達している。
    </p>
    <p>八幡平山頂には二等三角点がある。あまりに平らで山頂らしくないということで、1962年に岩手県によって土盛りが行われた。それが崩れてきたので、1986年に国立公園指定30周年を記念して現在の展望台が作られた。展望台は老朽化のために、2012年11月に建て替えられた。</p>
    <p>1993年に頂上付近の見返峠の駐車場で料金徴収が開始された。これは、有料道路であった八幡平アスピーテラインの無料化と松川温泉と藤七温泉を結ぶ樹海ラインの開通により、利用者の急増に対応するために、利用者に自然を守るための応分の負担を求めるためである。駐車料金は、公園施設の維持管理と美化清掃などの費用として使われている。</p>
    </section>

    </article>
    <footer>
        <small lang="en">Text taken from the Japanese Wikipedia article for <a href="http://ja.wikipedia.org/wiki/八幡平" hreflang="ja">Mount Hachimantai</a>. Image <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">by-nc-sa</a>, some rights reserved by <a href="http://www.flickr.com/photos/jasohill/2752501599/sizes/l/in/photostream/">jasohill</a>.</small>
    </footer>
    

    </body>
    </html>

    '''

    app = QApplication(sys.argv)

    web = QWebView()
    web.setContent(content)
    web.show()

    sys.exit(app.exec_())@



  • Here is a fairly minimal repro with plain Qt (no PySide)

    @#include <QApplication>
    #include <QtWidgets>
    #include <QtWebKitWidgets>

    int main(int argc, char *argv[])
    {
    QApplication a(argc, argv);
    QWebView view;
    QString html = "<html>"
    "<head><title>Vertical Text</title>\n"
    "<meta http-equiv="content-type" content="text/html;charset=utf-8">\n"
    "</head>\n"
    "<style>\n"
    "<!--\n"
    ".vert {\n"
    "direction:ltr;\n"
    "-webkit-writing-mode: vertical-rl;\n"
    "font-size:20pt;\n"
    "font-family: "Times New Roman", sans-serif;\n"
    "}\n"
    ".vert p {\n"
    "text-indent:2em"
    "}\n"
    "-->\n"
    "</style>\n"
    "<body class="vert">\n"
    "<div>\n"
    "<p>退而深惟曰:『夫詩書隱約者,欲遂其志之思也。昔西伯拘羑里,演周易;孔子戹陳蔡,作春秋;屈原放逐,著離騷;左丘失明,厥有國語;孫子臏腳,而論兵法;不韋遷蜀,世傳呂覽;韓非囚秦,說難、孤憤;詩三百篇,大抵賢聖發憤之所為作也。此人皆意有所鬱結,不得通其道也,故述往事,思來者。』(史記 · 太史公自序)</p>\n"
    "</div>\n"
    "</body>\n"
    "</html>";

    view.page()->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
    QWebInspector inspector;
    inspector.setPage(view.page());
    
    view.setHtml(html);
    inspector.show();
    view.show();
    
    return a.exec&#40;&#41;;
    

    }@


Log in to reply