How to set subscript and superscript on QRadioButton of Qt

Question

How to set subscript, superscript and other special characters in QRadioButton of Qt

Answer 1

You can try overriding the paintEvent() of QRadioButton (you will have to subclass it though) and draw the text using QPainter. Here is an example that you can use. I have tried it out and it works relatively well except for the size problem:

The override paintEvent(QPaintEvent* event) of my radio button is:

QRadioButtonRichtTextSupport.h

void QRadioButtonRichtTextSupport::paintEvent(QPaintEvent* event)
{
  // First draw the original content of the radio button - the circle and the plain text
  QRadioButton::paintEvent(event);

  // Get the rectangle of the paint event
  QRect _rect = event->rect();
  QPainter painter(this);
  painter.setRenderHint(QPainter::Antialiasing, true);

  // Erase the text - I have used a translation of 16 along the X axis
  // from the top left corner of the paint rectangle but there might be 
  // some less dirty way of doing this. Basically this is used to leave 
  // the circle of the radio button intact while erasing the text part
  painter.eraseRect(_rect.topLeft().x()+16, _rect.topLeft().y(), _rect.width()-16, _rect.height());

  // Translate the painter along the X axis with 16
  painter.translate(QPointF(16, 0));
  // Create a text document which supports rich text formatting
  QTextDocument label;
  label.setHtml(this->text());
  // and finally draw the text over the radio button starting from +16 along the X axis
  label.drawContents(&painter);
  painter.end();
}

Widget.cpp

Widget::Widget(QWidget *parent)
  : QWidget(parent)
{
  setLayout(&this->layout);
  // Create the custom radio button. Notice that I've also added a string argument (not present in the default constructor of QRadioButton)
  // to add the ability to set the text upon initialization. This is completely optional
  QRadioButtonRichtTextSupport* rbrt = new QRadioButtonRichtTextSupport("<b>Rich text</b><sup>abc123</sup>", this);
  this->layout.addWidget(rbrt);
}

The problem here is that I actually do set the text of the radio button (using setText(...)) and since the radio button doesn't support rich text formatting, you get a much wider radio button (the empty space after the text in the image above is actually where the raw text stood (in my case: <b>Rich text</b><sup>abc123</sup>). You will have to look more into this to see how to adjust the size so that you cut the "extra" space. Should be possible by also overriding the resizeEvent(QResizeEvent* event) of the custom radio button. You can use label.documentLayout()->documentSize() to get the size of the QTextDocument that you are using and then add the extra space (in my case I use the +16 along the X axis which alters the width).

If that's not an option for you for some reason composite widget seems to be the easiest way to go - create a widget with a horizontal layout, place a QRadioButton without text first followed by a QLabel with the text for the radio button.

The problem with UTF-8 is that it supports only a subset of superscript Latin (and Greek) letters (for example the moment you want to write superscripted q you are screwed). There might be something more complete in UTF-16 (which Qt supports also) so you might want to look into that if creating your own QRadioButton or creating a composite widget is not optimal for you.

Answer 2

According to the documentation, the QRadioButton does not provide the rich text format for its label (like e.g. QLabel). Surprising!

So, this is what I tried:

1. tgl1 ... radio button with rich text like QLabel but does not the expected
2. tgl2 ... using Unicodes (limited success as long as the necessary characters exist)
3. tgl3... compositing the radio button from multiple widgets
4. subclass QRadioButton to override painting.

Option 3 and 4 are the most general approaches. (There should be done some additional effort to improve the layout of 3. option. 4. option I left as exercise...)

Sample code:

#include <QApplication>
#include <QRadioButton>
#include <QButtonGroup>
#include <QGroupBox>
#include <QHBoxLayout>
#include <QLabel>
#include <QMainWindow>
#include <QVBoxLayout>

int main(int argc, char **argv)
{
  QApplication app(argc, argv);
  QMainWindow win;
  QGroupBox box;
  QVBoxLayout vBox;
  // radio button with mark-up
  QRadioButton qTgl1(QString::fromLatin1("Radio<sub>1</sub>"));
  vBox.addWidget(&qTgl1);
  // radio button exploiting Unicode extensively
  QRadioButton qTgl2(QString::fromUtf8("Radio\342\202\202"));
  // '2' as subscript ... U+2082 -> \342\202\202
  vBox.addWidget(&qTgl2);
  // fake a radio button with rich text by composition of widgets
  QHBoxLayout hBox3;
  QRadioButton qTgl3;
  hBox3.addWidget(&qTgl3);
  QLabel qLbl3(QString::fromLatin1("Radio<sub>3</sub>"));
  qLbl3.setTextFormat(Qt::RichText);
  hBox3.addWidget(&qLbl3);
  vBox.addLayout(&hBox3);
  box.setLayout(&vBox);
  win.setCentralWidget(&box);
  win.show();
  return app.exec();
}

And this is how it does look (in Windows 10):

Concerning the 2. option: there are some web pages which provide an overview about the available Unicode characters (and their code points).

Some sample Unicode code points:

• U+2070 ... U+2079: digits 0 ... 9 in superscript
• U+2080 ... U+2089: digits 0 ... 9 in subscript
• U+208A ... U+208E: characters "+-=()" in subscript

There might be others as well...