Je recherche un moyen d'afficher le symbole traditionnel de la division longue division à l'aide de HTML / CSS (un peu comme ce qui est montré ici: Http://barronsestestestprep.com/blog/wp-content/uploads/2013/04/longdiv1.png ).
Ceci (Http://www.fileformat.info/info/unicode/char/27cc/index.htm ) est essentiellement ce que je Besoin, mais je ne pense pas que beaucoup de gens auraient la police appropriée installée sur leur ordinateur pour le voir (je ne le fais pas au moins). P>
J'ai aussi essayé ceci (ci-dessous), mais Il ne s'affiche pas de manière cohérente sur chrome et ff ... p> Ceci devrait afficher 84 · · 4 avec la boîte de division longue. P> Idées ? p> p>
3 Réponses :
<span style="border-right: 1px black solid; border-radius: 0px 0px 10px 0px">
4
</span>
<span style="border-top: 1px black solid; ">
84
</span>
Demo
Juste ce que je faisais dans le violon :)
Il suffit de vous demander ... pourquoi avez-vous le class = "numéros" code> si vous ne styez pas la classe?
Lorsque CSS est désactivé, le contenu apparaît comme "4 84", de sorte que l'approche n'est pas robuste en tant que telle. Par exemple, un lecteur d'écran va simplement lire les chiffres, sans aucune indication de la division.
Cette question marquée comme CSS code>, alors pourquoi on le désactiverait? O_o
@Grmmph, marquant la question comme CSS ne change pas la réalité: l'approche, en plus d'être délicate et de produire une présentation typographiquement inférieure, n'est pas robuste et accessible - par exemple, une personne utilisant un lecteur d'écran n'a vraiment aucune notion de "désactivation "Ou" Activation "CSS (le lecteur peut appliquer une partie du CSS, mais sûrement pas frontières).
Tout ce que vous avez dit est correct. S'il existe un moyen d'utiliser un symbole à long terme à afficher dans tous les écrans et appareils, veuillez soumettre votre réponse. Si nous allons commencer à disqualifier des solutions simplement parce qu'ils ne peuvent pas être affichés sur certains périphériques, vous devrez éviter tout cadre HTML5. C'est pourquoi nous avons des retombées.
@Grmmph, le point est que cette approche n'a pas de replie.
Cela enfreint l'accessibilité. Ne fais pas ça!
Cela semble être la méthode la plus simple pour attirer à peu près le symbole, bien que je ne suis pas un ventilateur de l'angle perpendiculaire de 90DEG à l'intersection gauche du Vinculum créé à l'aide de votre méthode de la frontière-droite. Au lieu de cela, j'ai modifié l'utilisation pour utiliser la parenthèse fermée et la taille de la police de 135%, et la mettre à l'intérieur de la portée pour la bordure (le Vinculum). Ajout d'espaces durs après le diviseur et avant que le quotient ne l'ait fait semblant très soigné et fonctionne bien avec différentes tailles de police de base. Conseils à d'autres utilisateurs: assurez-vous d'utiliser des polices universellement disponibles pour cela.
Le concept et la notation de "longue division" est traditionnel, dans certaines traditions, d'enseignement arithmétique à l'école, et il est utilisé dans des contextes où les étapes de la division entière sont expliquées graphiquement. Il n'y a pas de moyen fiable de le faire dans HTML et CSS, sauf en utilisant des images, que ce soit de grandes images contenant une longue division en tant que processus ou par morceaux, par exemple. Une seule pièce contenant juste un nombre, l'opérateur de longue division et un autre nombre (comme dans le JPG mentionné dans la question). C'est ainsi que par exemple http://www.mathsisfun.com/long_division.html fait cela. La page http://fr.wikipedia.org/wiki/long_division utilise le texte préformaté, les symboles de construction des caractères ASCII comme ")" et "_", mais le résultat est la primitif et n'est pas robuste (par exemple, se tourne vers Gibberish dans un lecteur d'écran). P>
Lorsque vous utilisez une image, vous devez écrire un texte Utiliser uniquement HTML et CSS pour construire de longues divisions est plutôt désespéré, car HTML et CSS sont plutôt impuissants sans impuissance avec tout ce qui implique deux dimensionnalités essentielles dans les notations mathématiques (c'est-à-dire des expressions mathématiques non simples de caractères). Même construire un Expression racine carrée , avec un Vinculum s'étendant sur le radicand, Nécessite de la tromperie qui échoue facilement, plus ou moins et montrant une telle expression est similaire à, mais essentiellement plus simple qu'une expression de la division longue. P>
Le personnage U + 27CC Long Division vous permettrait théoriquement d'écrire une expression de division longue, même en texte brut, car elle est définie dans la norme Unicode afin qu'elle «s'étend graphiquement sur le dividende». Ceci est cependant largement théorique, pour plusieurs raisons. En plus de la couverture de police limitée (qui pourrait être traitée avec une police téléchargeable avec alt code> qui exprime l'idée verbalement. Cela dépend quelque peu du contexte, mais j'ai bien peur qu'il faudrait avoir une longueur, comme alt = "Division longue avec diviseur 4, dividende 84" code>. P>.
@ font-face code>), l'approche souffre d'un manque de support logiciel. L'idée "s'étend graphiquement sur le dividende" n'est pas facilement mise en œuvre. Bien que les navigateurs puissent (lors de l'utilisation d'une police appropriée) rendu correctement 84⟌4, ils échouent avec 84⟌42 (le symbole s'étend sur le «4» après elle, mais pas sur le «2»). La raison semble être que dans les polices contenant U + 27CC, il pourrait être mis en œuvre avec des règles anticipées qui impliquent que l'opérateur semble s'étendre sur le prochain chiffre em>, mais pour le faire s'étendre sur le prochain Nombre em> (séquence de chiffres), support logiciel ci-dessus le niveau de police simple serait nécessaire. P>
En fait, Jukka, je pense pouvoir écrire un AAT MIF pour obtenir U + 27CC pour vous comporter correctement avec jusqu'à 8 chiffres suivants. Je vais essayer le week-end.
Dans HTML5, vous pouvez utiliser directement MathML Strort>. MathML 3 prend en charge l'élément pour mathml 2 Vous pouvez utiliser une solution JavaScript en fonction de la latex, telle que mathjax . Voici un Exemple de division longue qui utilise l'analyseur de Mathjax Tex pour Analysez l'entrée du formulaire \ longdiv {84} {4} code>. p> p>
Ouais, je peux utiliser Mathjax à un moment donné, mais la réponse acceptée ci-dessus est meilleure à mes fins. Merci pour l'idée cependant.
MathJAX ne supporte malheureusement pas encore mlongdiv code>, mais en toute justice, aucun navigateur (sauf les anciennes versions ie via le plug-in MathPlayer).
@Peterkrautzberger Yeah, j'impliquais un peu que (que Mathml 3 va bientôt venir aux navigateurs HTML5, mais Mathml 2 via MathJAX devra faire jusqu'à présent)
MathJAX soutient déjà la plupart des mathml 3, pas encore des mathématiques élémentaires. En outre, le support de navigateur pour MathML ne bouge pas du tout maintenant.
@Peterkrautzberger ahh, c'est une bonne nouvelle! J'avais lu que ce n'est pas et n'a pas essayé d'utiliser Mathml 3 avec elle moi-même.
Je ne vois pas votre Unicode ... sur le site Web, il a donné un symbole Unicode à mettre dans, et vous devriez le voir.
Pouvez-vous simplement utiliser une image pour le signe de la division longue si il n'y a pas de code HTML pour le symbole, vous n'aurez pas que le problème des utilisateurs ne dispose pas de la police correcte de l'installation.
Je vais générer des nombres aléatoires pour aller sous la div. boîte. Donc, une image ne fonctionnerait pas.
Vous pouvez utiliser un positionnement absolu pour l'image afin que le texte puisse toujours passer directement sous le symbole.
L'utilisation d'une image entraînera des problèmes pour les valeurs de longueur aléatoire utilisées comme dividendes. Et si le dividende devait être, dites 8 chiffres de longueur à un moment donné, mais seulement 3 chiffres longs à d'autres moments? Je suis certain que l'OP veut que le Vinculum (la ligne au-dessus du dividende et au-dessous du quotient) soit suffisamment long pour s'étendre aussi loin que le dividende le fait; c'est-à-dire généré de manière variable. Ma première pensée était de générer à peu près une utilisation à l'aide d'une fonction JavaScript qui utilise la parenthèse dans une taille de police supérieure aux numéros utilisés, puis tracez de manière variable une ligne avec une longueur calculée à l'aide de la largeur du dividende.