Ionic zoom on text

Ionic Framework ionic-v3
1

Hey there,

I’ve been struggling with zooming in for a while.
What I want to do is zoom in on a piece of text inside of a div using the regular gestures you use on an image. This is what I found and have been messing around with. I know that the zoom attribute has to be inside a ion-scroll, besides that I have no idea what’s missing or faulty.

Here’s my code.

<ion-scroll zoom="true" overflow-scroll="false"><div>{{ child.information }}</div></ion-scroll>

The text being loaded is from a JSON file.

Info: I’m using ionic3. I’ve tried zooming=“true” , but I think that’s for ionic 1.

Thanks in advance!

2

Did you find a solution? I woudl like to make the whole page of text zoomable (it seems to be scrollable already)

3

The solution I found wasn’t practical. I’ve decided not to use it after all, until there is a clean solution for it.

4

Have I understood right, that you want to zoom our text? Not the whole app, images etc., only text, for maybe better readabillity. Maybe you can use text scaling instead.

Maybe you can use in your html tag

[ngStyle]="{ 'color': color, 'font-size': size, 'fontFamily': font }"

where color, font and size are propertys in our .ts, which you can controll as you want. ‘font-size’ points to css, size points to your property. I prefer em as font scaling.
Look to the ‘’ because ‘color’: ‘red’ gives a red color and ‘color’: red points to property named red . Also look to difference in css with ; and here with ,

best regards, anna-liebt.

5

I was look for pinch-zoom for text in my app, I settled for changing the font size as you suggested. Works great. Thank you.

6

Hay I’m also looking for the same and some how I manage to do so my creating custom directive which watch content pinch event and based on it scale property it sets the font size.

Here is my directive code

import { Directive, ElementRef, Input, OnInit, OnDestroy, Renderer } from '@angular/core';
import { Gesture } from 'ionic-angular/gestures/gesture';

@Directive({
	selector: '[pinch-zoom]'
})
export class PinchZoomDirective {
	el: HTMLElement;
	pinchGesture: Gesture;
	scale = 1;
	last_scale = 1;

	constructor(el: ElementRef,private renderer: Renderer) {
		this.el = el.nativeElement;
	}

	ngOnInit() {
		this.pinchGesture = new Gesture(this.el);
		this.pinchGesture.listen();
		this.pinchGesture.on('pinch', ev => {
			this.scale = Math.max(.999, Math.min(this.last_scale * (ev.scale), 4));
			this.last_scale = this.scale;
			let fontSize = this.scale * 25;
			let textElement = this.el.getElementsByClassName('style-ayah');
			if (textElement.length > 0) {
				this.renderer.setElementStyle(textElement[0], 'font-size', fontSize+'px');
			}
		});
	}

	OnDestroy() {
		this.pinchGesture.destroy();
	}

}

I don’t know is it correct way to do but it woks for me :grinning:

1 Like