Typographical word spacing
Online Demo: https://dallaslu.github.io/spacer.js/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spacer间隔器</title>
<style>
spacer{
width: .25em;
display: inline-block;
}
spacer::after {
content: '';
}
</style>
<script src="dist/spacer.min.js"></script>
</head>
<body>
<img alt="时髦人都好fancy"/>
<p>Today你eat了吗？</p>
<script>
let spacer = new Spacer({
wrapper:{
open: '<spacer>',
close: '</spacer>'
},
spacingContent: ' ',
handleOriginalSpace: true,
forceUnifiedSpacing: true
});
console.log(spacer.space('中文ABC'));
spacer.spacePage();
</script>
</body>
</html>| Name | Type | Example | Default |
|---|---|---|---|
spacingContent |
string | ' ' |
' ' |
wrapper |
object | {open: '<spacer>', close: '</spacer>'} |
Undefined |
handleOriginalSpace |
bool | true |
false |
forceUnifiedSpacing |
bool | true |
false |
keepOriginalSpace |
bool | true |
false |
Spacing content.
中文ABC->中文 ABC中文 ABC->中文 ABC中文____ABC->中文_ABC(_as blank)
Html wrapper tag.
spacer{
width: .25em; /* 1/4 font-size by default */
display: inline-block;
}
spacer::after {
content: '';
}中文ABC->中文<spacer></spacer>ABCGlobal世界->Global<spacer></spacer>世界
Handle original space.
When true:
中文___ABC->中文_ABC(No wrapper case,_as blank)中文 ABC->中文<spacer></spacer>ABC中文____ABC->中文<spacer></spacer>ABC(_as blank)
When false:
中文 ABC->中文 ABC中文____ABC->中文____ABC(_as blank)
Replace all spacings with spacingContent value or wrapper. Only works when handleOriginalSpace is true and wrapper.
中文____ABC->中文<spacer>_</spacer>ABC(_as blank)
Only works when forceUnifiedSpacing is false and handleOriginalSpace is true and wrapper.
中文ABC->中文<spacer></spacer>ABC中文 ABC->中文<spacer> </spacer>ABC中文____ABC->中文<spacer>____</spacer>ABC(_as blank)