Hi all!
Big picture:
I have custom widget: QListView with custom delegate which renders html table using QTextDocument on each row. I have requirement to align float numbers (in last column).
That means all float separators should be on the same position. The trick I did was using 2 inline divs which contains separated number:
<style type="text/css">
div { float:left;display:inline-block;width:50%; }
div.left { text-align: left; }
div.right { text-align: right; }
</style>
<table width=100% border=1>
<tr><td width=33%>2</td><td width=34%>2</td><td width=33% ><div class="right">3</div><div class="left">.6</div></td></tr>
</table>
<style type="text/css">
div { float:left;display:inline-block;width:50%; }
div.left { text-align: left; }
div.right { text-align: right; }
</style>
<table width=100% border=1>
<tr><td width=33%>2</td><td width=34%>2</td><td width=33% ><div class="right">3</div><div class="left">.6</div></td></tr>
</table>
To copy to clipboard, switch view to plain text mode
That works fine both in browser and QWebView. The problem is QTextDocument, where layout is broken. Where's the problem and how can I fix it? Is there some CSS limitation on QTextDocument?
Here's my PyQt code:
#!/usr/bin/env python3
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
html=\
'''
<style type="text/css">
div { float:left;display:inline-block;width:50%; }
div.left { text-align: left; }
div.right { text-align: right; }
</style>
<table width=100% border=1>
<tr><td width=33%>2</td><td width=34%>2</td><td width=33% ><div class="right">3</div><div class="left">.6</div></td></tr>
</table>
'''
web.setHtml(html)
doc.setDocument(web)
ly.addWidget(doc)
dlg.setLayout(ly)
dlg.show()
web = QWebView()
web.setHtml(html)
web.show()
sys.exit(app.exec_())
#!/usr/bin/env python3
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
html=\
'''
<style type="text/css">
div { float:left;display:inline-block;width:50%; }
div.left { text-align: left; }
div.right { text-align: right; }
</style>
<table width=100% border=1>
<tr><td width=33%>2</td><td width=34%>2</td><td width=33% ><div class="right">3</div><div class="left">.6</div></td></tr>
</table>
'''
app = QApplication(sys.argv)
dlg = QDialog()
web = QTextDocument()
web.setHtml(html)
doc = QTextEdit()
doc.setDocument(web)
ly = QHBoxLayout()
ly.addWidget(doc)
dlg.setLayout(ly)
dlg.show()
web = QWebView()
web.setHtml(html)
web.show()
sys.exit(app.exec_())
To copy to clipboard, switch view to plain text mode
Update:
It seems QTextDocument ignore CSS at all. HTML bellow has no impact (but works fine with QWebView).
<table width=100% border=1>
<tr><td width=33%>2</td><td width=34%>2</td><td width=33% ><div style="float:left;display:inline-block;width:50%;text-align:right;">3</div><div style="float:left;display:inline-block;width:50%;text-align: left;">.6</div></td></tr>
</table>
<table width=100% border=1>
<tr><td width=33%>2</td><td width=34%>2</td><td width=33% ><div style="float:left;display:inline-block;width:50%;text-align:right;">3</div><div style="float:left;display:inline-block;width:50%;text-align: left;">.6</div></td></tr>
</table>
To copy to clipboard, switch view to plain text mode
The same with QTextDocument.setDefaultStyleSheet
Added after 36 minutes:
According documentation, QTextDocument supports only subset of CSS . Fixed with table-in-table (cellpadding=0 cellspacing=0)
Bookmarks