Change the Font on just the specific Unicode characters while saving to PDF with JavaScript via C++
Some Unicode characters are not displayable by the user-specified font. One such Unicode character is Non-breaking Hyphen (U+2011) and its Unicode number is 8209. This character cannot be displayed with Times New Roman, but it can be displayed with other fonts like Arial Unicode MS.
When such a character occurs inside some word or sentence which is in a specific font like Times New Roman, then Aspose.Cells changes the font of the entire word or sentence to a font which could display this character like Arial Unicode to MS.
However, this is undesirable behavior for some users and they want only that specific character’s font to be changed instead of changing the font of the entire word or sentence.
To deal with this problem, Aspose.Cells provides the PdfSaveOptions.isFontSubstitutionCharGranularity property which should be set to true so that only the font of specific characters which are not displayable will be changed to a displayable font, while the rest of the word or sentence should remain in the original font.
Example
The following screenshot compares the two output PDFs generated by the sample code below.
One is generated without setting PdfSaveOptions.isFontSubstitutionCharGranularity property and the other was generated after setting the PdfSaveOptions.isFontSubstitutionCharGranularity property to true.
As you can see in the first PDF, the font of the entire sentence has changed from Times New Roman to Arial Unicode MS because of the Non-Breaking Hyphen. While in the second PDF, only the font of Non-Breaking Hyphen has changed.
| First Pdf File |
|---|
 |
| Second Pdf File |
|---|
 |
Sample Code
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink1" style="display: none; margin-right: 10px;">Download Result PDF 1</a>
<a id="downloadLink2" style="display: none;">Download Result PDF 2</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, PdfSaveOptions } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '<p>Running example...</p>';
// Create workbook object
const workbook = new Workbook();
// Access the first worksheet
const worksheet = workbook.worksheets.get(0);
// Access cells
const cell1 = worksheet.cells.get("A1");
const cell2 = worksheet.cells.get("B1");
// Set the styles of both cells to Times New Roman
let style = cell1.style;
style.font.name = "Times New Roman";
cell1.style = style;
cell2.style = style;
// Put the values inside the cell
cell1.value = "Hello without Non-Breaking Hyphen";
cell2.value = "Hello" + String.fromCharCode(8209) + " with Non-Breaking Hyphen";
// Autofit the columns
worksheet.autoFitColumns();
// Save to Pdf without setting PdfSaveOptions.IsFontSubstitutionCharGranularity
const outputData1 = workbook.save(SaveFormat.Pdf);
const blob1 = new Blob([outputData1]);
const downloadLink1 = document.getElementById('downloadLink1');
downloadLink1.href = URL.createObjectURL(blob1);
downloadLink1.download = 'SampleOutput_out.pdf';
downloadLink1.style.display = 'inline-block';
downloadLink1.textContent = 'Download SampleOutput_out.pdf';
// Save to Pdf after setting PdfSaveOptions.IsFontSubstitutionCharGranularity to true
const opts = new PdfSaveOptions();
opts.isFontSubstitutionCharGranularity = true;
const outputData2 = workbook.save(SaveFormat.Pdf, opts);
const blob2 = new Blob([outputData2]);
const downloadLink2 = document.getElementById('downloadLink2');
downloadLink2.href = URL.createObjectURL(blob2);
downloadLink2.download = 'SampleOutput2_out.pdf';
downloadLink2.style.display = 'inline-block';
downloadLink2.textContent = 'Download SampleOutput2_out.pdf';
resultDiv.innerHTML = '<p style="color: green;">Operation completed successfully! Use the download links to get the generated PDFs.</p>';
});
</script>
</html>