جافاسكريبت - شكل غير عادي لمنطقة النص؟

عادةً ما تكون مناطق النص مستطيلة أو مربعة، مثل هذا:

لكنني أريد منطقة نص بشكل مخصص، مثل هذا، على سبيل المثال:

كيف هذا ممكن؟

الإجابة رقم 1

مقدمة

أولاً، هناك العديد من الحلول المقترحة في منشورات أخرى. أعتقد أن هذا الحل حالياً (في عام 2013) هو الحل الذي يمكن أن يكون متوافقاً مع أكبر عدد من المتصفحات، لأنه لا يحتاج إلى أي خصائص CSS3. ومع ذلك، لن تعمل الطريقة على المتصفحات التي لا تدعم contentdeditable، كن حذراً.

حل باستخدام عنصر contenteditable

كما اقترح @Getz، يمكنك استخدام div مع contenteditable ثم تشكيله ببعض div عليه. إليك مثالاً، مع كتلتين تطوفان في الزاوية العلوية اليسرى والزاوية العلوية اليمنى من div الرئيسي:

كما ترى، عليك اللعب قليلاً حول الحدود إذا كنت تريد نفس النتيجة التي طلبتها في منشورك. يحتوي الـ div الرئيسي على الحدود الزرقاء من كل جانب. بعد ذلك، يجب أن تلاصق الكتل الحمراء لإخفاء الحدود العليا للـ div الرئيسي، وتحتاج إلى تطبيق الحدود عليها فقط على جوانب معينة (الأسفل واليسار للكتلة اليمنى، الأسفل واليمين للكتلة اليسرى).

بعد ذلك، يمكنك الحصول على المحتوى عبر جافاسكريبت، عندما يتم تفعيل زر "إرسال" على سبيل المثال. وأعتقد أنه يمكنك أيضًا التعامل مع بقية تنسيقات CSS (حجم الخط، اللون، إلخ) :)

عينة الكود الكاملة

.block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
}

.parent {
  height: 300px;
  width: 500px;
}

<div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>

الإجابة رقم 2

في المستقبل القريب يمكننا استخدام ما يسمى css-shapes لتحقيق ذلك. يمكن لعُنصر div مع تعيين خاصية contenteditable إلى true إلى جانب css-shapes أن يجعل منطقة النص أي نوع من الأشكال.

حالياً، يدعم Chrome Canary بالفعل css-shapes. مثال على ما هو ممكن باستخدام css-shapes هو:

هنا هم يستخدمون شكل مضلع لتحديد تدفق النص. يجب أن يكون من الممكن إنشاء مضلعين لتتناسب مع الشكل الذي تريده لمنطقة النص الخاصة بك.

تم كتابة مزيد من المعلومات حول css-shapes في: http://sarasoueidan.com/blog/css-shapes/

لتمكين أشكال CSS في Chrome Canary:

1. انسخ والصق chrome://flags/#enable-experimental-web-platform-features في شريط العناوين، ثم اضغط إدخال.
2. انقر على رابط 'تمكين' داخل هذا القسم.

3. انقر على زر 'إعادة التشغيل الآن' في أسفل نافذة المتصفح.

   من: http://html.adobe.com/webplatform/enable/

.container {
  overflow: hidden;
  shape-inside: polygon(200.67px 198.00px, 35.33px 198.47px, 34.67px 362.47px, 537.00px 362.74px, 535.67px 196.87px, 388.33px 197.00px, 386.67px 53.53px, 201.33px 53.53px);
  font-size: 0.8em;
}
/** for red border **/

.container:before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 190px;
  height: 190px;
  background-color: white;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
}
.container:after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 190px;
  height: 190px;
  background-color: white;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
}

<div class="container" contenteditable="true">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis diam lacus, id lacinia quam interdum quis. Ut vitae dignissim lorem, nec lobortis turpis. Fusce non fringilla nulla, eu blandit urna. Nulla facilisi. Nunc tristique, mauris vitae
  tincidunt egestas, eros metus dapibus sapien, quis tincidunt sem dui ac purus. Morbi lobortis, quam sit amet consequat aliquam, elit mi rutrum erat, id tempus turpis turpis et sem. Vivamus tempor mollis porttitor. Sed elementum nisl sit amet sapien
  auctor imperdiet. Sed suscipit convallis nisi, in dignissim risus placerat suscipit. Sed vel lorem eu massa vulputate pretium. Nulla eget dolor sed elit gravida condimentum non vel lorem. Vivamus pretium, augue sed aliquet ultricies, neque nibh porttitor
  libero, a tristique elit mi eu nibh. Vestibulum erat arcu, condimentum eleifend adipiscing ut, euismod eu libero. In pharetra iaculis lorem, at consectetur nisi faucibus eu.

</div>

تم إنشاء المضلع بواسطة: http://betravis.github.io/shape-tools/polygon-drawing/

النتيجة

http://jsfiddle.net/A8cPj/1/

الإجابة رقم 3

ربما يكون ذلك ممكنًا باستخدام المحتوى القابل للتحرير؟

ليست منطقة نص، ولكن إذا نجحت في إنشاء عنصر div بهذا الشكل، فقد ينجح ذلك.

أعتقد أنه ليس ممكنًا باستخدام مربع النص فقط...

مثال صغير: http://jsfiddle.net/qgfP6/5/

<div contenteditable="true">
</div>

الإجابة رقم 4

يمكنك العمل مع عنصر div قابل للتحرير، مع عنصرين div في الزاويتين:

<div style="border:1px blue solid ; width: 200px; height: 200px;" contenteditable="true">
  <div style="float:left; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
  <div style="float:right; width:50px; height: 50px;  border: 1px solid blue" contenteditable="false"></div>
  hello world, hello worldsdf asdf asdf sdf asdf asdf
</div>

الإجابة رقم 5

يمكنك أيضًا القيام بذلك باستخدام مناطق CSS

مع Regions، يمكنك استخدام خصائص CSS لتدفق المحتوى إلى الحاويات المصممة الموجودة، مع تحديد أي ترتيب للحاويات تختاره، بغض النظر عن موقعها على الصفحة.

(منصة الويب)

[مدعوم حاليًا في WebKit Nightly وSafari 6.1+ وiOS7 وقابل للاستخدام بالفعل في كروم وأوبرا بعد تمكين العلامة: enable-experimental-web-platform-features - caniuse، منصة الويب]

كِمْبِر

لذا يمكنك جعل شكل مربع النص هذا عن طريق تدفق النص عبر منطقتين، وتحريره عن طريق إضافة contenteditable على المحتوى.

ترميز

<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>

(CSS) ذات الصلة

#content {
     -ms-flow-into: article;
    -webkit-flow-into: article;
}

.region {
    -ms-flow-from: article;
    -webkit-flow-from: article;
    box-sizing: border-box;
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 0 1px;
    margin: auto;
    left:0;right:0;
    border: 2px solid lightBlue;
}

#box-a {
    top: 10px;
    background: #fff;
    z-index: 1;
    border-bottom: none;
}

#box-b {
    top: 210px;
    width: 400px;
    overflow: auto;
    margin-top: -2px;
}

النتيجة:

لمزيد من المعلومات حول المناطق - إليكم مقال جيد: مناطق CSS3: تخطيط صفحة غني باستخدام HTML و CSS3

الإجابة رقم 6

سطر طويل من النص في الصندوق سيجعل المؤشر ينزل أسفل الحواف الوسطى ولا يبدو أنني أستطيع إصلاح ذلك.

**[Fiddle Diddle][1]**

    #wrap {
        overflow: hidden;
    }
    #inner {
        height: 350px;
        width: 500px;
        border: 1px solid blue;
    }
    #textContent {
        word-wrap: break-word;
        word-break: break-all;
        white-space: pre-line;
    }
    #left, #right {
        height: 50%;
        width: 25%;
        margin-top: -1px;
        padding: 0;
        border: 1px solid blue;
        border-top-color: white;
        margin-bottom: 5px;
    }
    #right {
        margin-left: 5px;
        float: right;
        margin-right: -1px;
        border-right-color: white;
    }
    #left {
        margin-right: 5px;
        float: left;
        margin-left: -1px;
        border-left-color: white;
    }

<div id="wrap">
  <div id="inner">
     <div id="left"></div>
     <div id="right"></div>
     <span id="textContent" contenteditable>The A B Cs</span>
  </div>
</div>

[1]: http://jsfiddle.net/yKSZV/