/*************************************************************
*
* Copyright (c) 2017-2022 The MathJax Consortium
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* @fileoverview Implements the CHTMLFontData class and AddCSS() function.
*
* @author dpvc@mathjax.org (Davide Cervone)
*/
import {CharMap, CharOptions, CharData, VariantData, DelimiterData, FontData, DIRECTION} from '../common/FontData.js';
import {Usage} from './Usage.js';
import {StringMap} from './Wrapper.js';
import {StyleList, StyleData} from '../../util/StyleList.js';
import {em} from '../../util/lengths.js';
export * from '../common/FontData.js';
/****************************************************************************/
/**
* Add the extra data needed for CharOptions in CHTML
*/
export interface CHTMLCharOptions extends CharOptions {
c?: string; // the content value (for css)
f?: string; // the font postfix (for css)
}
/**
* Shorthands for CHTML char maps and char data
*/
export type CHTMLCharMap = CharMap<CHTMLCharOptions>;
export type CHTMLCharData = CharData<CHTMLCharOptions>;
/**
* The extra data needed for a Variant in CHTML output
*/
export interface CHTMLVariantData extends VariantData<CHTMLCharOptions> {
classes?: string; // the classes to use for this variant
letter: string; // the font letter(s) for the default font for this variant
}
/**
* The extra data needed for a Delimiter in CHTML output
*/
export interface CHTMLDelimiterData extends DelimiterData {
}
/****************************************************************************/
/**
* The CHTML FontData class
*/
export class CHTMLFontData extends FontData<CHTMLCharOptions, CHTMLVariantData, CHTMLDelimiterData> {
/**
* Default options
*/
public static OPTIONS = {
...FontData.OPTIONS,
fontURL: 'js/output/chtml/fonts/tex-woff-v2'
};
/**
* @override
*/
public static JAX = 'CHTML';
/**
* The default class names to use for each variant
*/
protected static defaultVariantClasses: StringMap = {};
/**
* The default font letter to use for each variant
*/
protected static defaultVariantLetters: StringMap = {};
/**
* The CSS styles needed for this font.
*/
protected static defaultStyles = {
'mjx-c::before': {
display: 'block',
width: 0
}
};
/**
* The default @font-face declarations with %%URL%% where the font path should go
*/
protected static defaultFonts = {
'@font-face /* 0 */': {
'font-family': 'MJXZERO',
src: 'url("%%URL%%/MathJax_Zero.woff") format("woff")'
}
};
/***********************************************************************/
/**
* Data about the characters used (for adaptive CSS)
*/
public charUsage: Usage<[string, number]> = new Usage<[string, number]>();
/**
* Data about the delimiters used (for adpative CSS)
*/
public delimUsage: Usage<number> = new Usage<number>();
/***********************************************************************/
/**
* @override
*/
public static charOptions(font: CHTMLCharMap, n: number) {
return super.charOptions(font, n) as CHTMLCharOptions;
}
/***********************************************************************/
/**
* @param {boolean} adapt Whether to use adaptive CSS or not
*/
public adaptiveCSS(adapt: boolean) {
this.options.adaptiveCSS = adapt;
}
/**
* Clear the cache of which characters have been used
*/
public clearCache() {
if (this.options.adaptiveCSS) {
this.charUsage.clear();
this.delimUsage.clear();
}
}
/**
* @override
*/
public createVariant(name: string, inherit: string = null, link: string = null) {
super.createVariant(name, inherit, link);
let CLASS = (this.constructor as CHTMLFontDataClass);
this.variant[name].classes = CLASS.defaultVariantClasses[name];
this.variant[name].letter = CLASS.defaultVariantLetters[name];
}
/**
* @override
*/
public defineChars(name: string, chars: CHTMLCharMap) {
super.defineChars(name, chars);
const letter = this.variant[name].letter;
for (const n of Object.keys(chars)) {
const options = CHTMLFontData.charOptions(chars, parseInt(n));
if (options.f === undefined) {
options.f = letter;
}
}
}
/***********************************************************************/
/**
* @return {StyleList} The (computed) styles for this font
*/
get styles(): StyleList {
const CLASS = this.constructor as typeof CHTMLFontData;
//
// Include the default styles
//
const styles: StyleList = {...CLASS.defaultStyles};
//
// Add fonts with proper URL
//
this.addFontURLs(styles, CLASS.defaultFonts, this.options.fontURL);
//
// Add the styles for delimiters and characters
//
if (this.options.adaptiveCSS) {
this.updateStyles(styles);
} else {
this.allStyles(styles);
}
//
// Return the final style sheet
//
return styles;
}
/**
* Get the styles for any newly used characters and delimiters
*
* @param {StyleList} styles The style list to add delimiter styles to.
* @return {StyleList} The modified style list.
*/
public updateStyles(styles: StyleList): StyleList {
for (const N of this.delimUsage.update()) {
this.addDelimiterStyles(styles, N, this.delimiters[N]);
}
for (const [name, N] of this.charUsage.update()) {
const variant = this.variant[name];
this.addCharStyles(styles, variant.letter, N, variant.chars[N]);
}
return styles;
}
/**
* @param {StyleList} styles The style list to add characters to
*/
protected allStyles(styles: StyleList) {
//
// Create styles needed for the delimiters
//
for (const n of Object.keys(this.delimiters)) {
const N = parseInt(n);
this.addDelimiterStyles(styles, N, this.delimiters[N]);
}
//
// Add style for all character data
//
for (const name of Object.keys(this.variant)) {
const variant = this.variant[name];
const vletter = variant.letter;
for (const n of Object.keys(variant.chars)) {
const N = parseInt(n);
const char = variant.chars[N];
if ((char[3] || {}).smp) continue;
if (char.length < 4) {
(char as CHTMLCharData)[3] = {};
}
this.addCharStyles(styles, vletter, N, char);
}
}
}
/**
* @param {StyleList} styles The style object to add styles to
* @param {StyleList} fonts The default font-face directives with %%URL%% where the url should go
* @param {string} url The actual URL to insert into the src strings
*/
protected addFontURLs(styles: StyleList, fonts: StyleList, url: string) {
for (const name of Object.keys(fonts)) {
const font = {...fonts[name]};
font.src = (font.src as string).replace(/%%URL%%/, url);
styles[name] = font;
}
}
/*******************************************************/
/**
* @param {StyleList} styles The style object to add styles to
* @param {number} n The unicode character number of the delimiter
* @param {CHTMLDelimiterData} data The data for the delimiter whose CSS is to be added
*/
protected addDelimiterStyles(styles: StyleList, n: number, data: CHTMLDelimiterData) {
let c = this.charSelector(n);
if (data.c && data.c !== n) {
c = this.charSelector(data.c);
styles['.mjx-stretched mjx-c' + c + '::before'] = {
content: this.charContent(data.c)
};
}
if (!data.stretch) return;
if (data.dir === DIRECTION.Vertical) {
this.addDelimiterVStyles(styles, c, data);
} else {
this.addDelimiterHStyles(styles, c, data);
}
}
/*******************************************************/
/**
* @param {StyleList} styles The style object to add styles to
* @param {string} c The delimiter character string
* @param {CHTMLDelimiterData} data The data for the delimiter whose CSS is to be added
*/
protected addDelimiterVStyles(styles: StyleList, c: string, data: CHTMLDelimiterData) {
const HDW = data.HDW as CHTMLCharData;
const [beg, ext, end, mid] = data.stretch;
const Hb = this.addDelimiterVPart(styles, c, 'beg', beg, HDW);
this.addDelimiterVPart(styles, c, 'ext', ext, HDW);
const He = this.addDelimiterVPart(styles, c, 'end', end, HDW);
const css: StyleData = {};
if (mid) {
const Hm = this.addDelimiterVPart(styles, c, 'mid', mid, HDW);
css.height = '50%';
styles['mjx-stretchy-v' + c + ' > mjx-mid'] = {
'margin-top': this.em(-Hm / 2),
'margin-bottom': this.em(-Hm / 2)
};
}
if (Hb) {
css['border-top-width'] = this.em0(Hb - .03);
}
if (He) {
css['border-bottom-width'] = this.em0(He - .03);
styles['mjx-stretchy-v' + c + ' > mjx-end'] = {'margin-top': this.em(-He)};
}
if (Object.keys(css).length) {
styles['mjx-stretchy-v' + c + ' > mjx-ext'] = css;
}
}
/**
* @param {StyleList} styles The style object to add styles to
* @param {string} c The vertical character whose part is being added
* @param {string} part The name of the part (beg, ext, end, mid) that is being added
* @param {number} n The unicode character to use for the part
* @param {number} HDW The height-depth-width data for the stretchy delimiter
* @return {number} The total height of the character
*/
protected addDelimiterVPart(styles: StyleList, c: string, part: string, n: number, HDW: CHTMLCharData): number {
if (!n) return 0;
const data = this.getDelimiterData(n);
const dw = (HDW[2] - data[2]) / 2;
const css: StyleData = {content: this.charContent(n)};
if (part !== 'ext') {
css.padding = this.padding(data, dw);
} else {
css.width = this.em0(HDW[2]);
if (dw) {
css['padding-left'] = this.em0(dw);
}
}
styles['mjx-stretchy-v' + c + ' mjx-' + part + ' mjx-c::before'] = css;
return data[0] + data[1];
}
/*******************************************************/
/**
* @param {StyleList} styles The style object to add styles to
* @param {string} c The delimiter character string
* @param {CHTMLDelimiterData} data The data for the delimiter whose CSS is to be added
*/
protected addDelimiterHStyles(styles: StyleList, c: string, data: CHTMLDelimiterData) {
const [beg, ext, end, mid] = data.stretch;
const HDW = data.HDW as CHTMLCharData;
this.addDelimiterHPart(styles, c, 'beg', beg, HDW);
this.addDelimiterHPart(styles, c, 'ext', ext, HDW);
this.addDelimiterHPart(styles, c, 'end', end, HDW);
if (mid) {
this.addDelimiterHPart(styles, c, 'mid', mid, HDW);
styles['mjx-stretchy-h' + c + ' > mjx-ext'] = {width: '50%'};
}
}
/**
* @param {StyleList} styles The style object to add styles to
* @param {string} c The vertical character whose part is being added
* @param {string} part The name of the part (beg, ext, end, mid) that is being added
* @param {number} n The unicode character to use for the part
* @param {CHTMLCharData} HDW The height-depth-width data for the stretchy character
*/
protected addDelimiterHPart(styles: StyleList, c: string, part: string, n: number, HDW: CHTMLCharData) {
if (!n) return;
const data = this.getDelimiterData(n);
const options = data[3] as CHTMLCharOptions;
const css: StyleData = {content: (options && options.c ? '"' + options.c + '"' : this.charContent(n))};
css.padding = this.padding(HDW as CHTMLCharData, 0, -HDW[2]);
styles['mjx-stretchy-h' + c + ' mjx-' + part + ' mjx-c::before'] = css;
}
/*******************************************************/
/**
* @param {StyleList} styles The style object to add styles to
* @param {string} vletter The variant class letter (e.g., `B`, `SS`) where this character is being defined
* @param {number} n The unicode character being defined
* @param {CHTMLCharData} data The bounding box data and options for the character
*/
protected addCharStyles(styles: StyleList, vletter: string, n: number, data: CHTMLCharData) {
const options = data[3] as CHTMLCharOptions;
const letter = (options.f !== undefined ? options.f : vletter);
const selector = 'mjx-c' + this.charSelector(n) + (letter ? '.TEX-' + letter : '');
styles[selector + '::before'] = {
padding: this.padding(data, 0, options.ic || 0),
content: (options.c != null ? '"' + options.c + '"' : this.charContent(n))
};
}
/***********************************************************************/
/**
* @param {number} n The character number to find
* @return {CHTMLCharData} The data for that character to be used for stretchy delimiters
*/
protected getDelimiterData(n: number): CHTMLCharData {
return this.getChar('-smallop', n);
}
/**
* @param {number} n The number of ems
* @return {string} The string representing the number with units of "em"
*/
public em(n: number): string {
return em(n);
}
/**
* @param {number} n The number of ems (will be restricted to non-negative values)
* @return {string} The string representing the number with units of "em"
*/
public em0(n: number): string {
return em(Math.max(0, n));
}
/**
* @param {CHTMLCharData} data The [h, d, w] data for the character
* @param {number} dw The (optional) left offset of the glyph
* @param {number} ic The (optional) italic correction value
* @return {string} The padding string for the h, d, w.
*/
public padding([h, d, w]: CHTMLCharData, dw: number = 0, ic: number = 0): string {
return [h, w + ic, d, dw].map(this.em0).join(' ');
}
/**
* @param {number} n A unicode code point to be converted to character content for use with the
* CSS rules for fonts (either a literal character for most ASCII values, or \nnnn
* for higher values, or for the double quote and backslash characters).
* @return {string} The character as a properly encoded string in quotes.
*/
public charContent(n: number): string {
return '"' + (n >= 0x20 && n <= 0x7E && n !== 0x22 && n !== 0x27 && n !== 0x5C ?
String.fromCharCode(n) : '\\' + n.toString(16).toUpperCase()) + '"';
}
/**
* @param {number} n A unicode code point to be converted to a selector for use with the
* CSS rules for fonts
* @return {string} The character as a selector value.
*/
public charSelector(n: number): string {
return '.mjx-c' + n.toString(16).toUpperCase();
}
}
/**
* The CHTMLFontData constructor class
*/
export type CHTMLFontDataClass = typeof CHTMLFontData;
/****************************************************************************/
/**
* Data needed for AddCSS()
*/
export type CharOptionsMap = {[name: number]: CHTMLCharOptions};
export type CssMap = {[name: number]: number};
/**
* @param {CHTMLCharMap} font The font to augment
* @param {CharOptionsMap} options Any additional options for characters in the font
* @return {CHTMLCharMap} The augmented font
*/
export function AddCSS(font: CHTMLCharMap, options: CharOptionsMap): CHTMLCharMap {
for (const c of Object.keys(options)) {
const n = parseInt(c);
Object.assign(FontData.charOptions(font, n), options[n]);
}
return font;
}