Skip to content

take character kerning into account #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

take character kerning into account #3

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3ab2a8d
wip kerning
ThatOneCalculator Aug 6, 2025
be04d28
more kerning work
ThatOneCalculator Aug 6, 2025
15e4261
Merge branch 'main' into kerning
ThatOneCalculator Aug 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 40 additions & 5 deletions shell.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,9 @@ PanelWindow {
property real slideOffset: Config.c.slideOffset ?? 30
property real animationDuration: Config.c.animationDuration ?? 600
property real titleDuration: Config.c.titleDuration ?? 7000
property real calculatedWidth: 100

width: textRow.width
width: textContainer.width // ?? calculatedWidth
height: MusicTitleFont.fontInfo.lineHeight

opacity: 0.0
Expand Down Expand Up @@ -163,9 +164,26 @@ PanelWindow {
}
}

Row {
id: textRow
spacing: bitmapTitle.characterSpacing
Item {
id: textContainer
width: calculateTextWidth()
height: MusicTitleFont.fontInfo.lineHeight

function calculateTextWidth() {
var totalWidth = 0;
for (var i = 0; i < bitmapTitle.text.length; i++) {
var charCode = bitmapTitle.text.charCodeAt(i);
var fontData = bitmapTitle.getFontForChar(charCode);
var charData = fontData.getCharData(charCode);
totalWidth += charData.xadvance;

if (i < bitmapTitle.text.length - 1) {
totalWidth += bitmapTitle.characterSpacing;
}
}
bitmapTitle.calculatedWidth = totalWidth;
return totalWidth;
}

Repeater {
model: bitmapTitle.text.length
Expand All @@ -175,20 +193,36 @@ PanelWindow {
property var fontData: bitmapTitle.getFontForChar(charCode)
property var charData: fontData.getCharData(charCode)
property real configScale: Config.c.scale ?? 2
property real calculatedX: bitmapTitle.calculateCharacterX(index)

source: fontData.fontImage
sourceClipRect: Qt.rect(charData.x, charData.y, charData.width, charData.height)

width: charData.width * configScale
height: charData.height * configScale
x: charData.xoffset * configScale
x: calculatedX + charData.xoffset
y: charData.yoffset // * configScale

smooth: false
}
}
}

function calculateCharacterX(charIndex) {
var xPos = 0;
for (var i = 0; i < charIndex; i++) {
var charCode = text.charCodeAt(i);
var fontData = getFontForChar(charCode);
var charData = fontData.getCharData(charCode);
xPos += charData.xadvance;

if (i < text.length - 1) {
xPos += charData.width;
}
}
return xPos;
}

function updateMusicInfo() {
var statusProc = Qt.createQmlObject(`
import Quickshell.Io
Expand Down Expand Up @@ -234,6 +268,7 @@ PanelWindow {

function showTitle() {
hideTimer.stop();
textContainer.calculateTextWidth();
isAnimating = true;
opacity = 0.0;
x = baseX - slideOffset;
Expand Down