Nominate our 2022 Qt Champions!

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":

    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?



    -- 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">
    <meta charset="utf-8" />
    <title>Japanese vertical layout example</title>
    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("");
            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;


        <small lang="en">Text taken from the Japanese Wikipedia article for <a href="八幡平" hreflang="ja">Mount Hachimantai</a>. Image <a href="">by-nc-sa</a>, some rights reserved by <a href="">jasohill</a>.</small>



    app = QApplication(sys.argv)

    web = QWebView()


  • 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"
    ".vert {\n"
    "-webkit-writing-mode: vertical-rl;\n"
    "font-family: "Times New Roman", sans-serif;\n"
    ".vert p {\n"
    "<body class="vert">\n"
    "<p>退而深惟曰:『夫詩書隱約者,欲遂其志之思也。昔西伯拘羑里,演周易;孔子戹陳蔡,作春秋;屈原放逐,著離騷;左丘失明,厥有國語;孫子臏腳,而論兵法;不韋遷蜀,世傳呂覽;韓非囚秦,說難、孤憤;詩三百篇,大抵賢聖發憤之所為作也。此人皆意有所鬱結,不得通其道也,故述往事,思來者。』(史記 · 太史公自序)</p>\n"
    "</html>";>settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
    QWebInspector inspector;
    return a.exec&#40;&#41;;


Log in to reply