CODEWITHSUNDEEP
javascripthtml
tmanrocks909
tmanrocks909

Reputation: 35

html can you combine 2 symbols or another way to get the same effect

I want the &#9645 (rectangle) symbol and &#9711 (circle) symbol in the same spot Im trying to put in a optimization math problem and the question has to deal with a rectangle being inside a circle and i wanted to display that.

js fiddle: https://jsfiddle.net/tmanrocks999/d0htbokn/

html/ js:

	var userInput = prompt("Please enter your optimization problem: ", "");
	
  if(userInput.includes("Determine the area of the largest rectangle that can be inscribed in a circle of radius"));
  document.write("&#9645;"+"	&#9711;"+"<br>");
  document.write("x"+"2".sup()+" + "+"y"+"2".sup()+" = 16 ");
  //🐺
  document.write("");
<html>
<body>

Determine the area of the largest rectangle that can be inscribed in a circle of radius 4.
</body>
</html>

I expect my output to have the rectangle and circle in the same position not next to each other. but my current output they are next to each other not overlapping like i want.

Upvotes: 0

Views: 521

Answers (4)

Shankar
Shankar

Reputation: 3088

For that, you can use CSS position property as below You can learn more about CSS positions here

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

and to make your shapes look neat and clean, we can push the inside shape some pixels from the left side by using left property

.parent{
  position : relative;
}
.child.c{   
  position: absolute;

}
.child.r{
  left : 2px;
  position : absolute;
}
<html>
<body>

<script>
	var userInput = prompt("Please enter your optimization problem: ", "");
	
  if(userInput.includes("Determine the area of the largest rectangle that can be inscribed in a circle of radius"));
  document.write("<span class='parent'><span class='child r'>&#9645;</span>"+"	<span class='child c'>&#9711;</span></span>".fontsize(4)+"<br>");
  document.write("x"+"2".sup()+" + "+"y"+"2".sup()+" = 16 ");
  //🐺
  document.write("");
</script>
Determine the area of the largest rectangle that can be inscribed in a circle of radius 4.
</body>
</html>

EDIT if you find difficulty displaying in different screens you can go for SVG as suggested by riorudo However, I have made a few modifications based on your needs

Have a look at this fiddle

Upvotes: 1

riorudo
riorudo

Reputation: 1227

An alternative could be to create your rectangle or circle as a SVG. Something like:

<svg width="30" height="30">
    <rect width="30" height="30" style="fill:rgba(0,0,255, 0);stroke-width:3;stroke:rgb(0,0,0)" />
    <circle cx="15" cy="15" r="10" style="fill:rgba(0,0,255, 0);stroke-width:2;stroke:rgb(0,0,0)"  />
</svg>

Check out some easy examples

Upvotes: 0

Karthik Balaguru
Karthik Balaguru

Reputation: 7842

The position property of CSS will be very helpful here. It can be helpful for positioning the HTML element at the place you desire. The position property is used to determine the kind of positioning you want to use for the container as either 'absolute' or 'relative'. If you set the position property as 'absolute', the style sheet would position them one underneath the other using CSS.

Upvotes: 0

Matthew Zackschewski
Matthew Zackschewski

Reputation: 486

I'm not exactly sure what type of solution you're looking for, but you can always use CSS to position the shapes exactly where you want within the parent div or within the document itself.

The example below just uses position: absolute and other relevant position CSS attributes to force the two shapes to overlap.

Check out this JSFiddle

<html>

<head>
    <style>
        .stacked {
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <script>
        var userInput = prompt("Please enter your optimization problem: ", "");

        if (userInput.includes("Determine the area of the largest rectangle that can be inscribed in a circle of radius"));
        document.write("<div class='stacked'>&#9645;</div>" + "	<div class='stacked'>&#9711;</div>" + "<br>");
        document.write("x" + "2".sup() + " + " + "y" + "2".sup() + " = 16 ");
        //🐺
        document.write("");
    </script>
    Determine the area of the largest rectangle that can be inscribed in a circle of radius 4.
</body>

</html>

Upvotes: 1

Related Questions