owlerz Posted July 12, 2019 Share Posted July 12, 2019 We have a lot of stuff discussing geometry, so have a need to do the line and ray symbols, which would be an overline with left and right arrows for line, and overline ending in a right arrow for ray. I absolutely have been unable to find a solution for implementing these using CSS/HTML. These are fairly common symbols, so I'm sure there's a way to do it Suggestions? Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2019 Share Posted July 14, 2019 Most sites that deal with math generate images with LaTeX or some similar software and put those on the page. There is an XML-based language called MathML which can render any mathematical symbols but it is only supported by Firefox (https://developer.mozilla.org/en-US/docs/Web/MathML), other browsers haven't caught up yet. Link to comment Share on other sites More sharing options...
JMRKER Posted July 16, 2019 Share Posted July 16, 2019 On 7/11/2019 at 10:49 PM, owlerz said: We have a lot of stuff discussing geometry, so have a need to do the line and ray symbols, which would be an overline with left and right arrows for line, and overline ending in a right arrow for ray. I absolutely have been unable to find a solution for implementing these using CSS/HTML. These are fairly common symbols, so I'm sure there's a way to do it Suggestions? I am unclear of what you are trying to do. Can you give an example or link to the display you wish to create? What is an "overline" in relation to a left/right arrow? Is it like a superscript or subscript display? Link to comment Share on other sites More sharing options...
Ingolme Posted July 16, 2019 Share Posted July 16, 2019 6 minutes ago, JMRKER said: I am unclear of what you are trying to do. Can you give an example or link to the display you wish to create? What is an "overline" in relation to a left/right arrow? Is it like a superscript or subscript display? In math it is normal to add "diacritics" of sorts to variables to indicate what type of information it contains, some examples can be found in this page: https://en.wikipedia.org/wiki/List_of_mathematical_symbols#Letter-based_symbols Link to comment Share on other sites More sharing options...
owlerz Posted July 16, 2019 Author Share Posted July 16, 2019 So in geometry, a line segment is written like "AB" with a line above - easy, just use the overline in a span. A ray from A to B would be a right arrow --> above AB. For a line (not a line segment), it's arrows in both directions <-->, again, above the AB. I know it can be done in Latex, and images generated from that, but that method is messy and annoy. This site has done it with images: https://www.varsitytutors.com/hotmath/hotmath_help/topics/lines-segments-rays. I just think there's probably a way to do without resorting to images. This is standard math notation, but I can't find a solution anywhere. (I've been through all the extended symbols, and am happy there's a code for an interrobang....) So basically, I need a way to stick > or < on the end of an overline. Does that make sense? Link to comment Share on other sites More sharing options...
Ingolme Posted July 16, 2019 Share Posted July 16, 2019 There is no way to do that in HTML or CSS. Link to comment Share on other sites More sharing options...
owlerz Posted July 16, 2019 Author Share Posted July 16, 2019 Ok, thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 17, 2019 Share Posted July 17, 2019 Do you mean use HTML/CSS like this https://www.w3schools.com/code/tryit.asp?filename=G645EZ9AAZ7U Link to comment Share on other sites More sharing options...
Ingolme Posted July 17, 2019 Share Posted July 17, 2019 That's one way to do it. It'll take even more work to get the arrow to cross over two or more variables. Possible, sure, but not easy. It's not a feature built into the language was what I was getting at. It certainly would be nice if more browsers supported MathML. Link to comment Share on other sites More sharing options...
JMRKER Posted July 23, 2019 Share Posted July 23, 2019 From the link at: https://www.w3schools.com/code/tryit.asp?filename=G645EZ9AAZ7U Modify for two character arrow bar <!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } #A-arrowleft, #A-arrowright { padding-top: 9px; display: inline-block; position: relative; } #A-arrowleft:before, #A-arrowright:before { position:absolute; top:0; left: 0; right: 0; height:9px; font-size:9px; vertical-align: top; line-height: 9px; text-align: center; } #A-arrowleft:before { content: "\2190"; font-size: 1.2em; } #A-arrowright:before { content: "\2192"; font-size: 1.2em; } </style> </head> <body> <h1>My First CSS Example</h1> <p>This is a paragraph. <span id="A-arrowleft">AB</span></p> <p>This is a paragraph. <span id="A-arrowright">BA</span></p> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now