css - estilo - editar title html
Forzar fuente no monoespacial en ancho fijo mediante CSS (7)
¿Por qué no pensar fuera de la caja y dentro de una mesa para esto?
<table cellpadding="0" cellspacing="0">
<tr><td>T</td><td>h</td><td>e</td><td></td><td>r</td><td>a</td><td>i</td><td>n</td><td></td><td>i</td><td>n</td><td></td><td>S</td><td>p</td><td>a</td><td>i</td><td>n</td><td></td><td>s</td><td>t</td><td>a</td><td>y</td><td>s</td></tr>
<tr><td>m</td><td>a</td><td>i</td><td>n</td><td>l</td><td>y</td><td></td><td>i</td><td>n</td><td></td><td>t</td><td>h</td><td>e</td><td></td><td>p</td><td>l</td><td>a</td><td>i</td><td>n</td><td>s</td><td>.</td></tr>
</table>
¿Hay alguna forma de obligar a una fuente a ser monoespaciada usando CSS?
Con esto quiero decir, usando una fuente no monoespacial, ¿puedes obligar al navegador a representar cada carácter con un ancho fijo?
No, a menos que sea una fuente real de espaciado único.
No, no hay forma de forzar nada en CSS. Y ni siquiera hay una manera de sugerir que una fuente no monoespacial se represente como una fuente monoespaciada.
A veces he hecho una bonita cosa bonita para las cuentas regresivas:
html:
<div class="counter">
<span class="counter-digit counter-digit-0">2</span>
<span class="counter-digit counter-digit-1">4</span>
<span class="counter-digit counter-digit-divider">/</span>
<span class="counter-digit counter-digit-2">5</span>
<span class="counter-digit counter-digit-3">7</span>
</div>
scss:
$digit-width: 18px;
.counter {
text-align: center;
font-size: $digit-width;
position: relative;
width : $digit-width * 4.5;
margin: 0 auto;
height: 48px;
}
.counter-digit {
position: absolute;
top: 0;
width: $digit-width;
height: 48px;
line-height: 48px;
padding: 0 1px;
&:nth-child(1) { left: 0; text-align: right; }
&:nth-child(2) { left: $digit-width * 1; text-align: left;}
&:nth-child(3) { left: $digit-width * 2; text-align: center; width: $digit-width / 2} // the divider (/)
&:nth-child(4) { left: $digit-width * 2.5; text-align: right;}
&:nth-child(5) { left: $digit-width * 3.5; text-align: left;}
}
Bueno, no dijiste usando solo CSS. Es posible hacer esto con solo un poco de Javascript para envolver cada letra en un span . El resto está en CSS ...
window.onload = function() {
const secondP = document.getElementById(''fixed'');
const text = secondP.innerText;
const newText = text.split('''').map(c => {
const span = `<span>${c}</span>`;
return span;
}).join('''');
secondP.innerHTML = newText;
}
p {
position: relative;
border: 1px solid black;
border-radius: 1em;
padding: 1em;
margin: 3em 1em;
}
p::after {
content: attr(name);
display: block;
background-color: white;
color: green;
padding: 0 0.5em;
position: absolute;
top: -0.6em;
left: 0.5em;
}
#fixed span {
display: inline-block;
width: 1em;
text-align: center;
}
<p id="variable" name="Variable Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p>
<p id="fixed" name="Fixed Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p>
En un párrafo con texto regular, se ve terrible, pero hay casos en que esto tiene sentido. Las fuentes de iconos y los símbolos Unicode podrían usar esta técnica.
Encontré esta pregunta al intentar encontrar una solución para los símbolos Unicode que estaban desplazando el texto normal a la derecha cuando fueron reemplazados por otros símbolos Unicode.
Si esto es para alinear dígitos en tablas donde algunas fuentes (con tipografía tradicional) las renderizan de forma predeterminada con ancho variable (por ejemplo, UI de Segoe en Windows), debe buscar en las propiedades CSS para:
font-variant-numeric: tabular-nums;
(esto desactiva el valor predeterminado `` `proportional-nums```` para la variante de espaciado numérico)
¡No es necesario javascript! Es la forma más limpia de deshabilitar los glifos de ancho variable en estas fuentes y obligarlos a usar dígitos tabulares (esto generalmente usa los mismos glifos en la misma fuente, pero su brecha inicial y final aumenta, así que los 10 dígitos de 0 a 9 se renderizará con el mismo ancho, sin embargo, algunas fuentes pueden evitar el espaciado interdigital de la variable visual y oscurecerán ligeramente algunos dígitos, o podrían agregar sierras inferiores al pie del dígito 1.
Tenga en cuenta que esto no deshabilita la altura de la variable observada con la interfaz de usuario de Segoe (como algunos dígitos serán x-altura solo como letras minúsculas, otros tendrán ascendentes o descendentes). Estas formas de dígitos tradicionales también se pueden deshabilitar con CSS, usando
font-variant-numeric: lining-nums;
(Esto desactiva el valor predeterminado "oldstyle-nums" para la variante numérica)
Puedes combinar ambos:
font-variant-numeric: tabular-nums lining-nums;
No puedes hacer esto con CSS. Incluso si pudieras, el resultado se verá horrible:
Si realmente necesita hacer esto, puede usar JavaScript para envolver cada carácter individual en un elemento (o simplemente hacerlo a mano):
function wrap_letters($element) {
for (var i = 0; i < $element.childNodes.length; i++) {
var $child = $element.childNodes[i];
if ($child.nodeType === Node.TEXT_NODE) {
var $wrapper = document.createDocumentFragment();
for (var i = 0; i < $child.nodeValue.length; i++) {
var $char = document.createElement(''span'');
$char.className = ''char'';
$char.textContent = $child.nodeValue.charAt(i);
$wrapper.appendChild($char);
}
$element.replaceChild($wrapper, $child);
} else if ($child.nodeType === Node.ELEMENT_NODE) {
wrap_letters($child);
}
}
}
wrap_letters(document.querySelectorAll(''.boxes'')[0]);
wrap_letters(document.querySelectorAll(''.boxes'')[1]);
.char {
outline: 1px solid rgba(255, 0, 0, 0.5);
}
.monospace .char {
display: inline-block;
width: 15px;
text-align: center;
}
<h2 class="boxes">This is a title</h2>
<h2 class="boxes monospace">This is a title</h2>