Request: Adjust Graph Font Size, CSS Solution?

[okakajuice]

It’s a dirty hack but you can change font size and font family (default font is broken for me) by overwriting a PIXI API used to draw graph.

import { App, Plugin, PluginSettingTab, Setting } from 'obsidian';

interface GraphFontCustomizerSettings {
	fontSize: number;
	fontFamily?: string;
}

const DEFAULT_SETTINGS: GraphFontCustomizerSettings = {
	fontSize: 2.0,
}

export default class GraphFontCustomizer extends Plugin {
	settings: GraphFontCustomizerSettings;

	orig_text: any = undefined;


	async onload() {
		await this.loadSettings();

		if (this.orig_text === undefined) {
			this.orig_text = (window as any).PIXI.Text;
		}

		this.patchText();

		// This adds a settings tab so the user can configure various aspects of the plugin
		this.addSettingTab(new SampleSettingTab(this.app, this));
	}

	onunload() {
		if (this.orig_text !== undefined) {
			(window as any).PIXI.Text = this.orig_text;
		}
	}

	async loadSettings() {
		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
	}

	async saveSettings() {
		await this.saveData(this.settings);
	}

	patchText(): void {
		let fontSize = this.settings.fontSize;
		let fontFamily = this.settings.fontFamily;

		(window as any).PIXI.Text = class extends this.orig_text {
			constructor(...args: any[]) {
				if (args[1]) {
					args[1] = args[1].clone();
					args[1].fontSize *= fontSize;
					if (fontFamily !== undefined) {
						args[1].fontFamily = fontFamily;
					}
				}
				super(...args);
			}
		};
	
	}
}

class SampleSettingTab extends PluginSettingTab {
	plugin: GraphFontCustomizer;

	constructor(app: App, plugin: GraphFontCustomizer) {
		super(app, plugin);
		this.plugin = plugin;
	}

	display(): void {
		const {containerEl} = this;

		containerEl.empty();

		containerEl.createEl("p", { text: "Requires reopening graph to take effect." });

		new Setting(containerEl)
			.setName('Font size')
			.setDesc('Specify the font size as a multiplier applied to the default font size')
			.addText(test => test
				.setPlaceholder('2.0')
				.setValue(this.plugin.settings.fontSize.toString())
				.onChange(async (value) => {
					this.plugin.settings.fontSize = value == "" ? 2.0 : parseFloat(value);
					await this.plugin.saveSettings();
					this.plugin.patchText();
				}));

		new Setting(containerEl)
			.setName('Font familty')
			.setDesc('Specify the font family')
			.addText(test => test
				.setPlaceholder("Leave empty for default")
				.setValue(this.plugin.settings.fontFamily ?? "")
				.onChange(async (value) => {
					this.plugin.settings.fontFamily = value == "" ? undefined : value;
					await this.plugin.saveSettings();
					this.plugin.patchText();
				}));
	}
}

I don’t have energy to maintain a plugin somewhere, so just drops a zip here. Also, devs should just add proper knobs for these values…

graph-font-customizer.zip (5.5 KB)

[Alexbart]

Yes, please add this feature. It would be really super helpful.
Thank you so much.
A better graph-view and a better local graph-view would be a condition for me to really use Obsidian, also:

1- It would be great if the graph algorithm would prevent note titles to overlap
2- If text color could fit the node color.
3- Text of nodes, and nodes, bigger when it have many child notes. (the more child notes, the bigger. and a slidder to choose this) …this would help seeing much much more of the hierarchical structure than just the arrows.
4- Having a gravity up and down varying for nodes so that bigger nodes (see point 3) are like bigger balloons tending to live more up in the window, and smaller nodes (the ones with less childs) are sort of falling a bit. (tending to look like the hierarchical layout of juggl but not as ridgid, and also juggl becomes a messy and buggy with more nodes)
5- Also it would make graph view so much more powerful if we would be able to switch between differents settings of graph-views, settings with different tags selected.
6- Also sometimes the physics-moving can get annoying… can we make it finish it path faster?
7- Can we prevent to have the selected node showing off with the obsidian theme layout color? Could it keep it original node color? i’m starting to set various colors for various types of nodes using note tags, and he doesn’t make sense that a node color is changing when I click on it… (Because in that case I don’t remember what type of node is it) The selected node could have a circle around it to emphasis that it is selected, instead of getting its color changed for the theme color.

[Alexbart]

How to use this? (i have no idea)

[Alexbart]

…forgot to add: 8- An image contained in a note, could be displayed as a thumbnail in the graph-view itself, under the title of the note (in the case the note have various, maybe the last image of the note?) …and a slightly bigger version of the image could pop-up when we hover over it.

[Sphoorthy]

+1 ing this post coz, well something pops up on this topic.

[gperez]

Hi guys. I created a plugin to augment font size. It’s an alpha version so you’ll have to install it manually.

GitHub - libasoles/graph-view-text-size: Adjust text size in Obsidian Graph View

Feel free to create PRs, fork the repo, and provide feedback in the Issues tab on github.

Demo:

[NathanTew]

You’re amazing, thank you.

[jackgao]

I have been looking for this feature for an year, your plugin give me so much help, thanks a lot…!!!

[Alexbart]

I don’t know if it helps anyone, but I figure out that you can adjust Graf font size by simply decreasing link distance at the same time of decreasing node size (and while keeping centre force and repel force not too high) … After you do that, you just have to zoom in again, and voila! Instant bigger graph font size!

Also to mention, when starting to have many many notes, the only way to keep the Graf view really useful is to use filters + tags associated with colors… Filter to just show off certain type of notes of which you want to have an overview… And using colors for different types of notes to be able to see something in your mess. Then it’s becoming extremely useful and I’m super happy with it!

[asano]

I think the developers want us to create community plugins. The plugin 3D Graph New works quite well.

[chrischma]

+1 in 2025…