mathjax-node: different output when formatted on webpage than in node project - mathjax
I am getting different behavior between mathjax on a webpage and mathjax-node. When I load it on the webpage I get the correct output that I am looking for. For example I have a line = $_{a} ^{x} A $ where I want the superscript and subscript above and below each other. It works fine if I convert it on the webpage however when I try to run it through mathjax-node I get what would look like this _{ax}A. Here is everything related to mathjax in my code:
var mathjax = require('mathjax-node');
mathjax.config({ MathJax: { } });
mathjax.start();
async function formatMath(line) {
try{
var line;
if(line.indexOf('$')==-1)
return line;
while(line.indexOf('$') > -1){
var re = /\$(.*?)\$/;
var match = re.exec(line)[0];
var math = match.slice(1, -1);
let result = await mathjax.typeset({
math: math,
format: "inline-TeX",
html: true
});
line = line.replace(match, result.html);
if(line=="$_{a} ^{x} A $"){
console.log(line);
console.log(match);
console.log(math);
}
}
return line;
} catch(err) {
if(err) {
return Error(`Error at formMath(): ${err}`);
}
}
}
Example of what I am getting using the above function with '$_{a} ^{x} A $'
Example of what I want when I just add html = "\\(_{a} ^{x} A \\)"; directly into the webpage
This is my exact output from above:
<span class="mjx-chtml"><span class="mjx-math" aria-label="_{a} ^{x} A "><span c
lass="mjx-mrow" aria-hidden="true"><span class="mjx-msubsup"><span class="mjx-ba
se"><span class="mjx-mi"><span class="mjx-char"></span></span></span><span class
="mjx-stack" style="vertical-align: -0.156em;"><span class="mjx-sup" style="font
-size: 70.7%; padding-bottom: 0.255em; padding-left: 0px; padding-right: 0.071em
;"><span class="mjx-texatom" style=""><span class="mjx-mrow"><span class="mjx-mi
"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.225em; padding-bo
ttom: 0.298em;">x</span></span></span></span></span><span class="mjx-sub" style=
"font-size: 70.7%; padding-right: 0.071em;"><span class="mjx-texatom" style=""><
span class="mjx-mrow"><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I
" style="padding-top: 0.225em; padding-bottom: 0.298em;">a</span></span></span><
/span></span></span></span><span class="mjx-mi"><span class="mjx-char MJXc-TeX-m
ath-I" style="padding-top: 0.519em; padding-bottom: 0.298em;">A</span></span></s
pan></span></span>
$_{a} ^{x} A $
_{a} ^{x} A
Note that I have already tried converting my regex to \\((.*)\\).
I tried to play around with useGlobalCache and other options with no luck. I do not understand why this is happening or if it has to do with how my formulas are being formatted. I am using "mathjax-node": "2.1.1". Thanks in advance.
The HTML sample is actually ok.
I'm guessing you're not generating and applying the CSS. This is a separate step for server-side processing since it's a one-time job.
You need to run typeset with the css option to have mathjax-node add the CSS declarations to the result object, cf. https://github.com/mathjax/MathJax-node#typesetoptions-callback.
Here's the HTML from your OP with the CSS applied.
.mjx-chtml {display: inline-block; line-height: 0; text-indent: 0; text-align: left; text-transform: none; font-style: normal; font-weight: normal; font-size: 100%; font-size-adjust: none; letter-spacing: normal; word-wrap: normal; word-spacing: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0; min-height: 0; border: 0; margin: 0; padding: 1px 0}
.MJXc-display {display: block; text-align: center; margin: 1em 0; padding: 0}
.mjx-chtml[tabindex]:focus, body :focus .mjx-chtml[tabindex] {display: inline-table}
.mjx-full-width {text-align: center; display: table-cell!important; width: 10000em}
.mjx-math {display: inline-block; border-collapse: separate; border-spacing: 0}
.mjx-math * {display: inline-block; -webkit-box-sizing: content-box!important; -moz-box-sizing: content-box!important; box-sizing: content-box!important; text-align: left}
.mjx-numerator {display: block; text-align: center}
.mjx-denominator {display: block; text-align: center}
.MJXc-stacked {height: 0; position: relative}
.MJXc-stacked > * {position: absolute}
.MJXc-bevelled > * {display: inline-block}
.mjx-stack {display: inline-block}
.mjx-op {display: block}
.mjx-under {display: table-cell}
.mjx-over {display: block}
.mjx-over > * {padding-left: 0px!important; padding-right: 0px!important}
.mjx-under > * {padding-left: 0px!important; padding-right: 0px!important}
.mjx-stack > .mjx-sup {display: block}
.mjx-stack > .mjx-sub {display: block}
.mjx-prestack > .mjx-presup {display: block}
.mjx-prestack > .mjx-presub {display: block}
.mjx-delim-h > .mjx-char {display: inline-block}
.mjx-surd {vertical-align: top}
.mjx-mphantom * {visibility: hidden}
.mjx-merror {background-color: #FFFF88; color: #CC0000; border: 1px solid #CC0000; padding: 2px 3px; font-style: normal; font-size: 90%}
.mjx-annotation-xml {line-height: normal}
.mjx-menclose > svg {fill: none; stroke: currentColor}
.mjx-mtr {display: table-row}
.mjx-mlabeledtr {display: table-row}
.mjx-mtd {display: table-cell; text-align: center}
.mjx-label {display: table-row}
.mjx-box {display: inline-block}
.mjx-block {display: block}
.mjx-span {display: inline}
.mjx-char {display: block; white-space: pre}
.mjx-itable {display: inline-table; width: auto}
.mjx-row {display: table-row}
.mjx-cell {display: table-cell}
.mjx-table {display: table; width: 100%}
.mjx-line {display: block; height: 0}
.mjx-strut {width: 0; padding-top: 1em}
.mjx-vsize {width: 0}
.MJXc-space1 {margin-left: .167em}
.MJXc-space2 {margin-left: .222em}
.MJXc-space3 {margin-left: .278em}
.mjx-ex-box-test {position: absolute; overflow: hidden; width: 1px; height: 60ex}
.mjx-line-box-test {display: table!important}
.mjx-line-box-test span {display: table-cell!important; width: 10000em!important; min-width: 0; max-width: none; padding: 0; border: 0; margin: 0}
.MJXc-TeX-unknown-R {font-family: monospace; font-style: normal; font-weight: normal}
.MJXc-TeX-unknown-I {font-family: monospace; font-style: italic; font-weight: normal}
.MJXc-TeX-unknown-B {font-family: monospace; font-style: normal; font-weight: bold}
.MJXc-TeX-unknown-BI {font-family: monospace; font-style: italic; font-weight: bold}
.MJXc-TeX-ams-R {font-family: MJXc-TeX-ams-R,MJXc-TeX-ams-Rw}
.MJXc-TeX-cal-B {font-family: MJXc-TeX-cal-B,MJXc-TeX-cal-Bx,MJXc-TeX-cal-Bw}
.MJXc-TeX-frak-R {font-family: MJXc-TeX-frak-R,MJXc-TeX-frak-Rw}
.MJXc-TeX-frak-B {font-family: MJXc-TeX-frak-B,MJXc-TeX-frak-Bx,MJXc-TeX-frak-Bw}
.MJXc-TeX-math-BI {font-family: MJXc-TeX-math-BI,MJXc-TeX-math-BIx,MJXc-TeX-math-BIw}
.MJXc-TeX-sans-R {font-family: MJXc-TeX-sans-R,MJXc-TeX-sans-Rw}
.MJXc-TeX-sans-B {font-family: MJXc-TeX-sans-B,MJXc-TeX-sans-Bx,MJXc-TeX-sans-Bw}
.MJXc-TeX-sans-I {font-family: MJXc-TeX-sans-I,MJXc-TeX-sans-Ix,MJXc-TeX-sans-Iw}
.MJXc-TeX-script-R {font-family: MJXc-TeX-script-R,MJXc-TeX-script-Rw}
.MJXc-TeX-type-R {font-family: MJXc-TeX-type-R,MJXc-TeX-type-Rw}
.MJXc-TeX-cal-R {font-family: MJXc-TeX-cal-R,MJXc-TeX-cal-Rw}
.MJXc-TeX-main-B {font-family: MJXc-TeX-main-B,MJXc-TeX-main-Bx,MJXc-TeX-main-Bw}
.MJXc-TeX-main-I {font-family: MJXc-TeX-main-I,MJXc-TeX-main-Ix,MJXc-TeX-main-Iw}
.MJXc-TeX-main-R {font-family: MJXc-TeX-main-R,MJXc-TeX-main-Rw}
.MJXc-TeX-math-I {font-family: MJXc-TeX-math-I,MJXc-TeX-math-Ix,MJXc-TeX-math-Iw}
.MJXc-TeX-size1-R {font-family: MJXc-TeX-size1-R,MJXc-TeX-size1-Rw}
.MJXc-TeX-size2-R {font-family: MJXc-TeX-size2-R,MJXc-TeX-size2-Rw}
.MJXc-TeX-size3-R {font-family: MJXc-TeX-size3-R,MJXc-TeX-size3-Rw}
.MJXc-TeX-size4-R {font-family: MJXc-TeX-size4-R,MJXc-TeX-size4-Rw}
.MJXc-TeX-vec-R {font-family: MJXc-TeX-vec-R,MJXc-TeX-vec-Rw}
.MJXc-TeX-vec-B {font-family: MJXc-TeX-vec-B,MJXc-TeX-vec-Bx,MJXc-TeX-vec-Bw}
#font-face {font-family: MJXc-TeX-ams-R; src: local('MathJax_AMS'), local('MathJax_AMS-Regular')}
#font-face {font-family: MJXc-TeX-ams-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_AMS-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_AMS-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_AMS-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-cal-B; src: local('MathJax_Caligraphic Bold'), local('MathJax_Caligraphic-Bold')}
#font-face {font-family: MJXc-TeX-cal-Bx; src: local('MathJax_Caligraphic'); font-weight: bold}
#font-face {font-family: MJXc-TeX-cal-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-frak-R; src: local('MathJax_Fraktur'), local('MathJax_Fraktur-Regular')}
#font-face {font-family: MJXc-TeX-frak-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-frak-B; src: local('MathJax_Fraktur Bold'), local('MathJax_Fraktur-Bold')}
#font-face {font-family: MJXc-TeX-frak-Bx; src: local('MathJax_Fraktur'); font-weight: bold}
#font-face {font-family: MJXc-TeX-frak-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Fraktur-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Fraktur-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Fraktur-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-math-BI; src: local('MathJax_Math BoldItalic'), local('MathJax_Math-BoldItalic')}
#font-face {font-family: MJXc-TeX-math-BIx; src: local('MathJax_Math'); font-weight: bold; font-style: italic}
#font-face {font-family: MJXc-TeX-math-BIw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Math-BoldItalic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Math-BoldItalic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Math-BoldItalic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-sans-R; src: local('MathJax_SansSerif'), local('MathJax_SansSerif-Regular')}
#font-face {font-family: MJXc-TeX-sans-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-sans-B; src: local('MathJax_SansSerif Bold'), local('MathJax_SansSerif-Bold')}
#font-face {font-family: MJXc-TeX-sans-Bx; src: local('MathJax_SansSerif'); font-weight: bold}
#font-face {font-family: MJXc-TeX-sans-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-sans-I; src: local('MathJax_SansSerif Italic'), local('MathJax_SansSerif-Italic')}
#font-face {font-family: MJXc-TeX-sans-Ix; src: local('MathJax_SansSerif'); font-style: italic}
#font-face {font-family: MJXc-TeX-sans-Iw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_SansSerif-Italic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_SansSerif-Italic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_SansSerif-Italic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-script-R; src: local('MathJax_Script'), local('MathJax_Script-Regular')}
#font-face {font-family: MJXc-TeX-script-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Script-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Script-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Script-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-type-R; src: local('MathJax_Typewriter'), local('MathJax_Typewriter-Regular')}
#font-face {font-family: MJXc-TeX-type-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Typewriter-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Typewriter-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Typewriter-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-cal-R; src: local('MathJax_Caligraphic'), local('MathJax_Caligraphic-Regular')}
#font-face {font-family: MJXc-TeX-cal-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Caligraphic-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Caligraphic-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Caligraphic-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-main-B; src: local('MathJax_Main Bold'), local('MathJax_Main-Bold')}
#font-face {font-family: MJXc-TeX-main-Bx; src: local('MathJax_Main'); font-weight: bold}
#font-face {font-family: MJXc-TeX-main-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Main-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Main-Bold.woff')format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Main-Bold.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-main-I; src: local('MathJax_Main Italic'), local('MathJax_Main-Italic')}
#font-face {font-family: MJXc-TeX-main-Ix; src: local('MathJax_Main'); font-style: italic}
#font-face {font-family: MJXc-TeX-main-Iw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Main-Italic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Main-Italic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Main-Italic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-main-R; src: local('MathJax_Main'), local('MathJax_Main-Regular')}
#font-face {font-family: MJXc-TeX-main-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Main-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Main-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-math-I; src: local('MathJax_Math Italic'), local('MathJax_Math-Italic')}
#font-face {font-family: MJXc-TeX-math-Ix; src: local('MathJax_Math'); font-style: italic}
#font-face {font-family: MJXc-TeX-math-Iw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Math-Italic.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Math-Italic.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size1-R; src: local('MathJax_Size1'), local('MathJax_Size1-Regular')}
#font-face {font-family: MJXc-TeX-size1-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size1-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size1-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size1-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size2-R; src: local('MathJax_Size2'), local('MathJax_Size2-Regular')}
#font-face {font-family: MJXc-TeX-size2-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size2-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size2-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size2-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size3-R; src: local('MathJax_Size3'), local('MathJax_Size3-Regular')}
#font-face {font-family: MJXc-TeX-size3-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size3-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size3-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size3-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-size4-R; src: local('MathJax_Size4'), local('MathJax_Size4-Regular')}
#font-face {font-family: MJXc-TeX-size4-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Size4-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Size4-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Size4-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-vec-R; src: local('MathJax_Vector'), local('MathJax_Vector-Regular')}
#font-face {font-family: MJXc-TeX-vec-Rw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Regular.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Regular.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Regular.otf') format('opentype')}
#font-face {font-family: MJXc-TeX-vec-B; src: local('MathJax_Vector Bold'), local('MathJax_Vector-Bold')}
#font-face {font-family: MJXc-TeX-vec-Bx; src: local('MathJax_Vector'); font-weight: bold}
#font-face {font-family: MJXc-TeX-vec-Bw; src /*1*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/eot/MathJax_Vector-Bold.eot'); src /*2*/: url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/woff/MathJax_Vector-Bold.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/fonts/HTML-CSS/TeX/otf/MathJax_Vector-Bold.otf') format('opentype')}
<span class="mjx-chtml"><span class="mjx-math" aria-label="_{a} ^{x} A "><span class="mjx-mrow" aria-hidden="true"><span class="mjx-msubsup"><span class="mjx-ba
se"><span class="mjx-mi"><span class="mjx-char"></span></span></span><span class="mjx-stack" style="vertical-align: -0.156em;"><span class="mjx-sup" style="font-size: 70.7%; padding-bottom: 0.255em; padding-left: 0px; padding-right: 0.071em;"><span class="mjx-texatom" style=""><span class="mjx-mrow"><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.225em; padding-bottom: 0.298em;">x</span></span></span></span></span><span class="mjx-sub" style="font-size: 70.7%; padding-right: 0.071em;"><span class="mjx-texatom" style=""><span class="mjx-mrow"><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I
" style="padding-top: 0.225em; padding-bottom: 0.298em;">a</span></span></span></span></span></span></span><span class="mjx-mi"><span class="mjx-char MJXc-TeX-math-I" style="padding-top: 0.519em; padding-bottom: 0.298em;">A</span></span></span></span></span>
Related
Button text color won't change
I've recently just integrated some buttons into my code but it wont' let me change the font-color with color-parameter. Everything else can be changed, but not the font-color. its black 'normal' and white on hover. Can someone maybe help?
Thats the CSS
.button {
border: none;
padding: 0.7em 2.6em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 0.8vw;
margin: 1.2em 0 3em 0;
cursor: pointer;
font-family: "Gill Sans", Sans-Serif;
font-weight: 600;
background-color: #b9b9b9;
color: #?????
}
.button:hover {
background-color: #b9b9b9;
text-decoration: underline;
color: #?????
}
And the HTML
<button class="button" onclick="window.location.href='http://www.XXXX.xx/‚;“>Button-Text</button >
Chrome Extension load Roboto Font
I have roboto font which i need to put in my extension.
In my manifest.json file i have mention web_accessible_resources as :
"web_accessible_resources": ["fonts/*.ttf"]
Below is css for loading font :
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('chrome-extension://__MSG_##extension_id__/fonts/Roboto-Black.ttf') ;
}
/* latin */
#font-face {
font-family: 'Roboto, sans-serif';
font-style: normal;
font-weight: 500;
src: url('chrome-extension://__MSG_##extension_id__/fonts/Roboto-Medium.ttf');
}
/* latin */
#font-face {
font-family: 'Roboto, sans-serif';
font-style: normal;
font-weight: 900;
src: url('chrome-extension://__MSG_##extension_id__/fonts/Roboto-Bold.ttf');
}
But i can font are not loading when extension content script css loads.
Google Roboto font url
Css overriding nodejs express bootstrap
I have developed a web application for mobile with Java+Spring, because of slow response i am now trying to implement the same thing on node.js, express.
I used bootstrap.css and styles.css for my site specific styles and a few overrides of bootstrap. In my old implementation everything worked currectly but right now on nodejs, All styles from bootstrap is applied currectly to my markup while all overrides from styles.css are ignored by chrome. Any idea what am i missing.
Here is example demostration of my problem
Some markup from html
<div class="row">
<ul id="tabs-menu" class="nav nav-tabs">
<li class="active">Bollywood</li>
<li>Western</li>
<li>Pakistani</li>
<li>Islamic</li>
</ul>
</div>
css properties as inspected by chrome
//from bootstrap
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
//from bootstrap
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
//from bootstrap
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
//from bootstrap
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
//from style.css
.nav>li>a {
color: #000;
background: #ddd;
}
//from style.css
.nav>li>a {
padding: 3px 1px 3px 1px; //ignored
margin-bottom: 1px;
margin-right: 1px; //ignored
border-radius: 0px; //ignored
font-size: 13px;
}
Problem is styles from style.css with //ignored comment at the end are ignored by chrom where as in my previous implementation exactly the same code worked perfectly.
here is my style.css
body {
min-height: 500px;
padding-top: 70px;
padding-bottom: 70px;
font-family: 'juice_light';
}
a
{
color:#CA4242;
}
a:hover
{
color:#B71B1B;
}
.navbar-default {
background-color: #fff;
border-color: #e7e7e7;
}
.navbar-header {
width:100%;
}
.navbar
{
min-height:65px;
}
#MyPlayQueue
{
float: right;
padding: 15px;
font-size: 14px;
line-height: 40px;
height: 20px;
color: #000;
font-weight: bold;
}
#MyPlayQueue
{
float: right;
padding: 20px 5px 0px 0px;
font-size: 14px;
line-height: 30px;
height: 20px;
color: #000;
font-weight: bold;
}
#MyPlayQueue:hover
{
color:#CA4242;
}
.row
{
padding-left: 4px;
padding-right: 4px;
padding-bottom:10px;
}
.nav>li>a {
padding:3px 1px 3px 1px;
margin-bottom: 1px;
margin-right: 1px;
border-radius: 0px;
font-size: 13px;
}
.tab-content>.active {
padding: 10px 0px;
}
.nav>li>a {
color: #000;
background:#ddd;
}
.nav-tabs {
border-bottom: 5px solid #D71921;
}
.nav-tabs>li.active>a
{
color: #fff;
background:#d71921;
cursor:pointer;
}
.nav-tabs>li.active>a:hover
{
color: #fff;
background:#D52737;
}
#sub-categories, #sub-menu
{
clear:both;
text-align: center;
padding: 10px 0px 0px;
}
p {
margin: 0 0 5px;
}
#font-face {
font-family: 'juice_light';
src: url('/fonts/juice_light-webfont.eot');
src: url('/fonts/juice_light-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/juice_light-webfont.woff') format('woff'),
url('/fonts/juice_light-webfont.ttf') format('truetype'),
url('/fonts/juice_light-webfont.svg#juice_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'juice_regular';
src: url('/fonts/juice_regular-webfont.eot');
src: url('/fonts/juice_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/juice_regular-webfont.woff') format('woff'),
url('/fonts/juice_regular-webfont.ttf') format('truetype'),
url('/fonts/juice_regular-webfont.svg#juice_regularregular') format('svg');
font-weight: normal;
font-style: normal;
}
#content
{
padding:0px 0px 70px;
}
#content .stub_holder
{
display: block;
width: 120px;
height: 120px;
background: -15px -10px url("../images/stub_image.png");
}
#content #albumStage
{
vertical-align:bottom;
display:block;
}
#content #albumStage .albumCover img
{
border:5px solid #eee;
width:100px;
}
#content #albumStage .info .albumCover
{
float:left;
}
#content #albumStage .info .albumInfo
{
padding-left:115px;
}
#content #albumStage .info .albumInfo .albumTitle
{
font-size:20px;
}
#content #albumStage .info .albumInfo .albumCategory
{
font-size:20px;
}
#content #albumStage .info .albumInfo .albumTracks
{
font-size:14px;
}
#content #albumStage #albumControls
{
clear:both;
display:block;
padding:10px 0px 10px 0px;
}
#content #albumStage #albumControls .albumControls
{
background:#D71921;
padding:5px;
border:3px solid #ccc;
color:#fff;
margin:3px 6px 3px 0px;
cursor:pointer;
}
#content ul#albums, #content ul#songs
{
list-style-type:none;
padding: 0px;
}
#content ul#songs
{
padding-left:0px;
width:100%;
}
#content ul#songs li.song, #content ul#songs li.song_end
{
padding:20px 5px 40px 5px;
border-top:1px solid #aaa;
display:block;
clear:both;
}
#content ul#songs li.song_end
{
text-align: center;
}
#content ul#songs li.song.alternate
{
background:#f2f2f2;
}
#content ul#songs li.song .streamControls img
{
padding-right: 3px;
width:25px;
}
#content ul#songs li.song .streamControls, #content ul#songs li.song .songDetail
{
float:left;
padding-right:5px;
}
#content ul#songs li.song .songDetail
{
max-width: 210px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#content ul#songs li.song .queueControls
{
padding-right: 5px;
float: right;
}
#content ul#albums li.album
{
float:left;
padding:3px;
height: 170px;
}
#content ul#albums li.album img
{
border : 5px solid #ddd;
width: 120px;
}
#content ul#albums li.album .albumTitle
{
display:block;
font-weight:bold;
padding-top:2px;
text-align:center;
width:120px;
}
#content ul#albums li.album a
{
color:#000;
}
#aEnd
{
clear: both;
text-align: center;
border: 1px solid #ddd;
padding: 10px;
}
.loader
{
display:inline-block;
}
.load-progress {
width: 150px;
background-color: #aaa;
height: 5px;
}
.play-progress {
width: 0px;
background-color: #333;
height: 5px;
}
.row.footer
{
opacity:0.9;
position: fixed;
bottom: 0px;
padding:0px;
padding-top:5px;
margin:0px 0px 0px -15px;
height:70px;
width:100%;
background:#000;
}
#playListSeekBar, #playListControls
{
text-align:center;
}
#playListSeekBar, #playListControls img
{
padding-left:10px;
padding-right:10px;
}
#playListSeekBar, #playListControls img.control
{
cursor:pointer;
}
#playListSeekBar .timers
{
color:#aaa;
}
#playListSeekBar .timers#timeLeft
{
}
#playListSeekBar #controls_playList
{
padding-bottom: 3px;
}
additionally here is layout.jade if it helps understanding my question
doctype html
html
head
title= title
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width', initial-scale='1.0')
meta(name='author', content='Khushal Khan')
meta(name='description', content='Mobilink Streaming Web App')
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/bootstrap.css')
link(rel='shortcut icon', href="/images/favicon.ico")
//
script(src='/javascripts/less-1.3.3.min.js')
//if lt IE 9
script(src='/javascripts/html5shiv.js')
script(type='text/javascript', src='/javascripts/jquery.min.js')
script(type='text/javascript', src='/javascripts/bootstrap.min.js')
script(type='text/javascript', src='/javascripts/scripts.js')
body
block content
Ok, a few things that I recognized: First of all: Your first given example is not working probably because of your // comments. // in CSS is not standard, so a few browser will misinterpret that. Second: For me your example code works fine, besides these // problems. Third: I believe your issue comes by first calling your individual style.css and that gets overwritten in part by that given bootstrap.css. Please try this code below, where I changed the position of your linked css files: doctype html html head title= title meta(http-equiv='X-UA-Compatible', content='IE=edge') meta(name='viewport', content='width=device-width', initial-scale='1.0') meta(name='author', content='Khushal Khan') meta(name='description', content='Mobilink Streaming Web App') link(rel='stylesheet', href='/stylesheets/bootstrap.css') link(rel='stylesheet', href='/stylesheets/style.css') link(rel='shortcut icon', href="/images/favicon.ico") // script(src='/javascripts/less-1.3.3.min.js') //if lt IE 9 script(src='/javascripts/html5shiv.js') script(type='text/javascript', src='/javascripts/jquery.min.js') script(type='text/javascript', src='/javascripts/bootstrap.min.js') script(type='text/javascript', src='/javascripts/scripts.js') body block content
in jade, cannot get style #font-face to work
from a working css file (generated by font-squirrel):
#font-face {
font-family: 'SnowTopCaps';
src: url('/fonts/snowtopcaps-webfont.eot');
src: url('/fonts/snowtopcaps-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/snowtopcaps-webfont.woff') format('woff'),
url('/fonts/snowtopcaps-webfont.ttf') format('truetype'),
url('/fonts/snowtopcaps-webfont.svg#snowtopcaps') format('svg');
font-weight: normal;
font-style: normal;
}
trying to declare in style section in jade document:
...
style
#font-face
font-family
| SnowTopCaps
src
| url('/fonts/snowtopcaps-webfont.woff') format('woff')
font-weight
| normal
font-style
| normal
...
but none of the style declaration is written to the generated html?
any anybody see what's missing here?
This syntax is for HTML, not for css.
Use
style.
#font-face {
font-family: 'SnowTopCaps';
src: url('/fonts/snowtopcaps-webfont.eot');
src: url('/fonts/snowtopcaps-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/snowtopcaps-webfont.woff') format('woff'),
url('/fonts/snowtopcaps-webfont.ttf') format('truetype'),
url('/fonts/snowtopcaps-webfont.svg#snowtopcaps') format('svg');
font-weight: normal;
font-style: normal;
}
Or use the :stylus filter
htaccess htpasswd no prompt
I'm trying to protect a folder using '.htaccess' and '.htpasswd'. I used http://www.tools.dynamicdrive.com/password/ to generate the files. Copied them to the corresponding folders. When I attempted to access the protected folder, I got a login prompt. Input incorrect login details, get sent to error page. All good. Now, without any changes, I revisit the page to try and login again to access the protected folder, and it just throws an error, there's no login box. If I delete the .htaccess, I can get into the folder again without errors. Upon replacing the .htacces, I get the error again, still no login box. I have tried to regenerate a new set of files, user/pass combo, and slight modifications to .htaccess just to try get some form of response back. I have checked for any bytemark, both files are clean UTF-8. What's going on? Why am I not getting a prompt anymore? On a side note, where should the log be? All I managed to find was some access logs with nothing useful in them. Site location on server /home/labvccom/ /home/labvccom/public_html/admin/.htaccess AuthName "Restricted Area" AuthType Basic AuthUserFile /htpasswords/.htpasswd AuthGroupFile /dev/null require valid-user /home/labvccom/htpasswords/.htpasswd [user: admin | pass: password] admin:02yd6IWnPes66 This is the page that i get when it throws the error with NO login prompt Internal Server Error The server encountered an internal error or misconfiguration and was unable to complete your request. Please contact the server administrator, webmaster#labvc.com.au and inform them of the time the error occurred, and anything you might have done that may have caused the error. More information about this error may be available in the server error log. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request. Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 mod_fcgid/2.3.5 Phusion_Passenger/2.2.15 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at labvc.com.au Port 80
Your browser remembers the first login attempt and send the credentials in the Authorization header - that is why you do not get a new login prompt. Try to clear the authorization cache. The underlying problem is most likely as #openscript.ch suggests.
I think your path to the .htpasswd-File is wrong. If it is not absolute, it is treated as relative to the ServerRoot. Try to use an absolute path to your .htpasswd-File.
You need to create login/pass .htaccess inside the folder that you want to protect... otherwise the trick will not work as wanted! I created some days ago a simple php tool that creates login/pass for you. It's a part of another my project... so I extracted it from my archive for you. Pay attention that under windows the password is sent clear... is not a bug of my script but a request by windows servers. So use only it in remote hosting with unix, linux running apache. Put apache-ht.php inside the folder you want to protect and then execute it. Be prompted to create user/pass! After done delete apache-ht.php from folder. You fail because you are trying to set relative path. This kind of .htaccess needs full path! I hope this helps:
apache-ht.php
<?php
############################################
# Created By Alessandro Marinuzzi [Alecos] #
# apache-ht.php - Version 1.5 - 07/04/2015 #
# WebSite: ---> http://www.alecos.it/ <--- #
############################################
if ((isset($_POST['username']) && (!empty($_POST['username']))) && ((isset($_POST['password'])) && (!empty($_POST['password'])))) {
$username = $_POST['username'];
$password = $_POST['password'];
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apache - Username :: Password Generator</title>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Oswald);
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html {
display: table;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: lightgray;
display: table-cell;
vertical-align: middle;
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
.mainbox {
border-radius: 7px;
border: 1px solid gray;
background-color: darkgray;
width: 420px;
height: auto;
margin-top: 50px;
margin-bottom: 50px;
vertical-align: middle;
text-align: center;
margin: 0 auto;
padding: 20px;
}
.title {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 24px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.save {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
border-radius: 3px;
border: 1px solid black;
background-color: darkviolet;
cursor: pointer;
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
vertical-align: middle;
text-align: center;
padding: 10px;
}
.data {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.doit {
vertical-align: middle;
text-align: center;
}
.user {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
.pass {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
</style>
</head>
<body>
<?php
if ((substr($_SERVER['DOCUMENT_ROOT'],-1,1) == "/") && (substr($_SERVER['PHP_SELF'],0,1) =="/")) {
$path = $_SERVER['DOCUMENT_ROOT'] . substr(dirname($_SERVER['PHP_SELF']),1) . "/.htpasswd";
} else {
$path = $_SERVER['DOCUMENT_ROOT'] . dirname($_SERVER['PHP_SELF']) . "/.htpasswd";
}
$tmp1 = fopen(".htaccess", "w");
$tmp2 = "AuthType Basic\n";
$tmp2 .= "AuthName \"Restricted Area\"\n";
$tmp2 .= "AuthUserFile \"$path\"\n";
$tmp2 .= "Require valid-user\n";
fwrite($tmp1, $tmp2);
fclose($tmp1);
unset($tmp1);
unset($tmp2);
if (strtoupper(substr(PHP_OS,0,3) == 'WIN')) {
$tmp1 = fopen(".htpasswd", "w");
$tmp2 = "$username:$password\n";
fwrite($tmp1, $tmp2);
fclose($tmp1);
unset($tmp1);
unset($tmp2);
} else {
$tmp1 = fopen(".htpasswd", "w");
$tmp2 = "$username:" . crypt($password,'$6$rounds=5000$usesomesillystringforsalt$') . "\n";
fwrite($tmp1, $tmp2);
fclose($tmp1);
unset($tmp1);
unset($tmp2);
}
exit("<div class=\"mainbox\">\n<span class=\"title\">Apache - Username :: Password Generated!</span>\n</div>\n</body>\n</html>");
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apache - Username :: Password Generator</title>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Oswald);
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html {
display: table;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: lightgray;
display: table-cell;
vertical-align: middle;
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
.mainbox {
border-radius: 7px;
border: 1px solid gray;
background-color: darkgray;
width: 420px;
height: auto;
margin-top: 50px;
margin-bottom: 50px;
vertical-align: middle;
text-align: center;
margin: 0 auto;
padding: 20px;
}
.title {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 24px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.save {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
border-radius: 3px;
border: 1px solid black;
background-color: darkviolet;
cursor: pointer;
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
vertical-align: middle;
text-align: center;
padding: 10px;
}
.data {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
vertical-align: middle;
text-align: center;
}
.doit {
vertical-align: middle;
text-align: center;
}
.user {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
.pass {
font-family: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
border: #C0C0C0 2px solid;
vertical-align: middle;
text-align: center;
border-radius: 3px;
color: white;
width: 80px;
margin: 5px;
}
</style>
</head>
<body>
<div class="mainbox">
<span class="title">Apache - Username :: Password Generator</span><br>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<span class="data"><label for="username">Username:</label> <input type="text" class="user" id="username" name="username"></span><br>
<span class="data"><label for="password">Password:</label> <input type="text" class="pass" id="password" name="password"></span><br>
<span class="doit"><input type="submit" class="save" value="Create Username & Password"></span><br>
</form>
</div>
</body>
</html>