Jspdf: How to mix bold and normal text in same line.

[darklilium]

Hello, im trying to mix some bold text with normal text like this (at the same line):

Hello im Eve.

I tried to do something like this:
doc.text(30, 230, "Hello, i am Eve");
is there any implementation for this? (im trying to make a formal letter).
Thanks!

[Uzlopak]

Well, to this point only by using html feature

[darklilium]

How? is there any example to do that?
Thanks in advice

[hahnch]

Hi, did you figured out a solution for your problem? I have the same problem.
Thank you in advance.

[darklilium]

Nop.

[Uzlopak]

Actually...

var doc = new jsPDF()

doc.setFontSize(40)
doc.fromHTML( 'Paranyan <b>loves</b> jsPDF', 35, 25)

[Uzlopak]

Duplicate of #616

[ekjensen]

Actually...

var doc = new jsPDF()

doc.setFontSize(40)
doc.fromHTML( 'Paranyan <b>loves</b> jsPDF', 35, 25)

I attempted to do this, and loves did show up bold. But each word showed up on a new page.

[rajprabhuRP]

By using X and Y position of the text we can change the particular text to bold.

For example,

                docs.setFontType('bold');
                docs.text(xAxes=10, yAxes = 20 + i * 5 , "Device: ")
                docs.setFontType('normal');
                docs.text(25, yAxes = 20 + i * 5 , detail.deviceCode);
                docs.setFontType('bold');
                docs.text(xAxes=10, yAxes = 27 + i * 5 , "Device Name: ");
                docs.setFontType('normal');
                docs.text(xAxes=38, yAxes = 27 + i * 5 , detail.deviceName);
                docs.setFontType('bold');
                docs.text(xAxes=10, yAxes = 34 + i * 5 , "Created: ");
                docs.setFontType('normal');
                docs.text(xAxes=28, yAxes = 34 + i * 5 , detail.deviceCreatedOn);
                docs.setFontType('bold');
                docs.text(xAxes=10, yAxes = 41 + i * 5 , "Readings: " );
                docs.setFontType('normal');
                docs.text(xAxes=31, yAxes = 41 + i * 5 , detail.commonInterval + " mins");

[iParthaSarathi]

use this function it will help to fixed those problem
https://github.com/psFrankenstein/jsProblem.git

[AndreKelling]

got a solution for one line text. similar to @rajprabhuRP one's above.

it's about printing normal and bold text separate after each other. where bold text is wrapped in double asterix markers.

// setup config
let startX = 12;
const fontSize = 13;
const doc = new jsPDF("p", "pt");
doc.setFont("arial")
  .setFontSize(fontSize)
  .setFontStyle("normal");

const inputValue = "this is **bold and** normal font in just one **line**.";

const arrayOfNormalAndBoldText = inputValue.split('**');
  arrayOfNormalAndBoldText.map((text, i) => {
    doc.setFontType("bold");
    // every even item is a normal font weight item
    if (i % 2 === 0) {
      doc.setFontType("normal");
    }
    doc.text(text, startX, 20);
    startX = startX + doc.getStringUnitWidth(text) * fontSize;
  });

doc.save(`boldAndNormal.pdf`);

pls check out this codepen: https://codepen.io/AndreKelling/pen/BaoLWao

_i was looking for a way to bring out whole text-blocks (multi-page and multi-lines text) with bold formats inside. but that's rather difficult. as text blocks need to get pre-calculated, into single same length lines, with the API method splitTextToSize where my double asterix markers can make a big difference when stripped out later :-/_
edit: anyway in the codepen you will find now 2 possible solutions to print mixed multi-line text, too.