Anki 数理化生公式图鉴全屏居中模版

简介

先上图：

比如，你有一个不敢忘掉的公式：

93. 椭圆 \(\frac{x^2}{a^2}+\frac{x^2}{b^2}=1(a>b>0)\) 焦半径公式
    \(|PF_1|=a+ex,\,|PF_2|=a-ex\)

你要把它放进 Anki 里复习：

• 正面：

93. 椭圆 $\frac{x^2}{a^2}+\frac{x^2}{b^2}=1(a>b>0)$ 焦半径公式 
$|PF_1|=\color{red}(\color{transparent}{a+ex}\color{red}),\,|PF_2|=\color{red}(\color{transparent}{a-ex}\color{red})$

• 背面：

93. 椭圆 $\frac{x^2}{a^2}+\frac{x^2}{b^2}=1(a>b>0)$ 焦半径公式 
$|PF_1|=a+ex,\,|PF_2|=a-ex$

像这样：

最后你得到了这个：

假设你有坚持复习，从此再也不怕把它忘掉了，完成！

模板使用方法（跳至代码）

1. 追求完美的你，可以用 TeX 书写数学公式，就像上述例图一样。
   推荐使用行内公式 一些文字 ${公式}$ 一些文字。
   更具体用法参见：Mathjax与LaTex公式简介

2. 简单粗暴的你，出可以简单地在一些百科上找点数学公式截图下来直接粘贴到卡片中。

卡片中的内容将会被等比例放大以适应屏幕。

原理

用 js 计算内容大小，作一些简单的几何变换得到居中后的坐标。具体实现方式请看代码：在卡片样式里搜索等比放大适应屏幕

Anki 把 卡片样式 里的文本直接嵌到了一个<style>{卡片样式}</style>标签里，利用这一点，我们可以用 </style>{你的HTML代码}<style> 在卡片样式里添加 HTML 代码。

在卡片样式里通过 CDN 方式调用了 MathJax 和 jQuery 库，目前还不晓得怎样本地化，懂的请留言，不胜感激。

模版代码

可直接复制一个 基础 模版后，向新模版粘贴代码。

像这样：

正面模版：

<div class="center-box" id="math">{{正面}}</div>
<script>tryTypeset()</script>

背面模版：

<div class="center-box" id="math">{{背面}}</div>
<script>tryTypeset()</script>

样式：

</style>
<style>
/* 卡片样式 */
body, html{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.card{
	font-family: "FangSong";
}

/* Anki 图片大小修正 */
img{max-width: initial; max-height: initial;}

/* 居中盒子 */
.center-box{
	display: block;
}
/* 居中盒子 begin DEBUG * /
html		{background: #888}
body		{background: #999}
.card		{background: #AAA}
.center-box	{background: #DDD}
.content	{background: #EEE}
/* 居中盒子 end */

</style>
<script type="text/x-mathjax-config">
MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.Config({
	messageStyle:"none",
	showProcessingMessages:false,
	skipStartupTypeset: true,
	tex2jax: {
		inlineMath: [['$','$'], ['\\(','\\)']],
		processEscaping: true
	},
	"HTML-CSS": {
		minScaleAdjust: 100,
		undefinedFamily: '"FangSong"',
		EqnChunkDelay: 0,
	},
});
</script>

<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML-full">
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script>
var centerZoom = function(){
	var cbox = '.center-box';

	// 等里面的图片加载出来
	if(!$(cbox).height()) return false;

	// 初始化位置
	$(cbox).css({
		position: 'absolute',
		left: 0,
		top:	0,
		zoom: 1,
	});

	// 抵消卡片的 zoom 对坐标计算的影响
	// 待填坑: 如果被 zoom 的不是 .card 而是 body 之类的就可能偏移
	var cardzoom = $(".card").css("zoom");
	var ww = $(window).width() / cardzoom;
	var wh = $(window).height() / cardzoom;
	var bw = $(cbox).outerWidth(true);
	var bh = $(cbox).outerHeight(true);

	// 等比放大适应屏幕
	var zoom = (bw / bh > ww / wh) ? (ww / bw) : (wh / bh);

	// 相对屏幕缩放倍数
	zoom *= 1;
	// 最大放大 5 倍
	zoom = Math.min(zoom, 5);

	// 计算居中坐标
	var st = $(document).scrollTop();
	var sl = $(document).scrollLeft();
	var cx = ((ww - bw * zoom) / 2 + sl);
	var cy = ((wh - bh * zoom) / 2 + st);

	// 设置位置和放大zoom
	$(cbox).css({
		position: 'absolute',
		left: cx / zoom,
		top:	cy / zoom,
		zoom: zoom,
	});

	// 成功返回 true
	return true;
}

var centerTypeset = function(){
	return (	centerZoom()
		&& "undefined" != typeof(MathJax)
		&& !!MathJax.Hub.Typeset("math", centerZoom));
}
var tryTypeset = function(){
	if(!centerTypeset()){setTimeout(tryTypeset, 1);}
}
$(window).resize(centerZoom);
</script>
<style>