Search code examples
htmlcsstext

How do I simulate sms text in HTML5 code?

I am working on a series of web pages (a piece of fiction) that include text that is intended to look like it is from a SMS texting app. I want to 'simulate' that in the HTML code so that the bubbles auto size from right for some and left for others to accommodate the (up to a point before wrapping). I want the right and left messaging to actually work from the left and right margins of the #style in the CSS. Is there a way to do this?

This code comes close, but it doesn't really get close to the right margin and the background size is fixed. It can't autosize to the text.

.bubR {
    width: 200px;
    margin: 5px auto;
    margin-top: 1px;
    background: green;
    padding: 1px;
    text-align: right;
    font-size: 10.0pt;
    color: #fff;
    font-family: arial;
    position:right;
}
.bubL {
    width: 200px;
    margin: 5px;
    background: blue;
    padding: 1px;
    text-align: left;
    font-size: 10.0pt;
    color: #fff;
    font-family: arial;
    position:left;
}

The HTML Snippet.

<P><span class="capALL"><B>O</B></span>ne click. That&#8217;s all it took.  This  this is an example with the  margin: 5px auto; in the bubR style. As yuo can see the right bubble is really in the middle. The text is on the right of the bubble, but the bubble placement is wrong.</P>
<P Class="bubL"> Hi! How are you?</P>
<P Class="bubR">Good and you?</P>
<P Class="bubL">What time is it there?</P>
<P Class="bubR">Same time as you. I am in the Philippines.</P>
<P Class="bubL">Really?</P>
<P Class="bubR">Yes.</P>

I have have tried this both without the 'auto' and also removing the margin argument entirely. I will attempt to include them here.

IMPORTANT: I have NOT changed the code sample at all between the three examples!

As it was with the magin, then without the margin, and last with the margin but without the auto.

As per code snippet Without the margin entirely With the margin but removing the 'auto'

Now, it I change the CSS code to this:

.reply {
    font-size:10.0pt;
    margin-left: 13%;
    margin-right: 35%;
    text-align: left;
    font-family:"Helvetica","sans-serif"; 
    font-style: italic;
    background: green;
    color:white;
}

.sms {
    margin-left: 35%;
    margin-right: 13%;
    text-align: right;
    font-size:10.0pt;
    font-family:"Helvetica","sans-serif"; 
    font-style: italic;
    color:white;
    background: blue;
}

And the HTML code looks like this:

<P><span class="capALL"><B>O</B></span>ne click. That&#8217;s all it took.  This  this is an example with the  margin: 5px auto; in the bubR style. As yuo can see the right bubble is really in the middle. The text is on the right of the bubble, but the bubble placement is wrong.</P>
<P Class="reply"> Hi! How are you?</P>
<P Class="sms">Good and you?</P>
<P Class="reply">What time is it there?</P>
<P Class="sms">Same time as you. I am in the Philippines.</P>
<P Class="reply">Really?</P>
<P Class="sms">Yes.</P>

I get this. Which would be OK except that the background doesn't autosize.

sort of the old stuff

Solution

  • I just quickly threw this together. Hopefully you can adapt it to suit your needs. It may be a little messy but tweaking it could perhaps give you your desired result:

    HTML:

    <P><span class="capALL"><B>O</B></span>ne click. That&#8217;s all it took.  This  this is an example with the  margin: 5px auto; in the bubR style. As yuo can see the right bubble is really in the middle. The text is on the right of the bubble, but the bubble placement is wrong.</P>

<div class="holder">
  <div class="msg msg-left">
    another Left response message
  </div>
</div>
<div class="holder">
  <div class="msg msg-right">
    another right initital message
  </div>
</div>
<div class="holder">
  <div class="msg msg-left">
    Left response message
  </div>
</div>
<div class="holder">
  <div class="msg msg-right">
    right initital message
  </div>
</div>

    CSS:

    body {
  background-color:#fff;
}
.holder {
  float:left;
  width:100%;
  display:block;
  margin-bottom:20px;
}
.msg {
  width:relative;
}
.msg-right{
  background-color:blue;
  border-radius:10px;
  padding:20px;
  float:right;
}
.msg-left{
  background-color:grey;
  border-radius:10px;
  padding:20px;
  float:left;
}

    Snippet: https://jsfiddle.net/v4b5jduc/