Is there a variance in DPI [font sizes] between QWebView and other QWidgets?

I have a QWebView that is showing HTML content styled with CSS:

body { font-size: 10pt; }

Within the same window, there is also a QTextEdit field where I adjusted the font like this:

QFont newFont;
newfont.setPointSize(10);
myEditField->setFont(newFont);

The issue is that the text displayed in the QWebView appears slightly larger than the one in QTextEdit. My hunch is that this difference is due to DPI settings.

Is there a way to ensure that both QWebView and QTextEdit display text at the same font size?

Thanks!

cssfontsqt4dpiqwebview

Answer №1

A detailed explanation of this issue was provided on the bug report website:

It seems that WebKit has a fixed assumption of 96 dpi as the resolution. This poses a challenge in changing how web content is rendered, as there are expectations for WebKit to display content similar to standard web browsers. For more information, you can also visit

The suggested solutions included:

Utilizing QWebView's setZoomFactor and setTextMultiplier functions which could help achieve the desired behavior (to match QWidget).

To calculate the zoom factor and text multiplier based on the current DPI, you can use the following code snippet:

QWidget* window = QApplication::desktop()->screen();
const int horizontalDpi = window->logicalDpiX(); 
m_view->setZoomFactor(horizontalDpi / 96.0);

By using QWebSettings::ZoomTextOnly, you can specifically apply zooming to the text content only.

Answer №2

When it comes to obtaining accurate DPI measurements, one effective method is utilizing QApplication. Here's an example:

QWidget* window = QApplication::desktop()->screen();
int horizontalDpi = window->logicalDpiX();

For font information, you can utilize QWidget::fontMetrics() to gather relevant data.

By combining these two approaches, you can achieve consistency between your web view and text edit functionalities.

Best of luck on your development endeavors!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a Jquery check based on a checkbox

Hey, I'm having an issue with a condition. When I uncheck the checkbox, it doesn't uncheck. I've tried to make a block display, but the JavaScript isn't working. I attempted to add: document.getElementById("Reload").style.display = "b ...

javascriptjqueryhtmlcssbootstrap-4

Using CDN to bring in Bootstrap, without triggering animations

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>E ...

htmlcssbootstrap-4

Flexbox styling using BootStrap's row class is a dynamic and versatile

Is there a way to create space between the four divs in the image below? https://i.sstatic.net/xHzbF.png As shown in the image, there are four divs aligned next to each other. The code for each individual div is: <div class="col-lg-3 col-md-4 co ...

htmlcssbootstrap-5

Developing Wordpress themes with varying H5 tag sizes across different pages

I'm struggling with a puzzling issue while developing a Wordpress theme. When I zoom in to 250% on mobile, all the header text stays the same size on every page except for one. On that particular page, the text appears significantly larger, almost as ...

csswordpressthemes

Differences Between Bootstrap Source Code and Bootstrap CDN Link

I am in the process of updating the user interface for my website, utilizing Bootstrap 5.3. Initially, I utilized the CDN link provided in the official documentation. Recently, I acquired Bootstrap Studio as a tool to streamline the UI development process. ...

htmlcssbootstrap-5

Fixed Header in GridView Causes Container Overflow

I have a gridview with a frozen header in a Div container. It works perfectly when the number of header columns in the gridview does not exceed the container's width, but if I add more header columns, it overflows the div container. https://i.sstatic ...

c#htmlcssasp.netgridview

Steps for Adjusting Column Heights in Bootstrap 4

Currently, I am experimenting with Bootstrap 4 and facing some challenges in setting the correct heights for my layout. The elements in my design include a "side nav", "header", "main", and "footer". My goal is to make the "main" section occupy most of th ...

htmlcssbootstrap-4

Struggling with aligning an image and text side by side in CSS

Struggling to get my text and image perfectly aligned horizontally? Despite being aligned, the image makes it seem otherwise. https://i.stack.imgur.com/u1QOh.png CSS Code: /* Copyright © 2016 Dynavio Cooperative */ .navbar { width: 100%; border ...

htmlcssimagecentervertical-alignment

List items are not appearing correctly on display

When attempting to design a basic navbar, I encountered an issue where the list items were stacking on top of each other instead of displaying horizontally as intended. The parent container has a position of relative, while the child is set to absolute. ...

htmlcss

Need assistance with CSS right now

I seem to be having trouble getting this to work correctly. I have a few menu items that require different background styles than the global settings. Here is the working global setting... #left #current a {background-image: url(../images/leftbuttonactiv ...

htmlcsscss-selectors

In Internet Explorer 11, border-radius creates a separation between elements

There is an issue with whitespace appearing around elements that have a border-radius larger than 0, but this only occurs in Internet Explorer. If using border-top-left-radius: 20px; and border-top-right-radius: 20px;: https://i.sstatic.net/MAKsx.png *W ...

htmlcsstwitter-bootstrap-3internet-explorer-11

Transform in-line elements using specific HTML attributes using CSS styling

Can you achieve this with links (a[href="/"]{_/*CSS declarations.*/_})? For instance: #example > .meow span[style="color:red;"] { text-transform: lowercase; } #example > .woof span[title="I'm a dog."] { color: blue; text-decorat ...

htmlcssattributes

Bootstrap sticky footer with adjustable height

Striving to achieve a sticky footer with a custom height on my website has turned out to be more challenging than I initially expected. Presented below is a snapshot of the current state of my footer: https://i.sstatic.net/SXaTA.png The issue arises whe ...

htmlcsstwitter-bootstrapfootersticky

Activate the scroll bar for a container with a fixed position

I have a sidebar with fixed positioning that contains a list of links: <nav id="fixedNav"> <div class="anchors"> <ul> <li><a href="#">test 1</a></li> <li><a href="#">tes ...

cssscrollscrollbarfixed

Fonts displayed on websites may look different on Mac compared to Windows

After carefully selecting a Google Web Font to use as the main font for my website, I noticed that it appears slightly different in terms of dimensions and spatial conformations when displayed on both Mac and Windows computers. For more information about ...

cssmacosfonts

What is the best way to use JavaScript to fill in missing images with alternative HTML content?

As a provider of a service that helps users find the location of pictures, I face a challenge due to the fact that the pictures are stored on another internal site. Some users may not have access to this site as my service offers additional information. Th ...

javascripthtmlcss

Describe the CSS that targets pseudo-elements on an individual element

Perhaps a Repetition: CSS Pseudo-classes with inline styles Could an example like this work... <span style="this:hover{color:blue}">Changes color to blue when hovered</span> ...be doable? ...

cssinlineelementthis

When is it appropriate to utilize the prefixes -moz, -webkit, -o within CSS rather than just using basic properties?

When building WordPress themes, is it necessary to use all browser properties instead of just one? For example, we have written the following code for the "transition" property: transition: all 350ms ease-in-out; We see that this works in all modern ver ...

htmlcss

The media query for mobile is not functioning properly

Hello, I have a page with MVC that includes CSS for iPad and mobile devices. The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile ...

cssmobilemedia-queries

Are there any CSS styles available for targeting an element with any id?

I need to style h2 tags in HTML documents that have an id attribute, without styling the ones without an id. I want to achieve this using only CSS and not by modifying the HTML structure. Specifically, I want to target these h2 elements with a CSS rule: ...

htmlcss