Texte vertical

cs_brezoneg Messages postés 104 Date d'inscription samedi 6 novembre 2004 Statut Membre Dernière intervention 19 août 2015 - 20 janv. 2012 à 11:30
@karamel Messages postés 1859 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 17 juillet 2024 - 20 janv. 2012 à 14:32
Bonjour,
Je viens de trouver le code suivant pour afficher du texte en vertical, pour IE mais aussi et surtout pour firefox et autre navigateurs :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Démo texte vertical</title>
<style type="text/css">
.text-container {
/* SVG text node */
fill: black;
/* IE div */
color: black;
}
</style>
</head>



<script type="text/javascript">
var container = document.getElementById('container');
function supportsSvg() {
return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")
}
// safari 3+, opera 8+, chrome, firefox, gutenberg bibles, clay tablets, ...
if (supportsSvg()) {


var SVGNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(SVGNS, 'svg');
container.appendChild(svg);
var textBlock = document.createElementNS(SVGNS, 'text');
textBlock.setAttribute('transform', 'rotate(90)');
textBlock.setAttribute('class', 'text-container');
svg.appendChild(textBlock);
// no SVG support? assume it's IE and use writing-mode instead
} else {


var textBlock = document.createElement('span');
container.appendChild(textBlock);
textBlock.style.writingMode = 'tb-rl';
textBlock.style.whiteSpace = 'nowrap';
textBlock.className = 'text-container';
};
var text = document.createTextNode('Texte Vertical');
textBlock.appendChild(text);
</script>




</html>


Donc le texte : Texte Vertical s'affiche en vertical dans tous les navigateurs.
Le problème ( je ne connait pas le java...) est que la ligne quiaffiche le texte est entre les balises <sript></script>
Et que je voudrais le mettre dans une cellule d'un tableau html !

Merci pour vos réponses

2 réponses

cs_Julien39 Messages postés 6414 Date d'inscription mardi 8 mars 2005 Statut Modérateur Dernière intervention 29 juillet 2020 371
20 janv. 2012 à 11:39
Bonjour,

Tu confonds java et javascript. Je déplace ton sujet vers le forum javascript.
0
@karamel Messages postés 1859 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 17 juillet 2024 153
20 janv. 2012 à 14:32
bonjour

tu doit inserer toute la partie script dans la cellule et donner comme id a cette cellule "container"


la partie script

<script type="text/javascript">
var container = document.getElementById('container');
function supportsSvg() {
return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")
}
// safari 3+, opera 8+, chrome, firefox, gutenberg bibles, clay tablets, ...
if (supportsSvg()) {


var SVGNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(SVGNS, 'svg');
container.appendChild(svg);
var textBlock = document.createElementNS(SVGNS, 'text');
textBlock.setAttribute('transform', 'rotate(90)');
textBlock.setAttribute('class', 'text-container');
svg.appendChild(textBlock);
// no SVG support? assume it's IE and use writing-mode instead
} else {


var textBlock = document.createElement('span');
container.appendChild(textBlock);
textBlock.style.writingMode = 'tb-rl';
textBlock.style.whiteSpace = 'nowrap';
textBlock.className = 'text-container';
};
var text = document.createTextNode('Texte Vertical');
textBlock.appendChild(text);
</script> 
0
Rejoignez-nous